カラーフォーマットリファレンス

HEX、RGB、HSL、CMYK、OKLCHを含む11のカラーフォーマットの定義、値の範囲、使用法。

HEX

#で始まる6桁の16進数カラーコード。各桁のペアは赤、緑、青のチャンネルを16進数(00-FF)で表します。

When to use
ウェブデザインとCSSで最も一般的なフォーマット。HTML、CSS、デザインツール、バージョン管理で使用されます。
Value ranges
#000000(黒)から#FFFFFF(白)。3桁の短縮形(#RGB)と8桁のアルファ(#RRGGBBAA)をサポート。
CSS support
すべてのCSSバージョンでサポートされています。
Try in Color Converter →

RGB

赤、緑、青のチャンネルを使用して色を表現し、各チャンネルは0から255の範囲です。加法混色に基づいています — スクリーンが光を発する方法です。

When to use
デジタルディスプレイ、画像編集、プログラムによる色操作の標準。
Value ranges
R: 0-255、G: 0-255、B: 0-255
CSS support
すべてのCSSバージョンでrgb()およびrgba()としてサポートされています。
Try in Color Converter →

HSL

色相(カラーホイール上の角度)、彩度(強度)、明度(明るさ)で色を定義します。手動での色選択においてRGBよりも直感的です。

When to use
色のバリエーション生成に最適 — 明度でシェード/ティント、彩度で強度を調整します。
Value ranges
H: 0-360°、S: 0-100%、L: 0-100%
CSS support
CSS3以降でhsl()およびhsla()としてサポートされています。
Try in Color Converter →

CMYK

シアン、マゼンタ、イエロー、キー(黒)。インクが光を発するのではなく吸収する印刷制作で使用される減法混色モデル。

When to use
印刷デザインとプリプレスワークフローに必須。CSSでは直接サポートされていません。
Value ranges
C: 0-100%、M: 0-100%、Y: 0-100%、K: 0-100%
CSS support
CSSではサポートされていません。
Try in Color Converter →

HSB / HSV

色相、彩度、明るさ(HSV — 色相、彩度、値とも呼ばれます)。HSLに似ていますが、明度の代わりに明るさを使用し、多くのカラーピッカーの動作に一致します。

When to use
Adobe PhotoshopやFigmaなどのデザインツールのカラーピッカーで一般的。
Value ranges
H: 0-360°、S: 0-100%、B: 0-100%
CSS support
CSSでは直接サポートされていません。
Try in Color Converter →

CIELAB (LAB)

等しい数値変化がほぼ等しい知覚される色差に対応する知覚的に均一な色空間。明度(L)、緑-赤軸(a)、青-黄軸(b)で構成されます。

When to use
正確な色差計算(Delta-E)、色補正、デバイスに依存しない色表現に使用されます。
Value ranges
L: 0-100、a: -128~127、b: -128~127
CSS support
CSS Color Level 4でlab()としてサポートされています。
Try in Color Converter →

CIE XYZ

国際照明委員会によって定義されたデバイスに依存しない色空間。ほとんどの他の色空間の数学的基盤として機能します。

When to use
色空間変換の中間ステップとして、また測色計算に使用されます。
Value ranges
X: 0-95.047、Y: 0-100、Z: 0-108.883(D65光源)
CSS support
CSSでは直接サポートされていません。
Try in Color Converter →

LCH

CIELABの円筒形で、明度、彩度(色の強度)、色相(角度)を使用します。知覚的均一性を維持しながらLABのa/b軸よりも直感的です。

When to use
知覚的均一性を維持しながら彩度や色相を独立して調整する必要がある場合にLABよりも好まれます。
Value ranges
L: 0-100、C: 0-150+、H: 0-360°
CSS support
CSS Color Level 4でlch()としてサポートされています。
Try in Color Converter →

OKLCH

より良い色相均一性でLCHを改善する現代的な知覚色空間。CIELABベースの空間で発生する色相シフトを修正するためにBjörn Ottossonによって設計されました。

When to use
CSS Color Level 4の採用に推奨。広くサポートされている色空間の中で最も均一な明度、彩度、色相の操作を提供します。
Value ranges
L: 0-1、C: 0-0.4+、H: 0-360°
CSS support
CSS Color Level 4でoklch()としてサポートされています。ブラウザサポートが拡大中。
Try in Color Converter →

HWB

色相、白さ、黒さ。色相角でまず色を説明し、次にどれだけの白と黒が混合されているかを示します。人間にとって最も直感的なカラーモデルと考えられています。

When to use
技術に詳しくないユーザーにも理解しやすい。白さを追加するとパステルに、黒さを追加すると深いトーンになります。
Value ranges
H: 0-360°、W: 0-100%、B: 0-100%
CSS support
CSS Color Level 4でhwb()としてサポートされています。
Try in Color Converter →

CIELUV (LUV)

加法混色(光)に最適化された知覚的に均一な色空間。CIELABに似ていますが、照明を含むアプリケーションにより適しています。

When to use
照明デザイン、テレビの色科学、反射光ではなく発光を含むアプリケーションで使用されます。
Value ranges
L: 0-100、u: -134~224、v: -140~122
CSS support
CSSではサポートされていません。
Try in Color Converter →