カラーコード変換

Colour Format Converter

HEX・RGB・HSL・HWB・LAB・LCH・OKLCHのあいだで色を変換し、いちばん近い色名も示します。

CSSの色ならどんな書き方でも読み取ります。16進数、`rgb()`、`hsl()`、`lab()`、`oklch()`、色名までです。それをすべての表記法で一度に、明るい地と暗い地の両方に並べて見せます。色がsRGBの外にあるときは、そのことと、表示できるいちばん近い色も示します。

🔒 ブラウザの中だけで動きますcolorconvertoklchhex

CSS の色なら何でも

HEX として読みました · 最も近いキーワードは mediumslateblue（#7b68ee）、ΔEok 0.050

明るい背景で

この色で書いた文字

大きさを比べるための本文。

色で塗ったブロック。文字は背景色です。

暗い背景で

この色で書いた文字

大きさを比べるための本文。

色で塗ったブロック。文字は背景色です。

同じ色をすべての表記法で
HEX	`#5b6cff`どのデザインツールもコピーしてくれる値。
RGB	`rgb(91 108 255)`ディスプレイが受け取るままのチャンネル値。
HSL	`hsl(233.78 100% 67.84%)`sRGB を並べ替えただけのもの。ここでいう「明度」は知覚に沿った値ではありません。
HWB	`hwb(233.78 35.69% 0%)`同じ色相環を、色相と白と黒の量で言い換えたもの。
LAB	`lab(50.851% 29.157 -76.75)`CIE Lab*。CSS の定義どおり D50 基準です。
LCH	`lch(50.851% 82.102 290.8)`Lab* を極座標にしたもの。クロマは 150 あたりまで伸びます。
OKLAB	`oklab(60.153% 0.0114 -0.2164)`直交座標の OKLab。ここでのユークリッド距離が、そのまま知覚的な差です。
OKLCH	`oklch(60.153% 0.2167 273.01)`既定に選ぶ価値があるのはこれです。下の説明を見てください。

補間しても鮮やかさが残ります。 sRGB で 2 色を直線で結ぶと無彩色の軸の近くを通るので、青から黄へのグラデーションは真ん中で灰色になります。OKLCH では経路が色相環を回るため、中間点もクロマを保ちます。目に見える違いとしてはこれがいちばん大きく、CSS に in oklch が入った理由でもあります。
明度がちゃんと明度を意味します。 HSL で 50% の 2 色は、体感の明るさが 3 倍も違うことがあります。 hsl(60 100% 50%) は黄色で、 hsl(240 100% 50%) は濃紺です。OKLCH の L は知覚に合わせて調整されているので、その上に組んだ 50–950 のスケールは途中に崖ができず、均等に進みます。
距離がそのまま差です。 OKLab のユークリッド距離はそのまま使える ΔE です。上の「最も近い色名」がまともな答えを返すのはそのためで、RGB の距離で測ると濃い紫を darkslateblue と呼ぶことになります。

この色は L 60.2%、C 0.2167、H 273.0° です。L と H を止めて C だけ動かせば濃淡のランプになり、L と C を止めて H を動かせば調和のとれたパレットになります。HSL ではどちらもできません。

使い方

色を貼り付けます
どの表記法でも構いません。入力欄の下の行に何として読み取ったかが出て、いちばん近いCSSの色名と、そこまでの知覚的な距離も一緒に出ます。
2つの地を並べて見ます
載る面が決まらないかぎり、色は半分しか指定されていません。白地で自信ありげに見える中間の青が、暗い地では灯の消えたように見えます。どの表記法にもそれは現れません。
必要な表記法をコピーします
行ごとにコピーボタンがあり、その色空間が何のためのものかを1行で説明します。入力に対応する行は強調されます。