カラーコード変換ツール
HEX
#3b82f6RGB
rgb(59, 130, 246)HSL
hsl(217, 91%, 60%)OKLCH
oklch(0.623 0.188 259.8)HSL 조정
대비 비율 (WCAG)
비교 색상:
샘플 텍스트
대비 비율: 3.68:1
WCAG: AA Large
最終更新: 2026年 · 無料オンラインツール
カラーコード変換ツールとは？
HEX、RGB、HSL、OKLCHカラーコードを双方向変換し、WCAGコントラスト比を計算する無料オンラインツール
使い方
- 1 色を入力 — カラーピッカーまたはテキスト入力で色を入力します。HEX、rgb()、hsl()形式に対応しています。
- 2 フォーマットを確認 — HEX、RGB、HSL、OKLCHフォーマットが同時に表示されます。
- 3 値をコピー — 各フォーマットのコピーボタンでCSS値をコピーします。
- 4 コントラスト比を確認 — 比較色を設定してWCAGコントラスト比を確認します。
関連ツール
よくある質問
OKLCHはOklab色空間の円筒形表現で、人間の色知覚に最も近い均一な色空間です。CSS Color Level 4でサポートされています。
テキストと背景色の明度差を表します。AA基準は4.5:1以上、AAA基準は7:1以上が推奨されます。
現在は不透明色（RGB、HEX 6桁）のみ対応しています。RGBA、HSLAは今後追加予定です。
はい。各フォーマットの出力値をそのままCSSに貼り付けることができます。
いいえ。すべての色変換はブラウザ内で行われます。