色コード変換ツール｜HEX・RGB・HSLの相互変換とコントラスト比（無料）

デザインツールはHEX、CSSのアニメーションではHSLが扱いやすく、画像処理ライブラリはRGB。同じ色なのに、場面ごとに表記が違います。そのたびに変換サイトを探すのは手間です。

このツールは、どの形式で入れても3種類すべてに変換し、あわせて白文字・黒文字を載せたときのコントラスト比とWCAGの判定を表示します。明度を10%刻みで変えたバリエーションも自動生成するので、そのままカラーパレットの下地に使えます。

処理はすべてブラウザ内で完結し、入力した値は送信されません。

3つの形式の違いと使いどころ

HSLが扱いやすい理由

HSLは「色相（Hue）」「彩度（Saturation）」「明度（Lightness）」の3つで色を表します。色味を保ったまま明るさだけを変える、という操作が数値1つで済みます。

HEXやRGBで同じことをしようとすると、3つの数値を同時に調整する必要があります。ホバー時に少し暗くする、無効状態で彩度を落とす、といった配色の派生を作るときは、HSLで考えるほうが速く正確です。このツールの「明度のバリエーション」は、色相と彩度を固定して明度だけを振ったものです。

コントラスト比とアクセシビリティ

色を決めるとき、見た目の好みと同じくらい重要なのが「その上に載る文字が読めるか」です。

このツールは、選んだ色の上に白文字を置いた場合と黒文字を置いた場合の両方を計算し、読みやすいほうを示します。どちらもAA基準に届かない色は、文字の背景としては使いにくい色です。

コントラスト比は相対輝度という値から計算します。これは人間の目が緑に最も敏感で、青に鈍いという特性を反映した計算式です。そのため、明るさが同じに見える色でも、色相によってコントラスト比は変わります。

2色を指定して詳しく判定したい場合は色のコントラスト比チェッカーをご利用ください。代替色の提案まで行います。

配色を決めるときの考え方

色を増やすほど、まとまりを出すのが難しくなります。まずメインカラーを1色決め、その色相と彩度を保ったまま明度だけを変えた数段階で構成すると、統一感を保ちながら濃淡の差を作れます。このツールの明度バリエーションは、そのまま使えます。

色だけで情報を伝えない

色覚特性には個人差があり、赤と緑の区別がつきにくい人は一定の割合で存在します。「赤がエラー、緑が正常」という表現だけでは伝わらない場合があります。アイコン、文言、位置など、色以外の手がかりを併用してください。

このツールが読み取れる形式

透明度（アルファ値）は無視して計算します。コントラスト比は背景に何が透けるかで変わるため、透明度を含む色の判定はこのツールでは行えません。実際に重なる背景色との組み合わせで確認してください。

色を選ぶ欄（カラーピッカー）を使うと、直接色を拾って各形式に変換できます。ページ内の色を調べたい場合は、ブラウザの開発者ツールで値を取得してから貼り付けてください。

まとめ

HEX・RGB・HSLは同じ色の別表記です。明るさや彩度を調整したいときはHSLで考えると、数値1つで済みます。ホバー時の色や無効状態の色を作るときに効きます。

色を決めたら、その上に載る文字が読めるかを必ず確認してください。WCAGのAA基準は、通常の文字で4.5:1です。このツールは白文字と黒文字の両方を自動で計算し、読みやすいほうを示します。