色形式を相互変換する
CSSやデザインツールでは、HEX、RGB、HSLなど複数の表現形式が使われます。必要な形式へ変換しながら、同じ色を実装に使いやすくできます。
🎨 Color Converter
HEX / RGB / HSL / HSV を相互変換し、WCAG コントラスト比を即座に判定します。 計算はすべてブラウザ内で行われ、入力データはサーバーに送信されません。
vs White
2.54
FAIL
vs Black
8.28
AAA
すべての形式
HEX
#10B981
RGB
rgb(16, 185, 129)
RGB %
rgb(6.3%, 72.5%, 50.6%)
HSL
hsl(160, 84%, 39%)
HSV
hsv(160, 91%, 73%)
💡 色空間と WCAG について
- RGB: 赤・緑・青の加法混色（モニタ標準）
- HSL: 色相・彩度・明度。50% を中心に明暗対称
- HSV: 色相・彩度・明度（最大）。100% で「最も鮮やか」
- HEX: RGBの16進表記。Web で最も使われる形式
- WCAG コントラスト比: アクセシビリティ基準。
- AA（4.5以上）: 通常テキストの最低基準
- AAA（7.0以上）: 強化基準
- AA Large（3.0以上）: 18pt以上の大きな文字
使い方と解説
HEX・RGB・HSLを変換しコントラストを確認する
Color Converter は、HEX、RGB、HSL、HSVの相互変換と、WCAGコントラスト比の確認に使えるツールです。UIカラー、デザインシステム、アクセシビリティ確認に役立ちます。
入力データの扱い
入力した色値はブラウザ内で変換され、サーバーへ送信されません。
コントラストを確認する
文字色と背景色のコントラストが弱いと、読みづらいUIになります。WCAGの目安を確認しながら、アクセシビリティを意識した配色を検討できます。
合格と不合格の境界は驚くほど近い
WCAG AAでは本文に4.5:1以上のコントラスト比が求められますが、この基準がどれくらい微妙なラインかは実際に値を動かすと分かります。白背景に対してグレーの #767676 は 4.54:1 で基準を満たしますが、1段階明るくした #777777 は 4.48:1 となり基準を下回ります。見た目にはほとんど区別が付かない差で合否が変わるため、目視で「たぶん大丈夫」と判断するのは危険です。ちなみに黒と白の組み合わせが最大値の 21:1 です。コントラスト比は単純な明度差ではなく、各色を相対輝度に変換してから (明るい方+0.05)/(暗い方+0.05) で計算するため、直感とずれることがあります。特に彩度の高い色は数値が想像より低く出やすいので、ブランドカラーを文字色に使う前に確認しておくと安全です。
Color Converter でできること
- HEX、RGB、HSL、HSVを変換
- WCAGコントラスト比を確認
- UIカラーの検証に便利
関連ツール
次に使うツール
作業の流れに近いツールへすぐ移動できます。