カラーコード変換

こんな場面で

• ツールをまたいで色を持ち運ぶ — デザインツールが RGB でしか出さない色を、CSS に貼れる #RRGGBB に直す。逆に、渡された HEX を RGB の数値で入れ直す。
• ボタンの押下色・ホバー色を作る — 基準の色を HSL に直し、明度だけを上下させて同系色の濃淡を作る。
• 拾った色の正体を確かめる — スクリーンショットから抽出した色をピッカーで合わせ、HEX と RGB の両方を控える。
• 灰色に近い色かを判断する — 彩度の数値を見れば、くすんだ色か鮮やかな色かが一目で分かります。

HEXの読み方

#RRGGBB は赤・緑・青の強さを16進2桁ずつ並べたものです。2桁の16進は 00〜FF、10進では0〜255にあたります。たとえば #2563EB は赤37・緑99・青235。青が突出しているので青系だと読めます。3桁の #25E は各桁を2回重ねる短縮形で、#2255EE と同じ色になります。#FF0000 のように1色だけ FF で他が 00 なら、その原色そのものです。

HSLの3つの値が意味するもの

• H（色相） — 0〜360度の色環上の位置。0（と360）が赤、120が緑、240が青です。数字を回すと色味だけが変わります。
• S（彩度） — 0〜100%。0%にすると色味が完全に抜けて灰色になります（例: hsl(221, 0%, 53%) は #878787）。
• L（明度） — 0〜100%。0%は黒、100%は白で、50%のときにその色相が最も鮮やかに出ます。

HEXやRGBは「赤・緑・青をどれだけ混ぜるか」の指定なので、明るさだけを変えたいときに3つの数字をどう動かせばよいか分かりません。HSLなら明度の1つだけを触ればよいので、同系色のバリエーションが作れます。

明度だけ変えて濃淡を作る手順

基準色を HEX 欄に入れると、HSL 欄にその色の値が出ます。#2563EB なら hsl(221, 83%, 53%) です。この HSL 欄の3つ目の数字だけを書き替えてください。

• 65% にすると #5C8BF0 — 明るい方のバリエーション（ホバー時など）。
• 45% にすると #1450D2 — 少し沈んだ色（押し込んだ状態など）。
• 35% にすると #0F3EA3 — さらに濃い色（文字色や枠線に）。

色相と彩度を固定したまま明度だけを動かしているので、色味がぶれずに濃淡だけがそろいます。

つまずきやすい点

• HEX→HSL→HEX で1ずれることがあります — HSLの値は整数に丸めて表示するため、丸めた値から戻すと元と少し違う色になります。実際 #2563EB は hsl(221, 83%, 53%) になり、そこから戻すと #2463EB です。元の色を残したいときは HEX か RGB のほうを控えてください。
• 不透明度は扱いません — rgba(37, 99, 235, 0.5) のように入れても、最初の3つの数字だけを読み取り、末尾の不透明度は無視されます。8桁の #RRGGBBAA は形式エラーになります。
• 色名では入力できません — red や skyblue といったCSSの色名は受け付けません。HEX・RGB・HSL のいずれかの数値で入れてください。

使い方・仕様

• HEXは #2563EB または #25e（3桁短縮）で入力できます。
• RGBは 37, 99, 235 または rgb(37,99,235) の形式。各値は0〜255。
• HSLは 221, 83%, 53% または hsl(221,83%,53%) の形式。色相は0〜360、彩度と明度は0〜100%。
• 変換はブラウザ内で行い、色の情報を送信することはありません。

よくある質問

関連ツール

16進と10進の関係そのものを確かめたいときは 進数変換、明度の比率など割合の計算は パーセント計算 へ。