カラーコード変換ツール
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のカラーコードを双方向に即変換し、2色のWCAGコントラスト比を計算してアクセシビリティ基準の適合を確認できる無料オンラインツール。
使い方
- 1 色を入力 — カラーピッカーまたはテキスト入力で色を入力します。HEX、rgb()、hsl()形式に対応しています。
- 2 フォーマットを確認 — HEX、RGB、HSL、OKLCHフォーマットが同時に表示されます。
- 3 値をコピー — 各フォーマットのコピーボタンでCSS値をコピーします。
- 4 コントラスト比を確認 — 比較色を設定してWCAGコントラスト比を確認します。
関連ツール
タイムスタンプ変換ツール Unixタイムスタンプと日付を双方向に変換する無料オンラインツールです。秒(10桁)とミリ秒(13桁)を認識しKST、JST、UTCなどのタイムゾーンとISO 8601に対応します。
CSSグラデーションジェネレーター linear・radial・conicのCSSグラデーションを作成し、カラーストップや角度を調整してCSSコードをコピーできる無料ツール。
CSSボックスシャドウジェネレーター オフセット・ぼかし・広がり・色・内側影（inset）を調整しながらbox-shadowをリアルタイムでプレビューし、完成したCSSコードをコピーできる無料オンライン生成ツール。
よくある質問
OKLCHはOklab色空間の円筒形表現で、人間の色知覚に最も近い均一な色空間です。CSS Color Level 4でサポートされています。
テキストと背景色の明度差を表します。AA基準は4.5:1以上、AAA基準は7:1以上が推奨されます。
現在は不透明色（RGB、HEX 6桁）のみ対応しています。RGBA、HSLAは今後追加予定です。
はい。各フォーマットの出力値をそのままCSSに貼り付けることができます。
いいえ。すべての色変換はブラウザ内で行われます。