カラーコード変換HEX・RGB・HSLを相互変換（文字と背景のコントラスト比も分かる）

特長

• どの書き方で入れてもいい

  #3d7a55・#fff・rgb(61 122 85 / 50%)・hsl(144, 33%, 36%)・「61, 122, 85」のどれでも読みます。読めない時は推測で埋めず、そう伝えます。

• 読みやすさも一緒に分かる

  文字色と背景色のコントラスト比を出し、WCAG（Webの読みやすさの国際基準）の AA・AAA に届くかを判定します。

• 入力は送らない

  変換はブラウザの中だけです。作りかけのデザインの色を貼っても外へ出ません。

使い方

1. 色を入れる（どの書き方でも・色を選ぶ画面からでも）
2. HEX・RGB・HSL の欄から使う物をコピーする
3. 下の「読みやすさ」で、文字と背景の組み合わせを確かめる

よくある質問

HEX・RGB・HSL は何が違いますか？

どれも同じ色の書き方の違いです。HEX と RGB は赤・緑・青の光の量（0〜255）を、16進数か10進数で書いたもの。HSL は色相（色味の角度）・彩度（鮮やかさ）・明度（明るさ）で書くので、「同じ色味で少し明るく」のような調整がしやすい書き方です。

HSL から HEX に戻すと、元の値と1ずれることがあります

HSL を小数1桁に丸めて表示しているためです。HEX の方が細かいので、HEX を正として使ってください。このページは中では RGB で持っていて、HSL は表示のたびに作っています。

コントラスト比はいくつあればいいですか？

WCAG 2 の基準では、ふつうの本文は 4.5 以上（AA）、見出しなど大きい文字（太字で約19px以上・通常で約24px以上）は 3 以上です。より厳しい AAA は 7 以上・大きい文字で 4.5 以上です。判定は小数2桁で切り捨てて行い、4.499 を四捨五入して合格にはしません。

透明度（#ff000080 や rgba）はコントラストに入りますか？

入れていません。半透明の色の見え方は、下にある色しだいで変わるためです。透明度つきの色は、実際に重なったときの色（不透明の色）で確かめてください。

「red」のような色の名前は使えますか？

いまは使えません。名前の色は CSS で150近くあり、名前と値の対応を間違えて覚えている事も多いので、値（HEX など）で入れてください。