カラーコンバーター

カラーコードについて

HEX は #1a73e8 のように、赤・緑・青を 16 進数 2 桁ずつ（00〜FF）並べた書き方です。RGB は同じ 3 つのチャンネルを 10 進数の 0〜255 で書き、rgb(26, 115, 232) になります。HSL は色相（0〜360°）・彩度・明度で色を表し、hsl(214, 82%, 51%) のように書きます。明度だけを動かせば同じ色味の濃淡を作れるので、配色の調整に向いています。

1 色を実際に変換する

#1a73e8 を例にします。16 進数 2 桁が 1 チャンネルで、1a = 26、73 = 115、e8 = 232 なので、RGB は rgb(26, 115, 232) です。

HSL を求めるには、各チャンネルを 0〜1 に換算し、最大値（0.910、青）と最小値（0.102、赤）を見つけます。

• 明度 = (最大 + 最小) / 2 = 0.506 → 51%
• 彩度 = (最大 − 最小) / (2 − 最大 − 最小) = 0.817 → 82%（明度が 50% を超える場合の式）
• 色相：青が最大なので、色相 = 60 × ((R − G) / (最大 − 最小) + 4) = 214.1 → 214

ツールの表示は hsl(214, 82%, 51%) です。式は CSS Color Module Level 4 と同じです。

デジタル庁デザインシステムの色で確かめる

デジタル庁デザインシステムのデザイントークン（npm パッケージ @digital-go-jp/design-tokens 2.0.1 の tokens.css）では、キーカラー --color-key-900 が --color-primitive-blue-900 の #0017c1 を参照しています。HEX 欄に入れると rgb(0, 23, 193) と hsl(233, 100%, 38%) になります。

表示された hsl(233, 100%, 38%) を HSL 欄に入れ直すと、HEX は #0017c2 です。青が 1 だけずれるのは HSL を整数に丸めているためで、CSS やデザインツールに書き写すときは HEX を使ってください。

エラー色 --color-semantic-error-1 は --color-primitive-red-800 の #ec0000 を参照しており、rgb(236, 0, 0)、hsl(0, 100%, 46%) になります。

半透明のグレー --color-neutral-opacity-gray-536 の値は rgba(0, 0, 0, 0.54) です。RGB 欄に貼ると透明度は無視され、結果は #000000 と hsl(0, 0%, 0%) になります。透明度を含むトークンは、変換したあとで alpha を付け直す必要があります。

入力欄が受け付ける形式

• HEX： 3 桁または 6 桁。# は省略でき、大文字と小文字は区別しません。3 桁か 6 桁そろった時点でほかの欄が更新されます。4 桁・5 桁を入力している途中はほかの欄に直前の色が残り、7 桁以上は無効です。
• RGB： rgb(r, g, b) のカンマ区切りで、各チャンネルは 0〜255 の整数です。rgba(...) も読めますが 4 番目の値は捨てます。百分率（rgb(10%, 45%, 91%)）、小数、空白区切りの書き方は受け付けません。
• RGB と HSL の後ろ： 3 つの数のあとに置けるのは透明度、閉じかっこ、空白だけです。末尾の ; と値を囲む引用符は、読む前に取り除きます。
• HSL： hsl(h, s%, l%) のカンマ区切り。小数を使え、% は省略できます。色相は 360 を超えると一周し、彩度と明度は 0〜100% の範囲に収めます（CSS Color 4 の 7 節と同じ扱い）。214deg のような角度の単位や負の色相は受け付けません。

たとえば hsl(480, 100%, 25%) は色相 120 と同じ緑で、HEX は #008000 になります。

CSS からコピーして末尾に ; が残った rgb(0, 23, 193); も読み取られ、#0017c1、hsl(233, 100%, 38%) になります。

値の後ろの ; に続けて次の宣言まで一緒に貼り付けた hsl(214, 82%, 51%); color: red のように、値の後ろに文字が残っていると、「色の形式が正しくありません。色の値の後ろにある余分な文字を消してください。」と表示されます。閉じかっこをまだ入力していない hsl(214, 82%, 51% は途中の値として変換されます。

全角で入力した場合

入力は NFKC 正規化で半角にしてから読みます（ほかの色ツールと同じ扱いです）。全角英数字の ＃１ａ７３ｅ８ は #1a73e8 と同じ色として扱われ、rgb(26, 115, 232) と hsl(214, 82%, 51%) が表示されます。入力欄から離れると、欄の文字も半角の #1a73e8 に置き換わるので、そのままコピーして CSS に貼れます。

全角カンマの rgb(26，115，232) も同じで、HEX は #1a73e8、HSL は hsl(214, 82%, 51%) です。

読点「、」は NFKC でも半角にならないので、rgb(26、115、232) は読めません。ステータス欄に「色の形式が正しくありません」と表示され、ほかの 2 つの欄は空になります。空にするのは、前の色が残ったまま「コピー」されるのを防ぐためです。

制限事項

• 透明度は扱えません。 8 桁の 16 進数（#1a73e880）は無効になり、rgba(26, 115, 232, 0.5) の透明度は無視されます。
• HSL は整数に丸められます。 hsl(214, 82%, 51%) を入力すると #1a73e8 ではなく #1c74e9 になります。丸めた値では元の色を正確に指せないためです。HEX の値を基準にしてください。
• 対応形式は 3 つだけです： HEX（3 桁または 6 桁。#abc は #aabbcc に展開）、RGB、HSL。HSB/HSV、HWB、OKLCH には対応していません。