カラーコード変換ツール【無料・登録不要】HEX・RGB・HSLを相互変換｜WCAGのコントラスト比もチェック

Web 制作でよく使うカラーコードを、HEX（#0969da）・RGB（rgb(9, 105, 218)）・HSL（hsl(212.4, 92.1%, 44.5%)）の間で相互に変換できる無料ツールです。red や skyblue などの CSS の色の名前（148 個）も読み取れ、カラーピッカーで色を選ぶこともできます。変換結果は、CSS にそのまま貼れる書き方でコピーできます。

文字色と背景色を入れると、コントラスト比（文字の読みやすさの目安）を計算し、アクセシビリティの国際的なガイドライン WCAG 2.2 の基準（AA・AAA）を満たすかを表示します。入力した色はお使いのブラウザの中だけで処理され、サーバーには一切送信されません。

使い方

カラーコードを変換する

1. 「色」の欄に、変換したい色を入力します（例：#0969da、rgb(9 105 218)、hsl(212 92% 45%)、skyblue）。書き方は自動で判別します。
2. 色を目で見て選びたいときは、右側の「カラーピッカー」の四角を押して色を選びます。
3. 色見本と、HEX・rgb()・hsl() の各書き方が表示されます。使いたい書き方の右の「コピー」を押すと、クリップボードにコピーできます。

「表示のオプション」で、HEX を大文字（#0969DA）にしたり、HSL の小数の桁数（整数・小数第 1 位・小数第 2 位）を選んだりできます。最初は「小数第 1 位まで」になっています（理由は後で説明します）。

入力できる書き方

書き方が CSS の決まりに合っていないとき（例：rgb(100%, 128, 0) のように、カンマ区切りで数値と % を混ぜたとき）は、エラーと直し方を表示します。0〜255 の範囲を超えた値（rgb(300 0 0) など）は、ブラウザと同じく範囲内に切り詰め、そのことを表示します。hwb() や oklch() など、ほかの色の書き方には対応していません。

文字色と背景色のコントラスト比を調べる

1. 「コントラスト比を調べる」の「文字色」と「背景色」に色を入力します（ピッカーで選んでもかまいません）。上の変換欄の色を「この色を文字色にする」「この色を背景色にする」で送ることもできます。
2. プレビューに、通常の文字・大きい文字・太字の大きい文字が、その配色で表示されます。
3. コントラスト比と、WCAG 2.2 の各基準に「合格」か「不合格」かが表に表示されます。
4. 「文字色と背景色を入れ替える」を押すと、2 つの色を入れ替えます（コントラスト比は同じで、見た目の印象だけが変わります）。

カラーコードとは？

カラーコードは、画面に表示する色を文字で表したものです。パソコンやスマートフォンの画面は、赤（Red）・緑（Green）・青（Blue）の 3 色の光を混ぜて色を作っています。それぞれの光の強さを 0〜255 の 256 段階で表すと、256 × 256 × 256 = 16,777,216 通りの色を表せます。

よく見る #0969da という書き方（HEX）は、この 3 つの値を 16 進数 2 桁ずつで並べたものです。09 が赤の 9、69 が緑の 105、da が青の 218 を表します。16 進数のしくみは基数変換ツールの記事でくわしく説明しています。

コマンドで変換する

Python では、16 進数の文字列を 2 文字ずつ int(..., 16) で数値にすると、RGB の値が分かります。Windows のコマンドプロンプトや PowerShell で、次のように実行できます。

py -c "print(tuple(int('0969da'[i:i+2], 16) for i in (0, 2, 4)))"

実行すると「(9, 105, 218)」と表示されます。逆に、RGB の値から HEX を作るときは、PowerShell の書式指定（x2 は「16 進数 2 桁」の意味）が使えます。

'#{0:x2}{1:x2}{2:x2}' -f 9, 105, 218

実行すると「#0969da」と表示されます（Windows PowerShell 5.1 で確認）。

HEX・RGB・HSL の違いと使い分け

HEX・RGB・HSL は、どれも同じ色を別の書き方で表したものです。CSS ではどれを使っても同じように表示されます。

HSL の色相は、色を円に並べたときの角度です。0 度が赤、120 度が緑、240 度が青で、360 度で赤に戻ります。彩度を 0% にすると灰色になり、明度を 0% にすると黒、100% にすると白になります。たとえば hsl(212 92% 45%) の明度だけを 35% にすると、同じ色合いの少し暗い青になります。

カンマ区切りと空白区切り（新しい書き方）

CSS の色の仕様（CSS Color Module Level 4）では、rgb(9, 105, 218) のようなカンマ区切りの書き方を「古い書き方（legacy）」とし、rgb(9 105 218) のような空白区切りの書き方が加わりました。透明度は / の後ろに書きます。

新しい仕様では、rgba() と rgb()、hsla() と hsl() は同じ書き方を受け付ける別名になっており、rgb() にも透明度を書けます。古いブラウザにも対応させる必要がある場合は、カンマ区切りを使うと安心です。

このツールの変換方法と丸め方

• HSL ⇔ RGB の変換：CSS Color Module Level 4 の 7.1 節・7.2 節にある計算方法をそのまま使っています。Python の標準ライブラリ colorsys で計算した結果とも照合しました。
• RGB の丸め：HSL や % から計算した RGB は小数になることがあるため、HEX と rgb() では整数に丸めます。ちょうど .5 のときは大きい方に丸めます（仕様の「+∞ の方向に丸める」に合わせています）。たとえば hsl(200 50% 50%) は RGB で 63.75・148.75・191.25 になり、rgb(64, 149, 191) と表示します。
• HSL の丸め：HSL は四捨五入して表示します（色相が丸めて 360 になったときは 0 にします）。HSL を整数に丸めると、HEX の全 16,777,216 色のうち 15,001,662 色（約 89%）で、HSL から RGB に戻したときに元の色と合わなくなります（赤・緑・青のどれかが最大で 5 ずれます）。小数第 1 位まで残せば、全 16,777,216 色が元の色に戻ることを確かめたので、最初の設定を「小数第 1 位まで」にしています。
• 灰色の色相：白・黒・灰色には色合いがないため、色相は 0 と表示します。
• 透明度：HEX に戻したときに同じ値になる、いちばん短い桁数（小数第 2〜3 位）で表示します。たとえば #ff000080 の透明度は 0.5 になります。

参考までに、Python の colorsys で #0969da を HSL にするコマンドです。

py -c "import colorsys; print(colorsys.rgb_to_hls(9/255, 105/255, 218/255))"

実行すると「(0.5901116427432217, 0.44509803921568625, 0.920704845814978)」と表示されます。colorsys は値を 0〜1 で返し、並び順が色相・明度・彩度（HLS）の順なので注意してください。色相に 360 を、明度と彩度に 100 を掛けると、ツールの表示と同じ hsl(212.4 92.1% 44.5%) になります。

読みやすい配色とコントラスト比

薄い灰色の文字に白い背景のように、文字と背景の明るさの差が小さいと、視力の弱い人や、屋外でスマートフォンを見る人には文字が読みにくくなります。この明るさの差を数値にしたものがコントラスト比です。1:1（同じ色）から 21:1（黒と白）までの値になり、大きいほど読みやすくなります。

WCAG 2.2 の基準

Web のアクセシビリティの国際的なガイドライン WCAG 2.2（W3C 勧告）では、文字と背景のコントラスト比について次の基準を決めています。

また、達成基準 1.4.11「非テキストのコントラスト」（レベル AA）では、ボタンの枠や入力欄、グラフなど、見分ける必要のある UI 部品・図形にも 3:1 以上を求めています。ツールの表の最後の行は、この基準の判定です。

「大きい文字」は、18 ポイント以上、または太字で 14 ポイント以上の文字です。CSS では 1pt が 4/3px なので、約 24px 以上、太字なら約 18.7px 以上にあたります。ロゴや、飾りだけの文字、使えない状態のボタンの文字などは、この基準の対象外です。多くの Web サイトでは、レベル AA を満たすことが目標にされます。

コントラスト比の計算方法

WCAG 2.2 では、まず色ごとに相対輝度（人が感じる明るさに近い値。黒が 0、白が 1）を求め、明るい方の相対輝度を L1、暗い方を L2 として、次の式で計算します。

コントラスト比 = (L1 + 0.05) / (L2 + 0.05)

相対輝度 L = 0.2126 × R + 0.7152 × G + 0.0722 × B
（R・G・B は、0〜255 の値を 255 で割った値 c を次のように変換したもの）
c が 0.04045 以下なら c / 12.92
それ以外なら ((c + 0.055) / 1.055) の 2.4 乗

緑（0.7152）の係数が大きいのは、人の目が緑の明るさに敏感だからです。そのため、同じ「明度 50%」の HSL の色でも、黄色や緑は明るく、青は暗く感じられ、コントラスト比も大きく変わります。

なお、2021 年 5 月より前の WCAG の定義では、しきい値が 0.04045 ではなく 0.03928 でした。WCAG 2.2 の注記では、古い仕様から取った値を更新したもので、ガイドラインの計算には実際上の影響はないと説明されています。このツールは WCAG 2.2 の 0.04045 を使っています。

ぎりぎりの値は丸めずに判定する

WCAG の解説書（Understanding WCAG 2.2）では、計算したコントラスト比を基準と比べるときは丸めてはいけない（4.499:1 は 4.5:1 を満たさない）とされています。よく使われる灰色 #777777 と白の比は 4.478…:1 で、四捨五入すると 4.48 ですが、4.5:1 に届かないので AA の通常の文字は不合格です。1 段階だけ濃い #767676 なら 4.54:1 で合格します。

このツールは、合否を丸める前の値で判定し、表示するコントラスト比は小数第 3 位以下を切り捨てます（#777777 と白は「4.47 : 1」と表示）。四捨五入で表示すると、4.495 以上 4.5 未満の比が「4.50」と表示されているのに不合格、という分かりにくい状態になるためです。

配色を決めるときのコツ

• 本文の文字は、AA の 4.5:1 以上を目安にします。薄い灰色の文字は基準を下回りやすいので、必ず確認します。
• 基準を満たさないときは、HSL の明度を少しずつ変えると、色合いを保ったまま調整できます。
• 色だけで情報を伝えない（エラーを赤い文字だけで示さず、アイコンや文章も添える）ことも大切です。

よくある質問

入力した色はどこかに保存されますか？

保存されません。変換やコントラスト比の計算はすべてお使いのブラウザの中で行い、サーバーへの送信も、ブラウザへの保存（Cookie など）もしていません。ページを閉じると入力内容は消えます。色見本の表示には、入力された文字をそのまま使わず、ツールが読み取って確かめた数値から組み立てた値だけを使っています。

ほかのツールではコントラスト比が 4.48 と表示されました。どちらが正しいですか？

どちらも同じ計算結果（4.478…）を、四捨五入するか切り捨てるかの違いで表示しています。合否は丸める前の値で決まるので、4.478…:1 は 4.5:1 の基準を満たしません。

HSL に変換した値を HEX に戻すと、色が少し変わります

HSL を整数に丸めると、丸めた分だけ色がずれることがあります。このツールの最初の設定（小数第 1 位まで）なら、どの HEX の色も元に戻ります。逆に、hsl(200 50% 50%) のような HSL の値から HEX に変換するときは、RGB が小数になるため、HEX にした時点でわずかに丸められます。

半透明の色のコントラスト比はどう計算していますか？

背景色が半透明のときは白の上に重ねた色を、文字色が半透明のときは背景色の上に重ねた色を求めて計算し、重ねた結果の色を表示します。実際のページでは、背景色の下にある色によって見え方が変わるので、目安として使ってください。

カラーピッカーで透明度を選べません

ブラウザ標準のカラーピッカーは、透明度を扱えません。半透明の色は、#0969da80 や rgb(9 105 218 / 50%) のように「色」の欄に直接入力してください。色見本では、市松模様の上に半透明の色を表示します。

色の名前は何個使えますか？

CSS Color Module Level 4 の「名前付きの色」の表にある 148 個です（gray と grey、aqua と cyan のように同じ色の別名も含みます）。変換した色とぴったり同じ値の名前があるときは「色の名前」の欄に表示します。Canvas などのシステムカラーや currentcolor は、環境によって色が変わるため対応していません。

関連する記事・ツール

• 基数変換ツール【無料・登録不要】2進数・8進数・10進数・16進数を相互変換｜2の補数対応
• HTMLエスケープ・アンエスケープツール【無料・登録不要】特殊文字と文字参照を相互変換｜XSS対策の基本も解説
• Markdownプレビュー【無料・登録不要】入力と同時に表示・HTML変換｜表・コードブロック対応
• JavaScriptとは？できること・歴史・Javaとの違いと、ブラウザで今すぐ試す方法
• 文字数・バイト数カウント【無料・登録不要】UTF-8・Shift_JIS・UTF-16のバイト数と表せない文字の場所を表示

hr

エンジニアとして働いている hr です。仕事や資格勉強で「こんなツールがあれば」と感じたものを、無料Webツールと解説記事にして発信しています。