色コードを整える。

入力した色の見本の並び

上で入力した色を、白・黒と組み合わせたときの読みやすさです。透明度は無視して不透明の色で計算します。

よく使う色（クリックで読み込み）

そもそもカラーコードとは

色を、誰が見ても同じになるように数字で伝える方法。

どこで・どんな場面で使うか

• Web サイトやブログの配色を決めるとき

  CSS には色コードで書きます。サイトのテーマカラーを決めて、全ページで同じ色を使うために必要です。

• スライドや資料の色をそろえるとき

  会社やサービスのブランドカラーをコードで受け取って、資料やバナーの色を合わせます。

• デザイナーとエンジニアの受け渡し

  デザイン画の色をコードで指定すれば、「だいたいこの色」の認識のずれを防げます。

• 文字が読みにくいと言われたとき

  背景と文字の色の組み合わせで、見え方は大きく変わります。数値で比べると、直す方向が決まります。

• 基本情報などの学習の身近な例

  16進数やビットの話は、色コードを題材にすると実感しやすくなります。ff が255だと分かるだけでも理解が進みます。

知らないと何が困るか

• 指定された色を再現できない。デザインで渡された #3366cc や RGB の値を、使う場所に合わせて書き換えられず作業が止まります。
• 見えにくい画面を作ってしまう。色の見た目だけで決めると、視力の弱い人や明るい屋外のスマホでは読めないことがあります。
• 画面と印刷で色が違って困る。画面は光の RGB、印刷はインクの CMYK で、そもそも色の作り方が違います。同じ数字では同じ色になりません。

上のツールで好きな色を選ぶか、コードを入れて、3つの書き方がどう変わるか見てみてください。

色コードのポイント・4つ

同じ色を、3つの言い方で書いているだけ。

1. 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. 2

   3桁HEX(#abc)と透明度(RGBA/HSLA)

   #abc は #aabbcc の省略形（各桁を2回）。末尾にもう1組足した #rrggbbaa は透明度つき。rgba()・hsla() の最後の数値（0〜1）も同じ透明度です。このツールの透明度スライダーと連動します。

3. 3

   コントラスト比は「読みやすさ」の数値

   文字色と背景色の明るさの比で、最小 1:1（同色＝読めない）〜最大 21:1（白×黒）。WCAG では本文は AA=4.5:1、より厳しい AAA=7:1、大きい文字（24px以上 or 18.66px太字以上）は 3:1 が目安。アクセシビリティの基準としてフォームや見出しの色決めに使えます。

4. 4

   明るさ・補色も自動で出します

   相対輝度（人の目が感じる明るさ）から、その色の上に黒文字と白文字どちらが読みやすいかを判定。補色（色相を180°回した反対色）はアクセントカラー選びの出発点になります。近似的な色名はあくまで目安です。

🔒 変換・判定はすべてあなたのブラウザの中（JavaScript）で完結します。入力した色はサーバに送られません（送信ゼロ）。