カラー変換ツール
一般的な表記のどれかで色を入力するか、ピッカーで選ぶと、その色がHEX、RGB、HSL、HWB、HSV、CMYK、OKLCHで表示されます。最も近いCSSの色名と、コピーできるCSSカスタムプロパティも得られます。変換はCSS Color Module Level 4の式に従い、すべてブラウザ内で行われます。無料で、登録は不要です。
例：#336699、rgb(51 102 153)、hsl(210 50% 40%)、hwb(210 20% 40%)、cmyk(67%, 33%, 0%, 40%)、rebeccapurple。透明度は#rrggbbaa、または「/ 50%」で追加できます。
変換された値
HEX
#336699
RGB
rgb(51 102 153)
HSL
hsl(210 50% 40%)
HWB
hwb(210 20% 40%)
HSV
hsv(210, 66.7%, 60%)
CMYK（簡易）
cmyk(66.7%, 33.3%, 0%, 40%)
OKLCH
oklch(49.93% 0.0987 250.43)
CSS色名
steelblue（最も近い色）
CSSカスタムプロパティ
:root {
--color-hex: #336699;
--color-rgb: rgb(51 102 153);
--color-hsl: hsl(210 50% 40%);
--color-oklch: oklch(49.93% 0.0987 250.43);
}ここのCMYKは、RGBからの単純な機器変換です。インク、紙、ICCプロファイルは関係しないため、印刷された色とは一致しません。作品を入稿する前に、印刷所にプロファイルを尋ねてください。
HSVとCMYKはCSSの色関数ではありません。デザインや印刷のツールで使うために表示しています。
カラー変換ツールの使い方
- 1. 色を入力します。 入力欄が受け付けるどの表記でも、貼り付けるか入力してください。例：
#336699、rgb(51 102 153)、hsl(210 50% 40%)、hwb(210 20% 40%)、cmyk(67%, 33%, 0%, 40%)、またはCSSの色名（例：rebeccapurple）。単独の51 102 153はRGBとして読み取ります。 - 2. またはピッカーを使います。 ピッカーで色を設定すると、すでに入力した透明度は保たれます。
- 3. 必要なものをコピーします。 各表記に専用のコピーボタンがあります。CSSをコピー では、HEX、RGB、HSL、OKLCHの値をスタイルシート用のカスタムプロパティとして取得できます。
- 4. 色名を確認します。 色がCSSのキーワードに正確に一致する場合（
rebeccapurpleは#663399）はそれを表示し、一致しない場合は最も近いキーワードを表示します。
変換のしくみ
すべての変換はsRGBを経由して行われます。sRGBは、ブラウザが描画する色空間です。HEXコードは、16進数で表したRGBにすぎません。#336699は、赤0x33＝51、緑0x66＝102、青0x99＝153です。他の表記は、同じ3つの数値を並べ替えたものです。
- HSL は、色を色相（色相環上の角度、0〜360°）、彩度、明度で表します。最大のチャンネルを max、最小を min（それぞれ255で割る）とすると、明度は (max + min) ÷ 2、彩度は (max − min) ÷ (1 − |2L − 1|) です。色相は、どのチャンネルが最大かで決まります。
- HSV（HSBとも呼ばれます）は、同じ色相を保ちますが、明度を max、彩度を (max − min) ÷ max で表します。多くのカラーピッカーが描くモデルです。
- HWB は、純色の色相に、白の量（min）と黒の量（1 − max）を加えたものです。色合いや暗い色を考えるとき、HSLより扱いやすい表記です。白と黒の合計が100%に達すると、結果は灰色になります。
- CMYK は単純な機器変換として表示されます。K = 1 − max とし、C、M、Yはそれぞれ (1 − チャンネル − K) ÷ (1 − K) です。インク、紙、プロファイルは関係しません。
- OKLCH は、Björn OttossonのOKLab空間での明度、彩度、色相です。CSS Color 4では
oklch()として使えます。Lの等間隔の変化は、RGBやHSLの等間隔の変化よりも、明るさの等間隔の変化に近く見えます。
一つの色、すべての表記
HEX：#336699
RGB：rgb(51 102 153)
HSL：hsl(210 50% 40%)
HWB：hwb(210 20% 40%)
HSV：hsv(210, 66.7%, 60%)
CMYK：cmyk(66.7%, 33.3%, 0%, 40%)
OKLCH：oklch(49.93% 0.0987 250.43)
CMYKが印刷色ではない理由
画面は赤、緑、青の光を加えて色を作りますが、印刷機は紙にシアン、マゼンタ、イエロー、ブラックのインクを重ねます。2つの色域は異なり、紙面上のインクの色は、紙、印刷機、それを記述するICCプロファイルによって決まります。RGBだけから求める式はこれらを知ることができないので、上のCMYKは予測ではなく表記です。例えば、純粋な画面の青#0000ffは、シアン100%とマゼンタ100%になり、くすんだ紫に印刷されます。ポスターや印刷する図では、RGBのデータを印刷所に渡し、そのプロファイルを尋ねるか、デザインアプリケーションでそのプロファイルを使って変換してください。
丸め、クランプ、透明度
- 丸め。 HEXと
rgb()は0から255の整数を扱うため、hsl(210 50% 41%)のように入力された色は、最も近い8ビットの値に丸められます。その値を変換し直すと、HSLはわずかに異なります。8ビットの格子はHSLより粗いためです。 - 範囲外のチャンネル。 範囲外の値はブラウザと同様にクランプされます。
rgb(300 0 0)は#ff0000になり、負のチャンネルは0になります。 - 色相の単位。
deg、grad、rad、turnを受け付け、色相は循環します。−150°は210°と同じです。 - アルファ。
#rrggbbaa、#rgba、/ 50%がすべて使えます。アルファは8桁のHEXで8ビットに保存されるため、50%は80になり、50.2%と読み戻されます。
よくある質問
- HEXをRGBに変換するには？
- 6桁を3組に分け、それぞれを16進数として読みます。
#336699は33、66、99で、それぞれ51、102、153です。HEXコードを入力欄に貼り付けると、RGBの値がすぐに表示され、HSL、HWB、HSV、CMYK、OKLCHも表示されます。 - HSLとHSVの違いは何ですか？
- どちらも同じ色相の角度を使います。HSLは彩度に関係なく白を最大の明度に置くため、その中間が純色になります。HSVは純色を最大の明度と彩度に置き、白は彩度ゼロになります。HSLはCSSの
hsl()としてサポートされ、HSV（またはHSB）は多くのカラーピッカーが表示する表記です。 - CMYKの値は印刷に正確ですか？
- いいえ。インク、紙、ICCプロファイルを考慮しない単純なRGBからの変換なので、印刷機が何を印刷するかを予測するのではなく、同じ数値を別の形で表したものです。明るい画面の青や緑など、印刷機の色域の外にある色は、くすんで印刷されます。重要なものには、印刷所のプロファイルを使ってください。
- 最も近いCSS色名とはどういう意味ですか？
- CSSには148の色キーワードが定義されています。色がそのいずれかに正確に一致する場合は、限定なしでそれを表示します。一致しない場合は、OKLabで最も近いキーワードを表示します。OKLabは、距離が知覚される違いに一致するように作られた空間です。コメントで色に名前を付けるのに役立ちますが、色のコードの代わりにはなりません。
- 往復変換後にHSLの値がわずかに変わるのはなぜですか？
- HEXとRGBは各チャンネルを256段階のいずれかで保存しますが、HSLはその格子と一対一に対応しません。HSLで入力された色は最も近いRGBの値に丸められ、表示されるHSLは丸めた値から計算されます。HEXコードから始めれば、すべての変換は表示された精度まで正確です。
- 入力した色のデータはどこかに送信されますか？
- いいえ。変換はブラウザ内の単純な計算であり、入力したものはアップロードも保存もされません。