カラーコード変換（HEX⇄RGB⇄HSL・コントラスト比）

HEX(3/6/8桁)・rgb()/rgba()・hsl()/hsla()・CSS色名147色のどれか1つを入力すると他形式へ即座に変換。背景色との組み合わせでWCAGコントラスト比とAA/AAA判定、補色・明暗バリエーションも同時に表示します。

使い方

色の欄に HEX（#3b82f6 や3桁の #39f）・rgb()/rgba()・hsl()/hsla()・CSS色名（royalblue など）のいずれかを入力する。
入力に応じて他の3形式・明度・一致するCSS色名を自動表示する。
「背景色」欄に組み合わせたい背景色を入れると、コントラスト比とWCAGのAA/AAA判定が更新される。「入れ替え」で前景色と背景色を反転できる。
補色（色相を180°回転した色）と、暗く〜明るくの9段階バリエーションを確認できる。

仕組み・根拠

RGB↔HSLの相互変換は CSS Color Module Level 3 で定義された式に基づく。HSLは色相(Hue)・彩度(Saturation)・明度(Lightness)で色を表す方式で、RGBでは分かりにくい「同じ色相のまま明るさだけ変える」操作がしやすい。明暗バリエーションはHSLのLを黒(0%)または白(100%)側へ按分して再度RGBに戻すことで作成しており、色相・彩度は保ったまま明るさだけを変化させている。

コントラスト比は WCAG 2.x（Web Content Accessibility Guidelines）の相対輝度の定義式で計算している。sRGBの各チャンネルを0〜1に正規化し、0.03928以下は線形、それを超える範囲はガンマ2.4のべき乗で補正した値に係数(0.2126, 0.7152, 0.0722)を掛けて合算したものが相対輝度で、明るい色の輝度と暗い色の輝度から (L1+0.05)/(L2+0.05) を計算するとコントラスト比になる。判定基準はWCAG 2.xの達成基準1.4.3（AA）・1.4.6（AAA）に沿い、通常文字はAA 4.5:1・AAA 7:1、大きな文字（目安18pt以上、太字なら14pt以上）はAA 3:1・AAA 4.5:1としている。

CSS色名は147色を内蔵し、入力または変換結果のHEXが完全一致した場合のみ名前を表示する。grayとgreyのように同じ色を指す別表記が複数ある場合は先に登録した1つだけを代表として表示する。

現場の落とし穴:コントラスト比は「文字色と背景色」の組み合わせでしか意味を持たない。ボタンの背景とアイコン色、グラデーション背景の上のテキストなど、実際に重なる2色で確認しないと、単体では基準を満たしていても実装後に読みにくくなることがある。特にブランドカラーをそのまま本文の文字色に使うと、明度が中間的な色ではAA基準の4.5:1を下回りやすい。

よくある質問

Q. rgb()にパーセント表記（例: rgb(23%, 51%, 96%)）は使えますか？

A. 使える。%付きの値は0〜100%を0〜255に換算して解釈する。

Q. hsl()の色相に360を超える値や負の値を入れるとどうなりますか？

A. 360で割った余りを取ってから0〜360の範囲に正規化するため、hsl(-30, ...)はhsl(330, ...)と同じ結果になる。

Q. 大きな文字と通常の文字でAA基準が違うのはなぜですか？

A. 文字が大きい（太字なら約14pt、それ以外は約18pt以上が目安）ほど多少コントラストが低くても判読しやすいため、WCAGでは大きな文字の基準を3:1、AAAでも4.5:1と通常文字より緩く定めている。

Q. アルファ値（透明度）は計算に反映されますか？

A. HEX/RGB/HSLの表示にはアルファを反映するが、コントラスト比の計算は背景と合成する前の単純な2色比較のため、半透明の前景色を実際に使う場合は目視でも確認してほしい。