カラーコード変換：HEX・RGB・HSL・CMYK・OKLCH

各表記と使いどころ

HEX

#rrggbb、アルファ付きなら #rrggbbaa。短縮形の #rgb は各桁を 2 回繰り返したものです。デザインツールと CSS の標準的な表記です。

RGB

赤、緑、青を 0 〜 255 で表します。最近の CSS では rgb(42 157 143 / 50%) と書き、従来の rgba(42, 157, 143, 0.5) も引き続きどこでも使えます。

HSL

色相を度数、彩度と明度をパーセントで表します。手で調整しやすい反面、明度 50% でも色相によって明るさが同じに見えるわけではなく、黄色は青よりずっと明るく見えます。

HSV / HSB

色相、彩度、明度（Value または Brightness）です。Photoshop、Figma など多くのデザインアプリのカラーピッカーの基になっているモデルですが、CSS では使えません。

HWB

色相に、白と黒をどれだけ混ぜるかを加えたものです。Color Level 4 から CSS で使え、パステル調や落ち着いたバリエーションを作るのに直感的です。

CMYK

印刷用のシアン、マゼンタ、イエロー、キー（黒）のインクの割合です。ここでの値は標準的なデバイス変換式によるもので、実際の印刷色は用紙とプリンターのカラープロファイルによって変わります。

OKLCH

知覚的に均一な色空間での明度、彩度（クロマ）、色相です。同じ明度ならどの色相でも同じ明るさに見えるため、カラースケールやアクセシブルなパレットを作るのに最適です。現在のすべてのブラウザが対応しています。

CSS の色名

tomato、rebeccapurple、slategray など 148 のキーワードです。変換ツールは最も近い色名を表示し、完全に一致する場合はそれを示します。

HEX を RGB に手計算で変換する

HEX カラーは 16 進数 2 桁の組が 3 つ並んだものです。#2a9d8f を 2a、9d、8f に分け、それぞれを変換します。2a は 2 × 16 + 10 = 42、9d は 9 × 16 + 13 = 157、8f は 8 × 16 + 15 = 143 なので、色は rgb(42, 157, 143) です。逆方向は各チャンネルを 16 で割り、商が 1 桁目、余りが 2 桁目になります。8 桁の HEX はアルファ用に 4 つ目の組を加えたもので、ff が完全な不透明、80 が約 50% です。

HEX、RGB、HSL、HSV、HWB の間の変換は、丸めを除けば正確です。CMYK は本質的に近似値であり、画面で表示できる sRGB の範囲から外れる OKLCH の色は、指定された明度と色相を保ったまま彩度を下げて範囲内に収めます。

CSS ではどの表記を使うべきか

現在のブラウザはすべて HEX、rgb()、hsl()、hwb()、oklch() を理解するので、選ぶ基準は読みやすさと保守のしやすさです。HEX は簡潔で、デザイナーから渡されるのもこの形式なので、単発の値には無難な選択です。HSL は、少し明るいホバー時の色のように、手で色を微調整したいときに便利です。

デザインシステムでは、OKLCH がより良い選択になりつつあります。明度が知覚に基づいているため、同じ L 値を持つブランドカラーは実際に同じ明るさに見え、数値を 1 つ変えるだけでスケール全体を導き出せます。また、HEX や rgb() では表せない、広色域の P3 ディスプレイのより鮮やかな色も表現できます。なお、HSV、HSB、CMYK は CSS では使えず、デザインツールや印刷ツールの間で値を受け渡すために用意しています。

ティント、シェード、トーン、配色

ティントは色に白を、シェードは黒を、トーンは灰色を混ぜたものです。3 つの列は元の色から 10% ずつ変化するので、明らかに統一感のあるホバー時の色、枠線、背景が得られます。

配色は色相環上で色相を回転させたものです。補色は反対側の色相、類似色は両隣 30° の色相、トライアドは 120° 間隔の 3 色、スプリット・コンプリメンタリーは補色の両隣の 2 色、テトラードは 90° 間隔の 4 色です。これらはアクセントを決める出発点であってルールではありません。文字色は必ずコントラストチェッカーで確認してください。写真からパレットを作りたい場合はカラーパレットジェネレーターを使ってください。