Feature: spot-color() and color-tint() CSS functions for Separation color space support

[munepi]

Related: #430 (support color model), vivliostyle/vivliostyle-cli#774 (CMYK conversion audit)

---

Is your feature request related to a problem? Please describe.

商業印刷では、blend color、metaric ink、CMYK色域外の色などに、（単色）特色（DIC, PANTONE 等の特色）が必要です。
現在の Vivliostyle は device-cmyk() による /DeviceCMYK 出力に対応していますが、以下の2つの問題があります。

1. 特色（Separation 色空間）に対応していない。 device-cmyk() は PDF の /DeviceCMYK のみを出力でき、/Separation（特色版）を出力できません。

2. CSS に tint（濃淡）を指定する手段がない。 LaTeX の xcolor パッケージでは DIC161s!50（50% tint）や black!20（黒 20%）のように簡単に書けますが、CSS には相当する機能がありません。ユーザーが device-cmyk(0 0.32 0.5 0) のように手動で CMYK 値を計算する必要があり、ミスの温床になります。

In commercial printing, spot colors (DIC, PANTONE, etc.) are required for brand colors, metallic inks, and out-of-gamut colors. Vivliostyle currently supports /DeviceCMYK via device-cmyk(), but cannot output PDF /Separation color spaces. Also, CSS lacks a tint mechanism equivalent to xcolor's ! operator.

---

Describe the solution you'd like

2つの CSS 関数の追加を提案したいです。

1. spot-color(NAME): 特色参照

特色を名前で参照する関数です。
名前は vivliostyle.config.js で定義します。

h1 { color: spot-color(DIC161s); }

2. color-tint(COLOR, N%): 汎用 tint 関数

任意の色に tint（濃淡）を適用する汎用関数です。
これはLaTeXにおける xcolor パッケージの ! 演算子に相当します。
spot-color 専用ではなく、rgb(), device-cmyk(), 名前付きカラーなど、すべての色モデルで動作します。

/* 特色の tint（xcolor の DIC161s!50 に相当） */
.tint50  { color: color-tint(spot-color(DIC161s), 50%); }

/* プロセスカラーの tint（xcolor の black!20 に相当） */
.black20 { color: color-tint(black, 20%); }
.cyan50  { color: color-tint(device-cmyk(1 0 0 0), 50%); }

/* RGB の tint */
.red90   { color: color-tint(rgb(255 0 0), 90%); }

/* tint と alpha（透明度）の併用: これらは独立した概念です */
.both    { color: color-tint(device-cmyk(0 0 0 1 / 0.5), 50%); }

tint 演算は「白との混合」として定義されます（xcolor の ! と同じ）。

色モデル	白	color-tint(color, N%) の意味
CMYK	(0,0,0,0)	各成分 × N/100
RGB	(255,255,255)	c + (255−c) × (1 − N/100)
Spot	—	Separation tint 値 = N/100

特色の設定

特色は vivliostyle.config.js の 一箇所でのみ定義 します。
CSS と config の両方に CMYK 値を書く二重定義の問題を避けるためです。

// vivliostyle.config.js
export default {
  output: [{
    path: 'output.pdf',
    pdfPostprocess: {
      cmyk: true,
      spotColors: [
        { name: 'DIC161s', pdfName: 'DIC 161s*', cmyk: { c: 0, m: 0.64, y: 1, k: 0 } },
        { name: 'DIC256s', pdfName: 'DIC 256s*', cmyk: { c: 0.9, m: 0, y: 0.4, k: 0 } },
      ],
    },
  }],
};

spotxcolor（LaTeX）との対応関係

本提案は、LaTeXにおける拙作の spotxcolor パッケージの「Intercept, Detect, Replace」戦略に基づいています。

spotxcolor                           Vivliostyle (proposed)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
\definespotcolor{DIC161s}          → vivliostyle.config.js spotColors[]
  {DIC 161s*}{0, 0.64, 1, 0}
\color{DIC161s}                    → spot-color(DIC161s)
DIC161s!50                         → color-tint(spot-color(DIC161s), 50%)
black!20                           → color-tint(black, 20%)
\set@color intercept               → CLI post-process intercept
|c_i - t·b_i| < ε → Separation    → same algorithm → Separation

期待される PDF 出力

%% Separation 色空間オブジェクト
<< /FunctionType 2 /Domain [0 1] /C0 [0 0 0 0] /C1 [0 0.64 1 0] /N 1 >>
[/Separation /DIC#20161s* /DeviceCMYK <func ref>]

%% Content stream
/DIC161s cs 1 sc         % spot-color(DIC161s) — 100% tint
/DIC161s CS 1 SC         % stroking
/DIC161s cs 0.5 sc       % color-tint(spot-color(DIC161s), 50%)
0 0 0 0.2 k              % color-tint(black, 20%) — DeviceCMYK fallback

重要: tint と alpha（透明度）は異なる概念です

印刷においてこの2つは、根本的に異なる操作です。
しばしば印刷現場で起きていることは、一部のWebデザイナーが opacity で「薄い色」を作ろうとするのは、印刷では誤りです。
color-tint() が印刷で正しい代替手段を提供します。

	tint	alpha（transparency）
意味	インキ濃度（網点面積率）	合成透明度
PDF オペレータ	0 0 0 0.5 k	0 0 0 1 k + ExtGState /ca 0.5
版分解	1版で50%ハーフトーン	フラット化（透明の解除）が必要
併用	color-tint(device-cmyk(... / 0.5), 50%) = tint 50% かつ alpha 0.5

---

Describe alternatives you've considered

A. CSS 変更なし（config + proportional tint 検出のみ）

CSS 側は device-cmyk() をそのまま使い、CLI の config で特色名と CMYK 値のマッピングを定義する方式。
CLI の後処理で proportional tint 検出（spotxcolor の |c_i - t·b_i| < ε アルゴリズム）により、CMYK 値が特色の比例 tint であることを自動検出する。

不採用の理由

• ユーザーが device-cmyk(0 0.32 0.5 0) のように tint 値を手計算する必要がある（ミスの原因）
• CSS と config の両方に特色の CMYK 値を書く二重定義になる
• CSS 上で特色の意図が読み取れない

B. CSS custom property のみ

:root { --DIC161s: device-cmyk(0 0.64 1 0); }
h1 { color: var(--DIC161s); }

不採用の理由

• tint の問題は解決されない（var(--DIC161s) に 50% tint を適用する CSS 構文がない）
• config との二重定義の問題が残る

C. color-mix() の実装

CSS Color Level 5 の color-mix() を実装する方式。

不採用の理由

• color-mix() は汎用的すぎて、tint（白との混合）だけでなく任意の2色混合を扱う
• Separation 色空間の tint 値に直接対応しない
• 実装が大きくなりすぎる

---

Additional context

実装方針

vivliostyle.js（Core）

• spot-color() と color-tint() を CSS 関数としてパース（Vivliostyle 独自 CSS 拡張の前例あり: crop-offset, env(pub-title) など）
• Webブラウザ上のプレビュー用に color(srgb ...) に変換（device-cmyk() と同じ代替 RGB 方式）
• getSpotColorMap() API で特色マップをエクスポート（getCmykMap() と同パターン）
• 既存の device-cmyk() パイプラインへの変更なし

vivliostyle-cli

• spotColors 設定スキーマの追加
• proportional tint 検出アルゴリズム（spotxcolor より移植: |c_i - t·b_i| < ε）
• pdf-lib を用いた PDF Separation オブジェクト生成
• content stream 書き換え: 特色にマッチ
  • → rg/RG → /NAME cs TINT sc、不一致 → k/K（DeviceCMYK fallback）

既知の制約（設計上の判断）

• 非比例混合（例: DIC161s を黒と混合した色）は DeviceCMYK にfallbackします。spotxcolor と同じ制約です
• gradient 内の特色は /DeviceRGB の Shading オブジェクトのまま残ります（Chromium の構造的制約、device-cmyk() の DeviceCMYK 変換: CSS パターン別の調査結果 vivliostyle-cli#774 参照）
• DeviceN 色空間はスコープ外とします

ここで相談したいこと

1. 関数名: color-tint() vs tint() vs 他の良い案はありますか？
2. Vivliostyle 独自の CSS 関数を追加することへの懸念はありますか？

[u1f992]

現在の提案では、Vivliostyle CLIを経由せずVivliostyle Viewerで直接表示する場合に特色のプレビューができない点が気になっています。

また、独自の関数を用いずとも、CSS Color Module Level 5@color-profileの記法を借りて既存のcolor()関数でDeviceNを表現できるように思います。/Separationは/DeviceNのn=1の特殊ケースなので、要素数で出し分ければよさそうです。

たとえば以下のような形をイメージしました。

@-viv-color-component --dic-161s {
  name: "DIC#20161s";
  range: 0 0 0 0, 0 0.64 1 0;
}

@-viv-color-profile --1c {
  components: --dic-161s;
}

.foo {
  color: color(--1c 0.5);
}

@-viv-color-profile --5c {
  components: cyan, magenta, yellow, black, --dic-161s;
  tint-transform: "{ ... PostScript ... }";
}

.bar {
  color: color(--5c 0 0 0 0.3 0.5);
}

type VivColorComponent = {
    ident: string;

    /** PDF名 */
    name: string;
    /** CMYK値 min, max */
    range: [[number, number, number, number], [number, number, number, number]];
};

const Cyan: VivColorComponent = {
    ident: "cyan";
    name: "Cyan";
    range: [[0, 0, 0, 0], [1, 0, 0, 0]];
};
const Magenta: VivColorComponent = { ... };
const Yellow: VivColorComponent = { ... };
const Black: VivColorComponent = { ... };

type VivColorProfile = {
    ident: string;

    components: [VivColorComponent, ...];
    tint-transform?: string | undefined;
};

componentが1要素の場合はrangeの線形補間（FunctionType 2）、componentが2要素以上の場合は各要素のrangeの線形補間をブレンドするPostScript（FunctionType 4）を生成するイメージです。脱出ハッチとしてtint-transformにPostScript文字列を渡せばそれを用いることもできます。

Vivliostyle.js側では、rangeをRGBに変換したものに対して線形補間のブレンドを取り、色キー空間をCYMKの既存のロジックと共有して衝突回避します。Vivliostyle CLI側では、components: [Cyan, Magenta, Yellow, Black]は/DeviceCMYK、1要素なら/Separation、2要素以上なら/DeviceNを出し分けられると思います。

[munepi]

@u1f992
ご提案ありがとうございます。
たしかにcolor()だけにするほうが、/DeviceNまで扱えて、良い設計だと思います。
（LaTeXのspotxcolorパッケージは、単色特色だけを扱って、xcolorパッケージに乗る前提だったので、アレはアレです。）

当初提案との統合

ご提案を受けて、当初の spot-color() と color-tint() を取り下げ、以下の方針に修正したいと思います。

• @-viv-color-component + @-viv-color-profile + color() で Separation/DeviceN を表現（u1f992 さんの提案）
• spot-color() は不要（color(--profile value) で代替）
• color-tint() も不要（color() の引数で tint 値を直接指定）

確認したい点

1. @-viv-color-profile --cmyk { components: cyan, magenta, yellow, black; } の場合、color(--cmyk 0.5 0 0 0) は /DeviceCMYK で 0.5 0 0 0 k として出力される理解でよいですか？ つまり、4色プロセスの場合は /DeviceN ではなく /DeviceCMYK にfallbackする？

2. alpha との併用: color(--1c 0.5 / 0.3) は tint=0.5, alpha=0.3 として扱い、PDF では /DIC161s cs 0.5 sc + ExtGState /ca 0.3 になる理解でよいですか？

3. tint-transform の PostScript: これは将来的な拡張としておいて良いとおもいます。まずは、Phase 1 では線形補間（FunctionType 2）のみの実装でよいでしょうか？

4. vivliostyle.config.js との関係: 単色特色の定義は CSS の @-viv-color-component に一元化し、config 側の spotColors は不要になるという理解でよいですか？ あるいは、config でも定義できるようにしたほうがよいでしょうか？（DIC/PANTONE の定義ファイルを一括で読み込みたいケースなど）

5. これは確認でないですが、単色特色を実装した場合、CSS側で色を呼び出す名前はともかく、PDF nameのほうは、決まっているようなものなので、DICカラーであれば、 https://github.com/munepi/spotxcolor/blob/master/tools/dic.def のような一覧はちょっとどこかに一覧を載せておいたほうがいいです。

[u1f992]

すみません、一晩考えたところ、@-viv-color-profileのcomponentsの要素数で/Separationと/DeviceNを分けるのはあまり良い挙動ではないと思い至りました。1要素の/DeviceNはその通りに出力されるべきです。
提案を発展させ、@-viv-device-n <dashed-ident> { components: ... }と@-viv-separation <dashed-ident> { component: ... }を分離させることにします。これなら@color-profileとの互換性はあまり気にしなくてよさそうです。
またPDFの予約名を出力するためにキーワードを次のように定義します。component: cyan | magenta | yellow | black | red | green | blue | none | <dashed-ident>

1. 4要素のDeviceNをDeviceCMYKとするか
   迷いますが、しないほうがよいと思います。あまり意味はないものの、4要素のDeviceNと宣言された以上そのように出力したほうがユーザーの意図を正しく反映できそうです。実装のうえでもシンプルに済むはずです。@-viv-device-n・@-viv-separationを分離させた意図とも一貫性があります。
   device-cmykは@color-profileの予約名なので、color(device-cmyk 0 0.1 0.2 0.3)を受理するようにすればよさそうです。 https://drafts.csswg.org/css-color-5/#at-ruledef-profile

2. alpha
   現在の実装でもアルファ値は管理外としています。引き続きその実装とする想定です。

3. tint-transform
   初期対応としては無くてもよいと思いますが、DeviceN対応のためにはどのみちFunctionType 4 PostScript生成が必要であり、tint-transformは単に指定時に自動生成のPostScriptを置き換える機能なので、延期にしても機能はシンプルにならなそうです。

4. vivliostyle.config.js
   私の想定では、vivliostyle.config.jsに残すべき設定がないと思います。特色の一括指定ファイルがどういうものかよくわかっていないのですが、CSSを生成して@importすれば足りそうです。

5. 特色の標準PDF名
   デフォルトUAスタイルに@-viv-color-componentルールを列挙するか、キーワードにdic161sなどを含めるとよさそうです。この場合ユーザーが@-viv-color-componentを宣言する必要がほとんどなくなってよいですね。

いずれにしても、別Issueを切って、一旦現在のRGB値の取り合い部分を改善したいと考えています。上の案を練るうちに、RGB指定とCMYK指定の混在についてもアイディアを得ることができました（RGB指定も追跡してキーの取り合いに参加させれば改善できそう）。そのうえでDeviceN／Separationを自然に載せられる変換テーブルの再設計ができると考えています。

[munepi]

@u1f992 とりいそぎ、以下は、推敲せずに思っていることだけを簡単にコメントいたします。

@-viv-device-n <dashed-ident> { components: ... }と@-viv-separation <dashed-ident> { component: ... }を分離させることにします。

利用者側からすると、明示的に分けておくほうが分かりやすいと思います。

• @-viv-separation <dashed-ident> { component: ... }:（/SeparationのPDF content streamの入れ方からしても、基本的に通常の /DeviceCMYK のstackから外側に入れるので、）これでよいとお見ます。
• @-viv-device-n <dashed-ident> { components: ... }: 極論、これを1色として扱うので、これでよいと思います。

特色の一括指定ファイルがどういうものかよくわかっていないのですが、CSSを生成して@importすれば足りそうです。

実際の挙動は、特色の色宣言（ <-> , , ）をした瞬間に、PDF resourcesに入れずに、実際に使った特色だけをresourcesにすべきですね。（そうしないと、PDF previewerによって、resourcesがでかすぎて、固まったりしてしまいます :D）

いずれにしても、別Issueを切って、一旦現在のRGB値の取り合い部分を改善したいと考えています。上の案を練るうちに、RGB指定とCMYK指定の混在についてもアイディアを得ることができました（RGB指定も追跡してキーの取り合いに参加させれば改善できそう）。そのうえでDeviceN／Separationを自然に載せられる変換テーブルの再設計ができると考えています。

これは、u1f992さんが実装されようとされる実装に関係するか分かりませんが、
現在のVivliostyle.js, cliで「RGB ε」が役立つ実例を作ることができていません。「RGB ε」は、こちらが入れたRGBの値とChromiumが計算したRGBの誤差が発生する可能性があり、それをεで評価することで、与えたRGBの色を流し込める保証を作ります（数学の解析的なアプローチ）。

[u1f992]

4月の開発者会議で村上さんにアドバイスをいただき、Separation / DeviceNの議論を見つけることができたので、これを踏まえて仕様を検討したいと思います。 w3c/csswg-drafts#2023 (comment)

[u1f992]

今さらですが議論に使うドキュメントを以下のバージョンにピン留めします。

• CSS Color Module Level 5 W3C Working Draft, 25 March 2026 (git)
• CSS Color Module Level 4 W3C Candidate Recommendation Draft, 31 March 2026 (git)

w3c/csswg-drafts#2023の議論を読みました。このスレッドは古くなってしまっており、ここで提案されたcomponentsディスクリプタは、現在は相対色構文で使用するキーワードを宣言する別の用途で使用されています。

css-color-5より（これは動作が曖昧になる例として掲載されているのですが、この他にcomponentsで定義したキーワードを相対色構文で使うことを示す良い例が掲載されていない……）

@color-profile --unwise {
  src: url(https://example.com/unwise);
  components: mi, pi, ni;
}
--base: color(--unwise 35% 20% 8%);
--accent: color(from var(--base) mi calc(pi * 2) calc(ni / 2));

faceless2氏による提案

@color-profile reflex-blue {
  src: device-cmyk;
  components: "PANTONE Reflex Blue C" 1 0.723 0 0.02;
}

しかし古くなっているとはいえ、@color-profileのcomponentsを拡張する点は私が最初に提案したアプローチと似ており、さらにsrcも拡張することでフォールバックカラースペースの宣言も行えるようになっている点は筋がいいように感じています。/DeviceNと/Separationの出し分けはcomponentsの数を見るか一律/DeviceNにすることになりますが、どちらを出すか細かく指定するのはCSSが宣言的である原則とのトレードオフと言えそうです。

現在の仕様を潰さず、faceless2氏の構文を取り込む拡張を考えてみました。

@color-profile <dashed-ident>

  src: <url> | device-cmyk | srgb | lab;

  components: <component>#
  <component> = <custom-ident>
              | <custom-ident> <string>
              | <string> <number>+
              | <custom-ident> <string> <number>+

<custom-ident>は相対色構文の識別子、<string>はPDF名、<number>+はフォールバック色をsrcのチャンネル数分の<number>で表現するものとします。

<custom-ident>の省略時は相対色構文の識別子を生成しません。

<string>の省略時は、<custom-ident>をPDF名とします。ただしsrc: device-cmykの場合のみ、先頭4つのチャンネルのうち省略されたものにそれぞれ"Cyan" / "Magenta" / "Yellow" / "Black"を生成します。

<number>+の省略時は、n番目のコンポーネントについて0{n-1} 1 0{チャンネル数-n}を生成します。

具体例を挙げます。

① <custom-ident>

現行仕様の互換。以下のように補われます。

@color-profile --fogra51 {
  src: url(fogra51.icc);
  components: c, m, y, k;
}

/*
c "c" 1 0 0 0,
m "m" 0 1 0 0,
y "y" 0 0 1 0,
k "k" 0 0 0 1
*/

ただしsrc: device-cmykの場合のみ、PDFの予約名を生成します。

@color-profile --device-cmyk-copy {
  src: device-cmyk;
  components: c, m, y, k;
}
/*
c "Cyan" 1 0 0 0,
m "Magenta" 0 1 0 0,
y "Yellow" 0 0 1 0,
k "Black" 0 0 0 1
*/

② <custom-ident> <string>

①に加えてPDF名を指定できます。

@color-profile --fogra51 {
  src: url(fogra51.icc);
  components: c "MyCyan", m "MyMagenta", y "MyYello", k "MyBlack";
}
/*
c "MyCyan" 1 0 0 0,
m "MyMagenta" 0 1 0 0,
y "MyYello" 0 0 1 0,
k "MyBlack" 0 0 0 1
*/

③ <string> <number>+

/Separation / /DeviceNに対応するfaceless2氏の提案。相対色構文の識別子を生成せずに特色とフォールバック色を決めることができます。

@color-profile --duotone {
  src: device-cmyk;
  components: "PANTONE Reflex Blue C" 1 0.723 0 0.02,
              "PANTONE Warm Red C" 0 0.75 0.9 0;
}

混在も可能です。

@color-profile --cmyk-blue {
  src: device-cmyk;
  components: c, m, y, k, "PANTONE Reflex Blue C" 1 0.723 0 0.02;
}
/*
c "Cyan" 1 0 0 0,
m "Magenta" 0 1 0 0,
y "Yellow" 0 0 1 0,
k "Black" 0 0 0 1
  "PANTONE Reflex Blue C" 1 0.723 0 0.02
*/

CMYKの既存色を置き換えることもできます。

@color-profile --blue-myk {
  src: device-cmyk;
  components: "PANTONE Reflex Blue C" 1 0.723 0 0.02, m, y, k;
}
/*
  "PANTONE Reflex Blue C" 1 0.723 0 0.02,
m "Magenta" 0 1 0 0,
y "Yellow" 0 0 1 0,
k "Black" 0 0 0 1
*/

④ <custom-ident> <string> <number>+

特色にも相対色構文の識別子を生成することができます。

@color-profile --duotone {
  src: device-cmyk;
  components: blue "PANTONE Reflex Blue C" 1 0.723 0 0.02,
              red "PANTONE Warm Red C" 0 0.75 0.9 0;
}

こちらも混在可能です。

@color-profile --cmyk-blue {
  src: device-cmyk;
  components: c, m, y, k, b "PANTONE Reflex Blue C" 1 0.723 0 0.02;
}
/*
c "Cyan" 1 0 0 0,
m "Magenta" 0 1 0 0,
y "Yellow" 0 0 1 0,
k "Black" 0 0 0 1
b "PANTONE Reflex Blue C" 1 0.723 0 0.02
*/

@color-profile --blue-myk {
  src: device-cmyk;
  components: b "PANTONE Reflex Blue C" 1 0.723 0 0.02, m, y, k;
}
/*
b "PANTONE Reflex Blue C" 1 0.723 0 0.02,
m "Magenta" 0 1 0 0,
y "Yellow" 0 0 1 0,
k "Black" 0 0 0 1
*/