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

画面上の色は赤、緑、青の光を混ぜたもので、各形式はその混色を独自の方法で表します。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 XYZ色空間
HCG hcg(24, 100%, 0%) 色相、彩度、灰色度
色名 orangered 最も近いCSSの色名
ANSI 16 91 16色の基本色のいずれかを表すターミナルコード
ANSI 256 208 256色のいずれかを表すターミナルコード
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になり、これは#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つの名称です。