カラーコード変換ツール
HEX
#3b82f6RGB
rgb(59, 130, 246)HSL
hsl(217, 91%, 60%)OKLCH
oklch(0.623 0.188 259.8)HSL Adjustment
Contrast Ratio (WCAG)
Compare color:
샘플 텍스트
Contrast ratio: 3.68:1
WCAG: AA Large
最終更新: 2026年 · 無料オンラインツール
カラーコード変換ツールとは？
HEX・RGB・HSL・OKLCHのカラーコードを双方向に即変換し、2色のWCAGコントラスト比を計算してアクセシビリティ基準の適合を確認できる無料オンラインツール。 CSV・JSON・色・時刻など異なるデータ形式を変換したいときに便利で、すべてブラウザ内で処理されるため入力データが外部に送信されず、インストールや登録なしで無料で利用できます。
使い方
- 1色を入力— カラーピッカーまたはテキスト入力で色を入力します。HEX、rgb()、hsl()形式に対応しています。
- 2フォーマットを確認— HEX、RGB、HSL、OKLCHフォーマットが同時に表示されます。
- 3値をコピー— 各フォーマットのコピーボタンでCSS値をコピーします。
- 4コントラスト比を確認— 比較色を設定してWCAGコントラスト比を確認します。
関連ツール
タイムスタンプ変換ツールUnixタイムスタンプと日付を双方向に変換する無料オンラインツールです。秒(10桁)とミリ秒(13桁)を認識しKST、JST、UTCなどのタイムゾーンとISO 8601に対応します。 CSV・JSON・色・時刻など異なるデータ形式を変換したいときに便利で、すべてブラウザ内で処理されるため入力データが外部に送信されず、インストールや登録なしで無料で利用できます。
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に貼り付けることができます。
いいえ。すべての色変換はブラウザ内で行われます。