カラーコード変換

HEX・rgb()・hsl()・hwb()・oklch()・oklab()・CMYK・CSSの色名を相互に変換します。どの欄に入力しても、ほかの欄がすべて書き換わります。

カラーピッカーで選ぶ

rgb()・hsl() をカンマ区切り（旧書式）で出す

OKLab / OKLCH は Björn Ottosson が公開した変換式（sRGB・D65）で計算しています。oklch() の L は％、C は 0〜0.4 程度、H は角度（度）です。
oklch()・oklab() は sRGB で表せない色も書けます。範囲外のときは明度と色相を保ったまま彩度（C）を下げて sRGB に収め、ほかの形式はその色で表示します。
CMYK は「C=1−R/255 …」で求める単純換算の目安です。実際の印刷はインク・用紙・ICCプロファイルで色が変わるので、入稿時は印刷会社の指定やデザインソフトの変換で確認してください。
コントラスト比は WCAG 2 の式（相対輝度）で、本文は 4.5:1（AA）、大きな文字は 3:1 以上が目安です。透明度（アルファ）は無視して計算します。
入力の解釈は CSS Color 4 の書き方にそろえています。計算はブラウザ内だけで行い、送信しません。

カラーコード変換でできること

HEX・rgb()・hsl()・hwb()・oklch()・oklab()・CMYK・CSSの色名を相互に変換します。CSSを書くときの書式の変換や、白・黒の文字とのコントラスト比の確認に使えます。

HEX・rgb()・hsl() など、どれか1つの欄に色を入力します。ほかの欄がすべてその色の値に書き換わります。「カラーピッカーで選ぶ」から色を選んでもかまいません。
rgb() 欄に「255 0 0」、CMYK欄に「0 100 100 0」のように、関数名を省いた数値だけでも入力できます。色名欄には red や rebeccapurple などのCSSの色名を入れます。
使いたい形式の「コピー」ボタンで値をコピーします。旧書式が必要なら「rgb()・hsl() をカンマ区切り（旧書式）で出す」にチェックを入れます。
左の見本とコントラスト比で、この色の上に白い文字と黒い文字のどちらが読みやすいかを確認します。一致する色名がない場合は、近いCSSの色名も表示されます。

OKLab / OKLCH は Björn Ottosson が公開した変換式（sRGB・D65）で計算しています。例：#ff0000 は oklch(62.8% 0.2577 29.23) です。
oklch()・oklab() で sRGB の範囲外の色を入れたときはお知らせを出し、明度と色相を保ったまま彩度を下げて sRGB に収めた色でほかの形式を表示します。rgb() の 255 超えなど範囲外の数値も、使える範囲に収めて計算します。
CMYK は C=1−R/255 などで求める単純換算の目安です。実際の印刷はインク・用紙・ICCプロファイルで変わるため、入稿時は印刷会社の指定やデザインソフトで確認してください。
コントラスト比は WCAG 2 の相対輝度の式で、本文は 4.5:1（AA）、大きな文字は 3:1 以上が目安です。透明度（アルファ）は無視して計算します。
計算はブラウザ内だけで行い、入力は送信しません。

HEXをoklch()に変換するには？

HEX欄に #ff0000 のようにカラーコードを入れると、oklch() 欄に oklch(62.8% 0.2577 29.23) のような値が出ます。「コピー」でそのままCSSに貼り付けられます。

8桁のHEX（#RRGGBBAA）にも対応していますか？

対応しています。3・4・6・8桁のHEXを読み込めます。透明度がある色は rgb(… / 0.5) のように、各形式に透明度つきで表示されます。

oklch() で入れた色が「sRGBの範囲外」と出ました。

その組み合わせの彩度（C）が、一般的なディスプレイの色域（sRGB）で表せる範囲を超えています。ツールは明度と色相を保って彩度を下げた色をHEXなどに表示するので、その値を使うか、C を小さくしてください。

RGBからCMYKに変換した値で印刷しても同じ色になりますか？

同じにはなりません。表示しているCMYKは単純な計算式による目安で、実際の印刷色はインクや用紙、カラープロファイルで変わります。印刷会社の指定に従って確認してください。