カラーコード変換の使い方
- 「カラーコードを入力」に #2456e3、rgb(36, 86, 227)、hsl(224, 77%, 52%) などを入力します。左の色見本をクリックしてカラーピッカーから選ぶこともできます。
- HEX、RGB、HSL、OKLCH の各行がすぐに更新されます。使いたい形式の「コピー」を押してください。
- 下の「コントラスト比チェック」で、白い文字と黒い文字それぞれのコントラスト比と、AA・AAA の適合状況を確認します。
HEX・RGB・HSL・OKLCH の違い
HEX（#2456e3）と RGB（rgb(36, 86, 227)）は同じ情報の書き方違いで、赤・緑・青の光の強さをそれぞれ 0〜255 で表します。HEX はその値を 16 進数 2 桁ずつで並べたもので、デザインツールやブランドガイドラインでよく使われます。末尾に 2 桁を足した #2456e380 のような 8 桁の形式では透明度も指定できます。
HSL は色相（0〜360 度）・彩度・明度で色を表すため、明度だけを変えて濃淡を作るといった調整が直感的にできます。ただし同じ明度でも色によって明るさの感じ方が違い、黄色の hsl(60, 100%, 50%) は青の hsl(240, 100%, 50%) よりずっと明るく見えます。
OKLCH は L（知覚的な明度）、C（彩度）、H（色相）で表す新しい形式で、2023 年から主要ブラウザで使えるようになりました。L が同じなら見た目の明るさもそろうため、カラーパレットやデザインシステムの色階調を作るのに向いています。
コントラスト比と JIS X 8341-3
Web アクセシビリティの国際基準 WCAG 2 では、文字色と背景色のコントラスト比を 1:1 から 21:1（白地に黒）で表します。日本の JIS X 8341-3:2016 は WCAG 2.0 と一致する規格で、官公庁や自治体のサイトでは適合レベル AA が目標とされています。2024 年 4 月の改正障害者差別解消法の施行で民間事業者にも合理的配慮が義務化され、企業サイトでも対応が進んでいます。
AA では通常の文字で 4.5:1 以上、大きな文字（18pt 以上、または 14pt 以上の太字）で 3:1 以上が必要です。AAA ではそれぞれ 7:1、4.5:1 以上です。たとえば白地にグレー #767676 は 4.54:1 でぎりぎり AA に適合し、#777777 は 4.48:1 で不適合になります。
CSS での色の書き方
現在の CSS では rgb(36 86 227 / 50%)、hsl(224 77% 52%)、oklch(0.53 0.21 265) のように、カンマなしの書き方とスラッシュによる透明度指定が使えます。このツールは従来のカンマ区切りと新しい書き方のどちらも読み取り、RGB と HSL はどの環境でも使えるカンマ区切りで出力します。
OKLCH で指定した色が一般的なディスプレイの色域（sRGB）を超える場合、ブラウザは表示できる近い色に補正します。このツールでも同じように補正し、補正したことを表示します。
よくある質問
HEX を RGB に変換するには？
6 桁を 2 桁ずつに分け、それぞれを 16 進数から 10 進数に直します。#ff6347 なら ff＝255、63＝99、47＝71 で rgb(255, 99, 71) です。上の入力欄に貼り付ければ自動で変換されます。
HSL と OKLCH はどう違いますか？
どちらも色相を使いますが、HSL の明度は計算上の値、OKLCH の明度は人の目の感じ方に合わせた値です。OKLCH では L が同じ色は同じ明るさに見えるため、統一感のある配色を作りやすくなります。
アクセシビリティに必要なコントラスト比はいくつですか？
多くのサイトが目標とする WCAG（JIS X 8341-3）の AA では、通常の文字で 4.5:1 以上、大きな文字で 3:1 以上です。AAA では 7:1 と 4.5:1 以上が必要です。ボタンの枠線やアイコンなどは周囲に対して 3:1 以上が求められます。
透明度のある色にも対応していますか？
はい。#RRGGBBAA の 8 桁 HEX、rgba()、スラッシュによる透明度指定に対応しています。コントラスト比は白い背景に重ねたときの色で計算します。
「red」や「navy」のような色名は使えますか？
現在は対応していません。HEX、rgb()、hsl()、oklch() の形式で入力してください。色見本をクリックすると OS のカラーピッカーが開き、対応環境ではスポイトで画面上の色を拾うこともできます。
最終更新： ソースコードを見る