カラーコード変換ツール
HEX・RGB・HSL・OKLCHのカラーコードを双方向に即変換し、2色のWCAGコントラスト比を計算してアクセシビリティ基準の適合を確認できる無料オンラインツール。 CSV・JSON・色・時刻など異なるデータ形式を変換したいときに便利で、すべてブラウザ内で処理されるため入力データが外部に送信されず、インストールや登録なしで無料で利用できます。
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コントラスト比を計算してアクセシビリティ基準の適合を確認できる無料オンラインツール。 CSV・JSON・色・時刻など異なるデータ形式を変換したいときに便利で、すべてブラウザ内で処理されるため入力データが外部に送信されず、インストールや登録なしで無料で利用できます。
使い方
- 1色を入力— カラーピッカーまたはテキスト入力で色を入力します。HEX、rgb()、hsl()形式に対応しています。
- 2フォーマットを確認— HEX、RGB、HSL、OKLCHフォーマットが同時に表示されます。
- 3値をコピー— 各フォーマットのコピーボタンでCSS値をコピーします。
- 4コントラスト比を確認— 比較色を設定してWCAGコントラスト比を確認します。
関連ツール
CSSグラデーションジェネレーターlinear・radial・conicのCSSグラデーションを作成し、カラーストップや角度を調整してCSSコードをコピーできる無料ツール。 テストや開発で必要な値をその場で生成でき、処理はすべてブラウザ内で行われるためデータが外部に送信されず、登録なしで無料で利用できます。 結果はワンクリックでコピーして、すぐに活用できます。
CSSボックスシャドウジェネレーターオフセット・ぼかし・広がり・色・内側影（inset）を調整しながらbox-shadowをリアルタイムでプレビューし、完成したCSSコードをコピーできる無料オンライン生成ツール。 テストや開発で必要な値をその場で生成でき、処理はすべてブラウザ内で行われるためデータが外部に送信されず、登録なしで無料で利用できます。
CSS単位リファレンスpx・em・rem・%・vw・vh・vmin・vmax・chなどCSS単位をカテゴリ別に整理し、用途と使い方を解説する無料リファレンス。 コーディング中にすぐ調べたいコード・記号・ショートカット情報を一か所で確認でき、ブラウザ上で即座に検索・コピーでき、登録やインストールなしで無料で使えます。 結果はワンクリックでコピーして、すぐに活用できます。
px ↔ rem 変換ツールカスタム可能なルートフォントサイズを基準にCSSのpxとrem単位を双方向変換し、コピー可能な参照表とCSSスニペットを提供する無料オンラインツールです。 CSV・JSON・色・時刻など異なるデータ形式を変換したいときに便利で、すべてブラウザ内で処理されるため入力データが外部に送信されず、インストールや登録なしで無料で利用できます。
よくある質問
OKLCHはOklab色空間の円筒形表現で、人間の色知覚に最も近い均一な色空間です。CSS Color Level 4でサポートされています。
テキストと背景色の明度差を表します。AA基準は4.5:1以上、AAA基準は7:1以上が推奨されます。
現在は不透明色（RGB、HEX 6桁）のみ対応しています。RGBA、HSLAは今後追加予定です。
はい。各フォーマットの出力値をそのままCSSに貼り付けることができます。
いいえ。すべての色変換はブラウザ内で行われます。