色のフォーマットは同じ色を別の言語で表しているだけ：HEX はスタイルシート向け、RGB は画面やコード向け、HSL はパレット作り向け、CMYK は印刷向け。必要な変換を選べば、正確な値、ライブプレビュー、そして背後にある計算式まで取得できるよ。
4つのカラーフォーマット
HEX とは？
HEX コードは先頭の # の後に続く6桁の16進数で、色の赤・緑・青チャネルを格納する。各2桁が1チャネルを表し、00（なし）からFF（最大）までで、RGB と同じ約1670万色を短い表記で示せる。HEX は CSS、デザインツール、ブランドガイドラインでのデフォルトだ。
- 構文:
- #RRGGBB
- おすすめ用途:
- CSS、デザイン引き渡し、ブランドガイドライン
RGB とは？
RGB は赤・緑・青の3つの光のチャネルで色を表し、それぞれ 0〜255 の値を取る。画面の仕組みをそのまま反映しており、3つすべてが255で白、すべてが0で黒になる。色で計算する必要がある場合は RGB が適切で、rgba() を使えば透明度も追加できる。
- 構文:
- rgb(R, G, B)
- おすすめ用途:
- コード、canvas、rgba() を使った透明度
HSL とは？
HSL は色相（色相環の 0–360°）、彩度（どれだけ鮮やかか、0–100%）、明度（どれだけ明るいか、0–100%）に分ける。人が色を説明する方法に合っているため、HSL はティントやシェード、一貫したパレットを手作業やコードで作るのに最も扱いやすいフォーマットだ。
- 構文:
- hsl(H, S%, L%)
- おすすめ用途:
- パレット、ティントとシェード、テーマ作り
CMYK とは？
CMYK は印刷で使われる4色インクのモデル：シアン、マゼンタ、イエロー、キー（黒）で、それぞれ 0–100% の割合で表す。インクは光を吸収するので発光する画面より扱える色域が狭く、画面で鮮やかな色は印刷するとくすんで見えることがある。
- 構文:
- cmyk(C%, M%, Y%, K%)
- おすすめ用途:
- 印刷、パッケージ、入稿データ