カラーコード変換

色を入力するか選ぶと、すべての表記をまとめて表示し、色見本とコントラスト比も確認できます。

入力はブラウザの外に出ませんCSS Color 4 WCAG 2.2基準日 2026.10.03

コントラスト

入力

このツールには JavaScript が必要です。JavaScript を有効にすると、ここですぐに使えます。下の使い方とよくある質問はそのままご覧いただけます。

カラーコード変換の使い方

1#2F5BEA、rgb(47 91 234)、rebeccapurple のような色を入力するか、カラーピッカーで選ぶか、「例を入れる」を押します。
2色見本と表記ごとの値を確認します。コントラストをオンにすると、WCAGのコントラスト比が表示されます。
3必要な行の「コピー」ボタンを押します。

カラーコード変換のオプション

入力: 表記は自動で判別します。3・4・6・8桁のHEX、rgb()、hsl()、hwb()、oklch()、oklab()、CSSの色名を読み取ります。HEXは先頭の # がなくても読み取ります。
コントラスト: 白、黒、入力した色とのコントラスト比と、WCAGのAA・AAAに適合するかどうか（本文・大きな文字）を表示します。既定でオンです。
カラーピッカー: ブラウザのカラーピッカーで選んだ色を、HEXで入力欄に入れます。

CSS Color 4 の表記

結果は CSS Color Module Level 4 の新しい書式で表示します。値は空白で区切り、アルファは rgb(47 91 234 / 0.5) のようにスラッシュの後ろに書きます。カンマを使う従来の表記 rgb(47, 91, 234) や rgba() も、入力としては読み取ります。

OKLCHは、Oklab色空間で明度・彩度・色相によって色を表します。明度を同じ幅で変えると見た目も同じ幅で変わるため、HSLよりカラーパレットを作りやすくなります。sRGBの画面では表せない色も書けるため、OKLCHの入力には「sRGBの範囲外」と表示されるものがあります。

コントラスト比

コントラスト比は WCAG 2.2 のコントラストの式に従います。明るい色の相対輝度に 0.05 を足した値を、暗い色の相対輝度に 0.05 を足した値で割ります。同じ色どうしは 1:1、白と黒は 21:1 です。適合するかどうかは丸める前の値で判定します。そのため、4.48:1 の色は 4.5:1 に近くても AA には適合しません。

カラーコード変換の例

HEX → RGB・HSL・OKLCH

入力

#2F5BEA

出力

rgb(47 91 234)
hsl(226 82% 55%)
oklch(53.3% 0.221 265.8)

アルファ付きのHEX
アルファのバイト 80 は 128/255 = 0.502 です。アルファは小数第2位までで表すため、0.5 になります。
入力
```
#2F5BEA80
```
出力
```
rgb(47 91 234 / 0.5)
```
CSSの色名
入力
```
rebeccapurple
```
出力
```
#663399
```
色ではない入力
G は16進数の数字ではありません。
入力
```
#GGG
```
出力
```
色として読み取れません
```

例は、このツールを検証している基準ケースの値です。

カラーコード変換のよくある質問

入力したデータはサーバーに送信されますか？

いいえ。入力と結果はこのブラウザ内だけで処理され、保存もしません。再読み込みすると消えます。

値はどのように丸めますか？

RGBは整数です。HSLとHWBは整数の角度と整数のパーセントです。OKLCHは明度を小数第1位、彩度を小数第3位、色相を小数第1位まで表します。アルファは小数第2位までです。このように丸めるため、変換した値をもう一度入力すると、元の値と1～2段階ずれることがあります。

sRGBで表せないOKLCHの色はどうなりますか？

「sRGBの範囲外」と表示します。明度と色相はそのままにして、sRGBに収まるまで彩度を下げ、最も近い色をすべての表記で表示します。

AAとAAAは何を意味しますか？

WCAG 2.2のコントラストの基準です。AAは本文で4.5:1以上、大きな文字で3:1以上が必要です。AAAはそれぞれ7:1と4.5:1です。大きな文字とは、24px以上、または太字で18.66px以上の文字です。

CMYKの値を印刷に使えますか？

いいえ。カラープロファイルを使わない単純な式で求めた値なので、実際の印刷結果とは一致しません。印刷用には、デザインソフトでICCプロファイルを使って変換してください。

処理方法・標準

処理する場所：このブラウザ（お使いの端末）。送信も保存もしません。
標準: CSS Color 4 · WCAG 2.2
エンジン: culori 4.0.2 (MIT) · ZEKILO Dev 表記・コントラスト計算 (自社実装)
HEXは小文字で表記します。
rgb()・hsl()・hwb() の範囲外の値は、ブラウザと同じように範囲内に切り詰めます。
半透明の色のコントラストは、その背景に重ねたときに見える色で測ります。
基準日 2026.10.03
変更履歴: 2026.10.03 公開

オープンソースライセンス →

結果がおかしい場合は、エラーを報告する（入力内容は添付されません）

入力