0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
設定
すべてのフォーマット間で色を変換できます。HEX、RGB、HSL、HWB、HSV、LAB、LCH、OKLab、OKLCh、XYZ D50/D65、Display P3、A98、ProPhoto、Rec. 2020、CMYK。インタラクティブなビジュアルセレクターを搭載しています。
#3b82f6
HEX, rgb(), hsl(), oklch(), color(), etc.
結果
基本
#RRGGBB
#RRGGBBAA
rgb(r g b)
CSS レベル 3
hsl(h s% l%)
CSS レベル 4
hwb(h w% b%)
lab(l a b)
lch(l c h)
oklab(l a b)
oklch(l c h)
color(xyz-d50 x y z)
color(xyz-d65 x y z)
color()
color(display-p3 r g b)
color(a98-rgb r g b)
color(prophoto-rgb r g b)
color(rec2020 r g b)
その他
hsv(h s% v%)
印刷
cmyk(c% m% y% k%)

仕組み

同じ色でも多くの書き方があります。HEX（#RRGGBB）と RGB は赤・緑・青の混合を表します。HSL と HSV は色相・彩度・明度で表し、バリエーションを選ぶのに直感的です。CMYK は印刷向けです。

このツールは HEX、RGB、HSL の色を受け取り、HWB、LAB、LCH、OKLab、OKLCh や color() 関数（Display P3、Rec. 2020、ProPhoto）など CSS レベル 4 の最新の色空間を含む、すべての形式に即座に変換します。

ビジュアルのピッカーと数値コントロールで色を調整でき、すべての値が同時に変わる様子を確認できます。計算はすべてブラウザー内で行われます。

例

#ff0000rgb(255 0 0) · hsl(0 100% 50%) · cmyk(0% 100% 100% 0%)純粋な赤：赤チャンネルが最大、緑と青はゼロ。
#3b82f6rgb(59 130 246)各 16 進 2 桁（3b、82、f6）は、あるチャンネルの 0〜255 の値です。59、130、246 です。
#ffffffrgb(255 255 255) · hsl(0 0% 100%)白は 3 チャンネルすべてが最大です。HSL では明度 100% です。

ユースケース

  • デザインガイドの HEX の色を、CSS やフレームワークが求める RGB や HSL の形式に変換する。
  • 印刷物を準備するために、画面上の色の CMYK 相当を取得する。
  • 広色域のパレットを調整する際に、最新の色空間（OKLCh、Display P3）を試す。

よくある質問

アルファチャンネルとは何で、HEX ではどう書きますか？

アルファは不透明度で、0（透明）から 100% までです。HEX では末尾に 2 桁を加えます：#RRGGBBAA。たとえば #ff000080 は不透明度 50% の赤です。

HSL と HSV の違いは何ですか？

どちらも色相と彩度を使いますが、3 つ目の軸が異なります。HSL は明度（100% が白）を使い、HSV は明度・値（100% が最も鮮やかな色）を使います。HSL は明るい色・暗い色を作るのに便利なことが多いです。

OKLab や OKLCh はなぜ存在するのですか？

これらは知覚的に均一な色空間です。値の間の等しい距離が、同程度の見た目の差に対応します。HSL よりも自然なグラデーションや明度調整が得られ、CSS はレベル 4 から対応しています。

表示される CMYK は印刷に正確ですか？

これは参考用のおおよその変換です。実際の印刷結果はカラープロファイル・インク・用紙によって変わるため、プロの作業では印刷所の ICC プロファイルを使うのが望ましいです。

関連項目