色形式を相互変換する
CSSやデザインツールでは、HEX、RGB、HSLなど複数の表現形式が使われます。必要な形式へ変換しながら、同じ色を実装に使いやすくできます。
Browser-native / zero upload
Color Converter
HEX / RGB / HSL / HSV を相互変換し、WCAG コントラスト比を確認できます。
local pipelinesealed
mode
local
tracking
zero
🎨 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以上の大きな文字
Next workflow
次に使うツール
作業の流れに近いツールへすぐ移動できます。
Search guide
HEX・RGB・HSLを変換しコントラストを確認する
Color Converter は、HEX、RGB、HSL、HSVの相互変換と、WCAGコントラスト比の確認に使えるツールです。UIカラー、デザインシステム、アクセシビリティ確認に役立ちます。
Browser-native privacy
入力した色値はブラウザ内で変換され、サーバーへ送信されません。
コントラストを確認する
文字色と背景色のコントラストが弱いと、読みづらいUIになります。WCAGの目安を確認しながら、アクセシビリティを意識した配色を検討できます。
Color Converter でできること
- HEX、RGB、HSL、HSVを変換
- WCAGコントラスト比を確認
- UIカラーの検証に便利