印刷用パレットをウェブに持ってくるならHSLが扱いやすい：インクの混合を色相・彩度・輝度で表現すれば、ホバーやティント、シェードがすぐ作れる。
CMYK から HSL への変換のしくみ
- CMYKのパーセンテージを0〜255のRGBチャネルに変換する。
- チャネルを255で割り、それらの最大値と最小値を取る。
- 最大値と最小値の平均が輝度Lで、その差が彩度Sを決める。
- 最大値を持つチャネルがカラーホイール上の色相H（度）を決定する。
実際の例
CMYK cmyk(36%, 77%, 0%, 25%)=HSL hsl(272, 63%, 46%)
CMYK→RGBの時点で既に近似が入っており、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(0%, 0%, 0%, 100%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 100%, 100%, 0%) | hsl(0, 100%, 50%) |
| lime | cmyk(100%, 0%, 100%, 0%) | hsl(120, 100%, 50%) |
| blue | cmyk(100%, 100%, 0%, 0%) | hsl(240, 100%, 50%) |
| yellow | cmyk(0%, 0%, 100%, 0%) | hsl(60, 100%, 50%) |
| orange | cmyk(0%, 35%, 100%, 0%) | hsl(39, 100%, 50%) |
| teal | cmyk(100%, 0%, 0%, 50%) | hsl(180, 100%, 25%) |
| purple | cmyk(0%, 100%, 0%, 50%) | hsl(300, 100%, 25%) |
| gray | cmyk(0%, 0%, 0%, 50%) | hsl(0, 0%, 50%) |