要点：HEX・RGB・HSL はどれも同じ色を、ただ別の方法で表します。HEX と RGB は同じ赤・緑・青の値の二通りの記法で、HSL はそれを色相・彩度・明度として表し直すため、手で調整するのがずっと簡単です。どの形式を使うかを知れば、色を合わせたり微調整したりするときの推測を大きく減らせます。
Web の色は結局、赤・緑・青の三チャンネルですが、そのチャンネルの書き方によって、扱いやすさが変わります。
HEX と RGB：同じ色の二つの表記
RGB は三チャンネルを直接並べます：rgb(37, 99, 235)。HEX は同じ値を 16 進文字列に詰めます：#2563EB。25・63・EB が赤・緑・青のバイトです。両者は交換可能で、HEX は簡潔でデザインツールに多く、RGB は各チャンネルを計算できるためコードで便利です。どちらが「正確」ということはなく、同じ色の二つの表記です。
HSL：調整のための形式
HSL は色を色相（カラーホイール上の位置、0–360°）、彩度（鮮やかさ、0–100%）、明度（明るさ、0–100%）で表します。色を置き換えるのではなく調整したいときに使う形式です。ホバー状態のために明度を下げる、控えめな変種のために彩度を落とす、補色を探すために色相をずらす——同じ編集を HEX で行うのはバイト値を当てずっぽうにすることです。
アルファと 8 桁 HEX
透明度はアルファチャンネルで表します。rgba() と hsla() は 0（透明）から 1（不透明）までの 4 つ目の値を加えます。現代の CSS は 8 桁 HEX にも対応し、末尾 2 文字がアルファを符号化します——#2563EB80 は同じ青の約 50% 不透明度です。
CMYK は別世界
HEX・RGB・HSL はいずれも画面の色モデル（加法混色の光）です。CMYK は印刷用（減法混色のインク）。両者の変換は常に近似です。まったく同じ色域を再現できないため、画面から印刷への変換は校正すべき出発点として扱い、正確な一致とはみなさないでください。
実用的なワークフロー
- 元の色を——どの形式でも——カラーコンバーターに貼り付け、すべての形式を一度に確認する。
- HSL に切り替えて変種を作る：状態には明度、控えめな色調には彩度を調整。
- 透明が必要な箇所は
rgba()/hsla()か 8 桁 HEX でアルファを加える。 - グラデーションのプレビューで、2 色以上のコピー可能な CSS スニペットを生成する。
パレットを一括で扱うなら、複数の色を一度に変換し（カンマや改行で区切る）、結果を文字数カウンターでメモの横に置いておきましょう。
避けたいよくある間違い
- HSL なら調整が明快なのに HEX で色をいじる。
- CMYK 変換が画面と完全に一致すると期待する。
- アルファチャンネルを忘れ、透明にしたい所で不透明な色になる。
- スタイルシート全体で形式を不統一に混在させる。