HSLでデザインしたパレットを紙に出すことはよくある。ここでは選んだ色相・彩度・輝度から印刷所が使う4色のインク割合を返す。
HSL から CMYK への変換のしくみ
- HSLの三要素を0〜255のRGBチャネルに変換する。
- それらをsRGB値として読み取り、色をCoated FOGRA39プロファイルで照合する。
- マッチング方法に「相対的な色域を維持」を使い、「黒点の補正を使用」をオンにする。これにより白は紙の白のまま保たれ、黒は印刷機で印刷できる最も濃いインクに対応する。
- 4つのインク値を整数のパーセンテージに丸める。Photoshopのヨーロッパ向けCMYK既定値に従う。
実際の例
HSL hsl(197, 100%, 45%)=CMYK cmyk(73%, 19%, 0%, 0%)
二つの変換が続けて行われるため丸めは二度発生し、CMYKの段階では標準のCoated FOGRA39プロファイルを使う。他のCMYKプロファイル（印刷所のものなど）では数値が異なる。印刷結果はHSLのプレビューよりわずかに鮮やかさが落ちると考えておく。
HSL と CMYK の解説
HSL とは？
HSL は色相（色相環の 0–360°）、彩度（どれだけ鮮やかか、0–100%）、明度（どれだけ明るいか、0–100%）に分ける。人が色を説明する方法に合っているため、HSL はティントやシェード、一貫したパレットを手作業やコードで作るのに最も扱いやすいフォーマットだ。
- 構文:
- hsl(H, S%, L%)
- 範囲:
- 0–360°, 0–100%, 0–100%
- おすすめ用途:
- パレット、ティントとシェード、テーマ作り
CMYK とは？
CMYK は印刷で使われる4色インクのモデル：シアン、マゼンタ、イエロー、キー（黒）で、それぞれ 0–100% の割合で表す。インクは光を吸収するので発光する画面より扱える色域が狭く、画面で鮮やかな色は印刷するとくすんで見えることがある。
- 構文:
- cmyk(C%, M%, Y%, K%)
- 範囲:
- インクごとに 0–100%
- おすすめ用途:
- 印刷、パッケージ、入稿データ
HSL から CMYK への参照表
よく使われる CSS の色を HSL から CMYK に変換しました。
| 色 | HSL | CMYK |
|---|---|---|
| black | hsl(0, 0%, 0%) | cmyk(89%, 78%, 62%, 97%) |
| white | hsl(0, 0%, 100%) | cmyk(0%, 0%, 0%, 0%) |
| red | hsl(0, 100%, 50%) | cmyk(0%, 95%, 92%, 0%) |
| lime | hsl(120, 100%, 50%) | cmyk(64%, 0%, 100%, 0%) |
| blue | hsl(240, 100%, 50%) | cmyk(93%, 75%, 0%, 0%) |
| yellow | hsl(60, 100%, 50%) | cmyk(9%, 0%, 96%, 0%) |
| orange | hsl(39, 100%, 50%) | cmyk(0%, 42%, 94%, 0%) |
| teal | hsl(180, 100%, 25%) | cmyk(83%, 28%, 47%, 12%) |
| purple | hsl(300, 100%, 25%) | cmyk(63%, 100%, 5%, 2%) |
| gray | hsl(0, 0%, 50%) | cmyk(48%, 39%, 39%, 21%) |
よくある質問
HSLの三要素を0〜255のRGBチャネルに変換する。 それらをsRGB値として読み取り、色をCoated FOGRA39プロファイルで照合する。 マッチング方法に「相対的な色域を維持」を使い、「黒点の補正を使用」をオンにする。これにより白は紙の白のまま保たれ、黒は印刷機で印刷できる最も濃いインクに対応する。 4つのインク値を整数のパーセンテージに丸める。Photoshopのヨーロッパ向けCMYK既定値に従う。
二つの変換が続けて行われるため丸めは二度発生し、CMYKの段階では標準のCoated FOGRA39プロファイルを使う。他のCMYKプロファイル（印刷所のものなど）では数値が異なる。印刷結果はHSLのプレビューよりわずかに鮮やかさが落ちると考えておく。
CMYK は印刷で使われる4色インクのモデル：シアン、マゼンタ、イエロー、キー（黒）で、それぞれ 0–100% の割合で表す。インクは光を吸収するので発光する画面より扱える色域が狭く、画面で鮮やかな色は印刷するとくすんで見えることがある。
できるよ。入力欄のそばにある入れ替えボタンで CMYK → HSL のコンバーターに切り替えられる。同じ仕組みで動くし、どちらの方向も同じ数式を逆に適用するだけだよ。
中程度の明度で彩度が高い領域は画面と印刷で最もズレやすい。印刷に耐えさせたい色は変換前に彩度を少し落とすと安全。