HSLでデザインしたパレットを紙に出すことはよくある。ここでは選んだ色相・彩度・輝度から印刷所が使う4色のインク割合を返す。
HSL から CMYK への変換のしくみ
- HSLの三要素を0〜255のRGBチャネルに変換する。
- それらのチャネルを255で割って正規化する。
- キー成分 K = 1 − max(R, G, B) を計算する。
- 残りのチャネルからC、M、Yを導き出し、4つすべてをパーセンテージに変換する。
実際の例
HSL hsl(197, 100%, 45%)=CMYK cmyk(100%, 29%, 0%, 10%)
二段階の変換が連続して起きるため丸め誤差が二度発生し、色彩プロファイルなしでは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(0%, 0%, 0%, 100%) |
| white | hsl(0, 0%, 100%) | cmyk(0%, 0%, 0%, 0%) |
| red | hsl(0, 100%, 50%) | cmyk(0%, 100%, 100%, 0%) |
| lime | hsl(120, 100%, 50%) | cmyk(100%, 0%, 100%, 0%) |
| blue | hsl(240, 100%, 50%) | cmyk(100%, 100%, 0%, 0%) |
| yellow | hsl(60, 100%, 50%) | cmyk(0%, 0%, 100%, 0%) |
| orange | hsl(39, 100%, 50%) | cmyk(0%, 35%, 100%, 0%) |
| teal | hsl(180, 100%, 25%) | cmyk(100%, 1%, 0%, 50%) |
| purple | hsl(300, 100%, 25%) | cmyk(0%, 100%, 1%, 50%) |
| gray | hsl(0, 0%, 50%) | cmyk(0%, 0%, 0%, 50%) |