印刷用パレットをウェブに持ってくるならHSLが扱いやすい：インクの混合を色相・彩度・輝度で表現すれば、ホバーやティント、シェードがすぐ作れる。
CMYK から HSL への変換のしくみ
- CMYKのパーセンテージを、Coated FOGRA39プロファイルで0〜255のsRGBチャネルに変換する。
- チャネルを255で割り、それらの最大値と最小値を取る。
- 最大値と最小値の平均が輝度Lで、その差が彩度Sを決める。
- 最大値を持つチャネルがカラーホイール上の色相H（度）を決定する。
実際の例
CMYK cmyk(66%, 82%, 0%, 0%)=HSL hsl(276, 37%, 43%)
CMYKからRGBへの段階では標準のCoated FOGRA39プロファイルを使うため、他のCMYKプロファイル（印刷所のものなど）では数値が異なる。HSLの値は整数に丸められる。
CMYK と HSL の解説
CMYK とは？
CMYK は印刷で使われる4色インクのモデル：シアン、マゼンタ、イエロー、キー（黒）で、それぞれ 0–100% の割合で表す。インクは光を吸収するので発光する画面より扱える色域が狭く、画面で鮮やかな色は印刷するとくすんで見えることがある。
- 構文:
- cmyk(C%, M%, Y%, K%)
- 範囲:
- インクごとに 0–100%
- おすすめ用途:
- 印刷、パッケージ、入稿データ
HSL とは？
HSL は色相（色相環の 0–360°）、彩度（どれだけ鮮やかか、0–100%）、明度（どれだけ明るいか、0–100%）に分ける。人が色を説明する方法に合っているため、HSL はティントやシェード、一貫したパレットを手作業やコードで作るのに最も扱いやすいフォーマットだ。
- 構文:
- hsl(H, S%, L%)
- 範囲:
- 0–360°, 0–100%, 0–100%
- おすすめ用途:
- パレット、ティントとシェード、テーマ作り
CMYK から HSL への参照表
よく使われる CSS の色を CMYK から HSL に変換しました。
| 色 | CMYK | HSL |
|---|---|---|
| black | cmyk(89%, 78%, 62%, 97%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 95%, 92%, 0%) | hsl(1, 79%, 51%) |
| lime | cmyk(64%, 0%, 100%, 0%) | hsl(93, 60%, 44%) |
| blue | cmyk(93%, 75%, 0%, 0%) | hsl(224, 56%, 39%) |
| yellow | cmyk(9%, 0%, 96%, 0%) | hsl(57, 100%, 48%) |
| orange | cmyk(0%, 43%, 94%, 0%) | hsl(37, 93%, 53%) |
| teal | cmyk(83%, 27%, 48%, 12%) | hsl(180, 87%, 27%) |
| purple | cmyk(63%, 100%, 4%, 1%) | hsl(299, 58%, 31%) |
| gray | cmyk(48%, 39%, 39%, 21%) | hsl(30, 1%, 50%) |
よくある質問
CMYKのパーセンテージを、Coated FOGRA39プロファイルで0〜255のsRGBチャネルに変換する。 チャネルを255で割り、それらの最大値と最小値を取る。 最大値と最小値の平均が輝度Lで、その差が彩度Sを決める。 最大値を持つチャネルがカラーホイール上の色相H（度）を決定する。
CMYKからRGBへの段階では標準のCoated FOGRA39プロファイルを使うため、他のCMYKプロファイル（印刷所のものなど）では数値が異なる。HSLの値は整数に丸められる。
HSL は色相（色相環の 0–360°）、彩度（どれだけ鮮やかか、0–100%）、明度（どれだけ明るいか、0–100%）に分ける。人が色を説明する方法に合っているため、HSL はティントやシェード、一貫したパレットを手作業やコードで作るのに最も扱いやすいフォーマットだ。
できるよ。入力欄のそばにある入れ替えボタンで HSL → CMYK のコンバーターに切り替えられる。同じ仕組みで動くし、どちらの方向も同じ数式を逆に適用するだけだよ。
HSLに移したら色相は印刷由来のままにして、ウェブ版では輝度だけ調整するといい。そうすればブランドカラーの認識性を保ちつつスクリーンのコントラスト要件にも対応できる。