カラーコンバーター
HEX・RGB・HSL のリアルタイム相互変換、Tailwind CSS パレット、WCAG コントラスト比チェッカー
HEX
RGB
R
G
B
rgb(125, 160, 211)
HSL
H
S
L
hsl(213, 44%, 66%)
Tailwind CSS カラーパレット v3
クリックするとカラーコンバーターに反映されます。
コントラスト比チェッカー WCAG 2.1
テキストと背景色の組み合わせがアクセシビリティ基準を満たすか確認します。
あAa 1
サンプルテキスト Sample Text 0123456789
コントラスト比 21.00 : 1
| 基準 | 対象 | 必要比 | 判定 |
|---|
このツールでできること
HEX・RGB・HSLカラーコードをリアルタイムに相互変換するツールです。カラーピッカー・Tailwind CSSパレット・WCAGコントラスト比チェッカーも内蔵。デザインとコーディングの橋渡しとして、色指定の変換と検証を効率化します。
使い方
- HEX・RGB・HSLいずれかの形式で色を入力します
- またはカラーピッカーから色を選択します
- 他の形式に即座に変換された値が表示されます
- 「WCAG」タブでテキストと背景のコントラスト比を確認します
- 値をクリックしてクリップボードにコピーします
こんな時に便利
- デザインカンプのHEXカラーコードをCSSのHSLに変換するとき
- テキストと背景色のコントラスト比がWCAGガイドラインを満たすか確認するとき
- Tailwind CSSの最も近い色クラス名を調べるとき
よくある質問
Q. WCAG AA・AAAとは何ですか？
Webアクセシビリティの国際基準です。AA（コントラスト比4.5:1以上）が一般的な最低基準、AAA（7:1以上）が高アクセシビリティ基準です。
Q. oklchやP3などの新しいカラースペースには対応していますか？
現在はHEX・RGB・HSLに対応しています。oklch等の広色域カラースペースは今後対応予定です。
Q. 入力した色はどこかに保存されますか？
保存されません。すべての処理はブラウザ内のみで完結します。
