これらの色形式はそれぞれ何を意味しますか？

画面上の色は赤、緑、青の光を混ぜたもので、各形式はその混色をそれぞれ異なる方法で表します。CSSやデザインツールでは、HEXコードやRGB値が使われます。HSL、HSV、HWBは、色相（色相環上の角度）と、鮮やかさや明るさによって色を表すため、手作業で調整しやすい形式です。CMYKは、印刷に使うシアン、マゼンタ、イエロー、ブラックのインク量を表します。LAB、LCH、OKLab、OKLCHは、数値の変化が目に見える変化と等しくなるように設計されているため、カラーパレットやグラデーションの作成に役立ちます。最新のCSSでは、これら4つの形式すべてがサポートされています。ターミナルではANSIカラーコードが使われ、CSSにはtomatoのような色名もあります。

同じオレンジ色を各形式で表すと、次のようになります。

形式 例 値の意味
HEX #ff6600 赤、緑、青をそれぞれ2桁の16進数で表したもの
RGB rgb(255, 102, 0) 赤、緑、青をそれぞれ0～255で表したもの
HSL hsl(24, 100%, 50%) 色相、彩度、輝度
HSV hsv(24, 100%, 100%) 色相、彩度、明度。HSBとも呼ばれる
HWB hwb(24 0% 0%) 色相、白色度、黒色度
CMYK cmyk(0%, 60%, 100%, 0%) シアン、マゼンタ、イエロー、ブラックのインク量
LAB lab(62.31, 55, 71.33) CIEの輝度、緑から赤、青から黄を表す値
LCH lch(62.31, 90.07, 52.36) CIEの輝度、彩度、色相
OKLab oklab(69.58% 0.1482 0.1406) 輝度と2つの色軸を表す値。LABより新しいモデル
OKLCH oklch(69.58% 0.2043 43.49) OKLabにおける輝度、彩度、色相
XYZ xyz(46, 30.77, 3.52) LABの基礎となるCIE 1931色空間
HCG hcg(24, 100%, 0%) 色相、彩度、灰色度
色名 orangered 最も近いCSSの色名
ANSI 16 91 基本16色のうち1色を表すターミナルコード
ANSI 256 208 256色のうち1色を表すターミナルコード
AppleScript RGB {65535, 26214, 0} AppleScriptで使われる、0～65535の赤、緑、青の値
グレースケール gray(46.7%) 0%～100%の明るさ

ツールの説明

このツールは、これら17種類の形式間で色を変換し、変換結果の下に色見本を表示します。汎用の色変換ツールから、HEXからRGB、RGBからCMYK、HEXから色名といった特定の形式間のツールまで、どの色変換ツールも同じ仕組みです。ツール名にある形式が最初に選択されており、ソースとターゲットのメニューから別の形式に切り替えられます。色を貼り付けると、入力と同時に結果が表示され、すぐにコピーできます。色変換ツールの初期設定であるソースの「自動検出」を選ぶと、色の表記方法から形式が判別されます。入れ替えボタンを押すと、変換の向きが逆になります。

例

入力 ターゲット 結果
#ff6600 RGB rgb(255, 102, 0)
rgb(37, 99, 235) HEX #2563eb
#2563eb HSL hsl(221.2, 83.2%, 53.3%)
rgb(37, 99, 235) CMYK cmyk(84.3%, 57.9%, 0%, 7.8%)
#2563eb HSV hsv(221.2, 84.3%, 92.2%)
#2563eb OKLCH oklch(54.61% 0.2152 262.88)
rgb(37, 99, 235) LAB lab(46.06, 30.96, -73.83)
#ff6347 色名 tomato
rebeccapurple HEX #663399
rgba(37, 99, 235, 0.5) HEX #2563eb80

貼り付けできる値

  • 3桁、4桁、6桁、8桁のHEXコード。#は付けても付けなくてもかまいません。4桁目または最後の2桁は不透明度を表します。
  • rgb()、hsl()、oklch()などの関数。値の区切りにはコンマまたはスペースを使い、不透明度は4番目の値として、またはスラッシュの後に指定できます。例：rgba(37, 99, 235, 0.5)またはrgb(37 99 235 / 50%)。
  • rgb(100%, 40%, 0%)のような赤、緑、青のパーセンテージや、hsl(0.5turn, 100%, 50%)のようなdeg、rad、grad、turnで指定された色相。
  • 255, 102, 0のように、関数名のない数値。自動検出では、3つの数値はRGBとして判定されます。ただし、最後の2つがパーセンテージの場合はHSLとして判定されます。4つの数値は、RGBと不透明度の組み合わせに見える場合を除き、CMYKとして判定されます。
  • 大文字と小文字を問わない色名。スペースの有無も問いません。Rebecca Purpleも使用できます。
  • hsb()と表記されたHSB値や、{65535, 26214, 0}のような波かっこで囲まれたAppleScriptの色。

仕組み

色の変換には、JavaScriptライブラリのcolor-convertを使用しています。

  • 不透明度は、不透明度を表せるHEX、RGB、HSL、HWB、OKLab、OKLCHに引き継がれます。それ以外の形式では省略されます。
  • LAB、LCH、XYZは、D65白色点を使ったCIE値です。CSSのlab()とlch()はD50白色点を使うため、数値にわずかな差があります。
  • LAB、LCH、OKLab、OKLCHでは、画面に表示できない色も表現できます。そのような色をHEX、RGBなどの画面表示用の形式に変換すると、各チャンネルの値は0～255の範囲に収まるように切り詰められます。そのため、oklch(70% 0.3 145)は#00c800になります。
  • 色名の結果は、CSSの色名の中で最も近いものです。そのため、色名が定義されている色以外は正確に一致しません。たとえば、#ff6600の結果はorangeredですが、orangeredは#ff4500です。
  • ANSI 16とANSI 256の結果は近似値です。これらのパレットに含まれる色は、それぞれ16色と256色だけだからです。ANSI 16の結果は前景色コードの30～37および90～97です。背景色コードの40～47および100～107は、同じ色として判定されます。
  • CMYKはプリンターのカラープロファイルを使わず、基本的な計算式で算出されます。そのため、印刷所が同じ色に対して使用するCMYK値とは異なる場合があります。
  • グレースケールは、赤、緑、青の値の平均です。

ヒント

  • HEX、RGB、HSL、HWB、OKLab、OKLCH、色名の結果は有効なCSSなので、そのままスタイルシートに貼り付けられます。
  • 自動検出では、208のような3桁の数値は短いHEXコードとして判定されます。そのため、ターミナルコードを入力する場合は、ソースとしてANSI 256またはANSI 16を選択してください。
  • HSVとHSBは、同じモデルを指す2つの名称です。