HEX/RGB/HSL/Lab/OKLCHの使い分け——色空間の基礎

そもそも「色空間」とは

色空間（Color Space）は、色を数値で表現するルールのこと。「赤」を「255, 0, 0」と書くのか「FF0000」と書くのか、はたまた「色相0度、彩度100%、明度50%」と書くのか。同じ色でも、ルールが違えば数値が違います。

Webの世界では長らくsRGBという色空間が標準で、HEXもRGBもHSLも全部sRGBの中の表現方法です。最近はディスプレイの性能が上がって、もっと広い範囲の色を表現できるDisplay P3やOKLCHが使えるようになりました。

よく使う記法 8つを比較

どれを使うべきか：3つの目安

実務では以下の3パターンで考えると判断しやすいです。

• ・非エンジニアと共有するなら：HEX。Officeでもデザインソフトでも全部入る。本ツールが第一に表示するのもHEX。
• ・半透明を扱うなら：RGB（rgb()記法）。rgb(255 0 0 / 50%) のように透明度を1つの式で書ける。
• ・「同じ青の濃淡シリーズを作る」なら：HSL or OKLCH。色相を固定して明度だけ変えると、色の階調セットが瞬時に作れる。

HSL は古くから使えますが、明度を変えると色相が微妙にズレる弱点があります。OKLCH はその弱点を克服した最新規格で、明度を変えても「同じ青」の印象が保たれます。最新のデザインシステムでよく採用されています。

広色域（Display P3）と sRGB の関係

iPhone 13以降や M1以降のMacの画面は、sRGBより広い色を表示できるDisplay P3に対応しています。とくに鮮やかな赤・緑・水色は、sRGBでは表現しきれなかった色まで出せます。

ただし、Webの大半はまだsRGBが標準で、本ツールもCanvas APIの既定値であるsRGBで色を取得します。Display P3の写真をアップロードしても、表示時点でsRGBに変換した近似値が返ります。

CSS でDisplay P3を指定する場合は color(display-p3 1 0.3 0.2) のように `color()` 関数を使います。対応ブラウザだけ鮮やかになり、非対応ブラウザはsRGBにフォールバックします。

CMYK（印刷用）には変換しないで

本ツールはCMYK値を出力していません。理由は、HEX→CMYKの一意な変換は存在しないからです。CMYKは紙・インク・印刷条件（オフセット印刷／インクジェット／コート紙／上質紙）で色が大きく変わるため、印刷会社のICCプロファイルに合わせて個別に調整する必要があります。

名刺やパンフレットを印刷する場合は、印刷会社に「ブランドカラーのHEXとAdobeの色見本Pantone番号」を伝えると、向こうがCMYK値を調整してくれます。HEXから機械的にCMYKを計算するのは避けてください。

本ツールでの実用フロー

1. 本ツール（/img-color-pick/）で画像から HEX・RGB・HSL を取得。
2. カラーコード変換 で HEX→OKLCH／Lab に変換し、明度違いのバリエーションを作成。
3. Web用のCSS変数として登録（HEXまたはOKLCH）。
4. 印刷用は印刷会社に「HEX値」「Pantone番号があれば」「使用紙」を伝えて相談。
5. Display P3を使うかは、対応ブラウザのシェアと「鮮やかさで売る商材か」で判断。