カラー変換：HEX・RGB・HSL・HSV・HWB・CMYK・LAB・OKLCH

Q: LAB の値が Photoshop と違うのはなぜですか？

このツールは CSS Color 4 に従い、Bradford 順応による **D50** 白色点を使います。アプリによっては D65 基準の LAB を表示するため、数値が少し異なります。

色を HEX、RGB、HSL、HSV、HWB、CMYK、CIELAB、OKLCH 間で相互変換し、CSS 色名と白・黒に対する WCAG コントラスト比も確認できる無料ツールです。

色（任意の形式）

選択

HEX（#rgb、#rrggbb、#rrggbbaa）、rgb()/rgba()、hsl()/hsla()、hsv()、hwb()、cmyk()、lab()、oklch() と 148 種類の CSS カラー名に対応しています。

CSS 名: dodgerblue

HEX#1e90ff

RGBrgb(30, 144, 255)

HSLhsl(209.6, 100%, 55.9%)

HSV / HSBhsv(209.6, 88.2%, 100%)

HWBhwb(209.6 11.8% 0%)

CMYKcmyk(88.2%, 43.5%, 0%, 0%)

CIELABlab(58.36% 0.89 -64.78)

OKLCHoklch(65.2% 0.1901 253.21)

白背景でのコントラスト

3.23:1

AA 通常テキスト (4.5:1) ✗AA 大きいテキスト (3:1) ✓AAA 通常テキスト (7:1) ✗

黒背景でのコントラスト

6.48:1

AA 通常テキスト (4.5:1) ✓AA 大きいテキスト (3:1) ✓AAA 通常テキスト (7:1) ✗

CIELAB は CSS Color 4 と同じく D50 白色点を使います。値の丸めは表示時のみで、変換は完全な精度で行います。CMYK・HSV・コントラストではアルファを無視します。

カラー変換とは？

一般的な表記で色を貼り付けると、HEX、RGB(A)、HSL(A)、HSV、HWB、CMYK、CIELAB、OKLCH の 8 種類のカラーモデルで同時に表示します。完全に一致する CSS の色名がある場合はその名前と、白背景・黒背景に対する WCAG コントラスト比も表示します。

カラー変換の使い方

色（任意の形式） に #1e90ff、rgb(30 144 255)、hsl(210 100% 56%)、oklch(65% 0.19 253)、tomato などの色を入力・貼り付けるか、カラーピッカーで選びます。
結果の一覧で変換後の値を確認します。各行に個別の コピー ボタンがあります。
CSS 名 で完全一致する色名を、白背景でのコントラスト などのカードで WCAG AA・AAA の判定を確認します。
LAB や OKLCH の値が sRGB の範囲外の場合は、表示可能な最も近い色に丸めたという警告が表示されます。

例

入力

#ff0000

出力

rgb(255, 0, 0) · hsl(0, 100%, 50%) · hsv(0, 100%, 100%) · hwb(0 0% 0%) · cmyk(0%, 100%, 100%, 0%) · lab(54.29% 80.8 69.89) · oklch(62.8% 0.2577 29.23) · CSS name: red

白背景でのコントラストは 3.99:1 なので、純粋な赤は通常サイズの文字では WCAG AA を満たしません。

カラー変換を使うべき場面

デザインツールと CSS の間で色を受け渡すとき、パレット作成に OKLCH のような知覚均等モデルが必要なとき、文字のコントラストを手早く確認したいときに向いています。CMYK の出力は業務用印刷の色校正には使えません。実際の印刷には ICC プロファイルが必要で、この簡易式では考慮されないためです。

カラー変換の仕組み

入力はすべてガンマ補正済みの sRGB チャンネルとアルファ値に解析されます。HSL、HSV、HWB は sRGB の標準的な円筒座標変換、CMYK は K = 1 − max(R,G,B) という簡易的なデバイス非依存の式です。LAB では sRGB を線形化して CIE XYZ（D65）に変換し、Bradford 行列で D50 に色順応させてから CIELAB へ変換します。これは CSS Color 4 と同じ手順です。OKLCH は線形 sRGB に Björn Ottosson の OKLab 行列を適用します。丸めるのは表示時のみで、RGB は整数、HSL/HSV/HWB/CMYK は小数 1 桁、LAB は小数 2 桁です。コントラスト比は WCAG 2.x の相対輝度による (L1 + 0.05) / (L2 + 0.05) で計算します。