ITを整える
中級色コードを整える。
＝ 色の番号（#3366ccなど）を変換して、読みやすさも確かめる
HEX・RGB・HSL を、入力するそばから相互変換。どの欄を編集しても他がそろって追従し、カラーピッカーと大きなプレビューにも連動します。文字色×背景色のコントラスト比（WCAGの読みやすさ基準）もその場で判定。3桁HEXや透明度にも対応。色はこの端末から一切出ません（送信ゼロ）。
TLDR — 30秒で分かる
色コードの相互変換と、文字の読みやすさ（コントラスト比）チェックを一画面で。送信ゼロ。
主な機能
- HEX ⇄ RGB ⇄ HSL の相互変換（どれを編集しても追従）
- カラーピッカー連動＋大きなプレビュー
- RGBA/HSLA（透明度）・3桁HEX対応
- WCAGコントラスト比とAA/AAA/大文字AAの合否判定
- 明度（相対輝度）・補色・近似的な色名
- よく使う色サンプル・送信ゼロ
明度（相対輝度）
0%
0=黒 〜 100=白
近似的な色
—
ざっくりした色味の目安
読みやすい文字色
—
この色を背景にしたとき
補色（反対の色）
あア亜 The quick brown fox 0123
小さめの文字でも読めますか？
大きな文字（18.66px太字 / 24px以上）
コントラスト比
21 : 1
- 通常 AA4.5:1
- 通常 AAA7:1
- 大きい文字 AA3:1
よく使う色（クリックで読み込み）
色コードのポイント・4つ
同じ色を、3つの言い方で書いているだけ。
- 1
HEX・RGB・HSL は同じ色の別表記
#ff0000・rgb(255,0,0)・hsl(0,100%,50%)はどれも同じ赤。HEX は16進2桁×3でRGBを表したもの、RGB は光の3原色の強さ、HSL は色相(H)・鮮やかさ(S)・明るさ(L)で表します。HSL は「もう少し明るく」「彩度を落とす」といった調整が直感的です。 - 2
3桁HEX(#abc)と透明度(RGBA/HSLA)
#abcは#aabbccの省略形（各桁を2回）。末尾にもう1組足した#rrggbbaaは透明度つき。rgba()・hsla()の最後の数値（0〜1）も同じ透明度です。このツールの透明度スライダーと連動します。 - 3
コントラスト比は「読みやすさ」の数値
文字色と背景色の明るさの比で、最小 1:1（同色＝読めない）〜最大 21:1（白×黒）。WCAG では本文は AA=4.5:1、より厳しい AAA=7:1、大きい文字（24px以上 or 18.66px太字以上）は 3:1 が目安。アクセシビリティの基準としてフォームや見出しの色決めに使えます。
- 4
明るさ・補色も自動で出します
相対輝度（人の目が感じる明るさ）から、その色の上に黒文字と白文字どちらが読みやすいかを判定。補色（色相を180°回した反対色）はアクセントカラー選びの出発点になります。近似的な色名はあくまで目安です。
🔒 変換・判定はすべてあなたのブラウザの中（JavaScript）で完結します。入力した色はサーバに送られません（送信ゼロ）。
SCENE 01
CSS・コーディング
デザインカンプの HEX を RGB/HSL に変換したり、透明度つきの色をその場で作る。
SCENE 02
読みやすさチェック
ボタンや本文の文字色×背景色が、AA/AAA を満たすかを公開前に確認。
SCENE 03
配色を考える
補色や明るさを手がかりに、アクセントカラーやテーマの色を決める。
よくある質問
Q. HEX・RGB・HSL は何が違うの？
A. どれも同じ色の別の表記です。HEXは16進2桁×3、RGBは光の3原色の強さ、HSLは色相・彩度・明度。HSLは「明るく」「くすませる」など調整が直感的です。
Q. 「#abc」のような3桁の色コードは使える？
A. 使えます。#abc は #aabbcc（各桁を2回）として自動展開します。透明度つきの4桁・8桁HEXにも対応します。
Q. 透明度（アルファ）はどう入力する？
A. 透明度スライダーで0〜100%を指定するか、rgba(...,0.5)・hsla(...,0.5)・8桁HEXで直接入力できます。各欄と連動します。
Q. コントラスト比とは？ 何点あればいい？
A. 文字色と背景色の明るさの比で1:1〜21:1です。WCAGでは本文AA=4.5:1、AAA=7:1、大きい文字は3:1が目安です。
Q. 「読みやすい文字色」はどう決めている？
A. 色の相対輝度（人の目が感じる明るさ）から、その色を背景にしたとき黒文字と白文字のどちらが読みやすいかを判定しています。
Q. 入力した色は外部に送られますか？
A. 送られません。変換・判定はすべてあなたのブラウザ内のJavaScriptで完結します（送信ゼロ）。
入力値はURLの「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
RELATED TOOLS
続けて整える
