カラーコード変換ツール

使い方

1. カラーピッカー、HEX、RGB（R/G/B）、HSL（H/S/L）のいずれかを入力・変更します
2. 有効な値を入力すると、残りのすべての欄と上の色見本、下の結果が同時に更新されます。変換ボタンはありません
3. 結果には、HEX・RGB・HSLに加えて、HSV（HSB）・CMYK・OKLCHの表記も並びます。この3つは結果に表示するだけで、入力欄はありません
4. 結果の各行にある「コピー」ボタンで、その表記の文字列をクリップボードにコピーできます
5. その下の「文字色とのコントラスト比（WCAG 2）」で、この色を背景にして文字を置いたときのコントラスト比と、WCAGの適合レベルを確認できます。白い文字・黒い文字に加えて、「文字色のHEX」か「文字色のピッカー」で指定した色の文字とも比べられます
6. 「色と文字色を入れ替える」を押すと、上の色と文字色が入れ替わります。文字色のほうのRGB・HSLを見たいときや、文字色を細かく調整したいときに使います

ページを開いた時点では、例として青色の #3b82f6 と、文字色に濃い紺色の #0f172a が入っています。どの欄から書き換えても構いません。

具体例

HEX欄に #ff6347（トマト色）と入力すると、結果は次のようになります。

HEX: #ff6347
RGB: rgb(255, 99, 71)
HSL: hsl(9, 100%, 64%)
HSV: hsv(9, 72%, 100%)
CMYK: cmyk(0%, 61%, 72%, 0%)
OKLCH: oklch(69.62% 0.1955 32.32)

HSLから指定する例として、Hを 210、Sを 50、Lを 40 にすると、HEXは #336699、RGBは rgb(51, 102, 153)、HSVは hsv(210, 67%, 60%)、CMYKは cmyk(67%, 33%, 0%, 40%)、OKLCHは oklch(49.93% 0.0987 250.43) になります。

コピーされる文字列は、上の結果に表示されたとおりの形式です。HEX・RGB・HSL・OKLCHは、CSSの色指定としてそのまま貼り付けて使えます。hsv() と cmyk() はCSSの関数ではないので、CSSに貼っても色になりません。デザインツールなどに数値を写すときの控えとして使ってください。

同じ #ff6347 のコントラスト比は、文字色が最初の #0f172a のままなら次のとおりです。この色の上には、白い文字より黒い文字のほうが読みやすいことが分かります。

指定した文字色: 6.05:1 AA 適合
白い文字: 2.94:1 不適合
黒い文字: 7.12:1 AAA 適合

#336699 では白い文字が 5.99:1（AA 適合）、黒い文字が 3.50:1（大きな文字のみ AA 適合）で、白い文字のほうが向いています。

文字色を自分で決める例として、上の色を #336699 にして「文字色のHEX」に黄色の #ffcc00 を入力すると、比は 3.96:1 で「大きな文字のみ AA 適合」です。文字色を薄い黄色の #ffeb99 に変えると 5.02:1 になり、通常の大きさの文字でも「AA 適合」になります。

表記の読み方

• HEX — # に続く6桁の16進数で、2桁ずつが赤・緑・青の強さ（00〜ff）を表します。#ff6347 は赤が ff（255）、緑が 63（99）、青が 47（71）です

• RGB — 赤・緑・青の強さを、それぞれ0〜255の整数で表します。HEXとは書き方が違うだけで、同じ情報です

• HSL — 色相（H）、彩度（S）、明るさ（L、Lightness）で表します。Hは色相環上の角度で、0が赤、120が緑、240が青です。Sは0%で無彩色（グレー）、100%で最も鮮やかになります。Lは0%で黒、100%で白になります

• HSV（HSB） — 色相（H）、彩度（S）、明度（V、Value。Bは Brightness）で表します。Hは HSL と同じ角度です。Vは0%で黒になり、RGBのいちばん大きい値が255のとき100%になります。Sは0%で無彩色になり、黒を除いて、RGBのいちばん小さい値が0のとき100%になります。Photoshop や Figma などのカラーピッカーで使われる表記です。HSLのLとHSVのVは別の量なので、同じ色でも数値は違います（#ff6347 は L が64%、V が100%）

• CMYK — シアン（C）・マゼンタ（M）・イエロー（Y）・黒（K）の割合を0〜100%で表します。このアプリの値は、RGBから計算する単純な式（Kは「1 − RGBの最大値」、残りはそれに対する割合）によるものです。実際の印刷で使うCMYKは、用紙やインク、印刷機に合わせたカラープロファイル（ICCプロファイル）で変換するので、デザインソフトや印刷所の値とは一致しません

• OKLCH — 人の目の感じ方に近づけた色空間 OKLab を、明るさ（L）・彩度（C、Chroma）・色相（H）で表したものです。Lは0%で黒、100%で白です。Cは0で無彩色になり、画面で表せる色（sRGB）では最大でも0.32ほどです。Hは角度ですが、HSLの色相とは基準が違います（純粋な赤 #ff0000 は HSL で0、OKLCH で約29.23）。CSSの oklch() として、主なブラウザの最新版で使えます

HSLは「同じ色味のまま明るさだけを変える」といった調整に向いています。たとえば上の hsl(9, 100%, 64%) のLだけを下げると、色相を保ったまま暗いトマト色になります。OKLCHはLが見た目の明るさに近いので、色相の違う色どうしで明るさをそろえたいときに向いています。

HSV・CMYK・OKLCHの表示の丸め

• HSVとCMYKは、それぞれ整数に四捨五入して表示します。黒（#000000）のCMYKは cmyk(0%, 0%, 0%, 100%) です
• OKLCHは、Lを0.01%、Cを0.0001、Hを0.01度の単位に四捨五入し、末尾の0を省いて表示します。この桁数なら、表示された oklch() をブラウザで色に戻したときに、RGBの各値のずれは最大でも1です
• グレー・黒・白は色相が決まらないので、HSVのHとSは0、OKLCHのCとHは0と表示します（#808080 は hsv(0, 0%, 50%)、oklch(59.99% 0 0)）
• 色相が360に丸まるときは、同じ色相の0と表示します。HSLとHSVのH（整数）、OKLCHのH（0.01度単位）のどれも同じです

コントラスト比の読み方

コントラスト比は、2つの色の明るさの差を 1:1（同じ色）から 21:1（白と黒）までの数値で表したものです。数値が大きいほど、文字が背景から見分けやすくなります。このアプリは、入力した色と指定した文字色、入力した色と白（#ffffff）、入力した色と黒（#000000）の3通りを、WCAG 2 の計算式で求めます。背景と文字を入れ替えても比は変わらないので、「色と文字色を入れ替える」を押しても「指定した文字色」の行の比は同じままです。

右側の表示は、その比が WCAG 2 の文字のコントラスト基準のどこまでを満たすかを表します。

• AAA 適合（7:1 以上） — 通常の大きさの文字でレベルAAA（達成基準 1.4.6）を満たします
• AA 適合（4.5:1 以上、7:1 未満） — 通常の大きさの文字でレベルAA（達成基準 1.4.3）を満たします。大きな文字ならレベルAAAも満たします
• 大きな文字のみ AA 適合（3:1 以上、4.5:1 未満） — 大きな文字に限ってレベルAAを満たします
• 不適合（3:1 未満） — 文字の基準はどれも満たしません

「大きな文字」は、WCAG では 18ポイント（24px）以上、または太字で 14ポイント（約18.66px）以上の文字を指します。

• 比は小数第3位以下を切り捨てて表示します。#777777 と白の比は約 4.478 で、表示は 4.47:1 です。適合レベルは切り捨てる前の値で判定するので、4.50:1 と表示されているのに「AA 適合」にならない、ということは起こりません
• グレーの #767676 は白い文字との比が 4.54:1 で「AA 適合」、1段階明るい #777777 は 4.47:1 で「大きな文字のみ AA 適合」になります
• 見本の「Aa」は、実際にその色の組み合わせで文字を表示したものです。判定は数値によるもので、見本の見え方は画面やフォントによって変わります

入力のルール

• HEXは6桁、または3桁の省略形で入力します。#f00 は各桁を2回繰り返した #ff0000 として扱われます
• HEXの先頭の # は省略できます。英字は大文字でも小文字でも構いません。変換が成立すると、表示は # 付きの小文字6桁に統一されます
• 4桁・8桁のHEXや、red のような色名、rgb(...) や oklch(...) の形の文字列は、HEX欄には入力できません。「無効なHEXコードです」と表示され、他の欄は直前の有効な色のまま残ります
• 「文字色のHEX」もHEX欄と同じ書き方で入力します。読めない値のあいだは「文字色のHEXコードが無効です」と表示され、コントラスト比は直前の有効な文字色のまま残ります。文字色はHEXとピッカーでだけ指定でき、RGB・HSLの欄はありません
• 「色と文字色を入れ替える」は、どちらも直前の有効な色どうしを入れ替えます。入力途中で読めない状態だった欄は、入れ替えた後の色の表示に置き換わります
• RGBは0〜255、Hは0〜360、SとLは0〜100の範囲です。範囲外の数値は、最も近い端の値に置き換えられます（Rに 300 と入力すると255になります）
• 小数を入力した場合は、整数に四捨五入されます
• RGB・HSLの欄を空にしたり、入力途中で数値として読めない状態になったりしても、0としては扱いません。直前の有効な色を保ち、フォーカスを外すとその欄は元の数値に戻ります

HSLの値が入力と変わることがある理由

このアプリは色をRGBの整数（各0〜255）で保持し、HSLはそこから計算して整数に四捨五入したものを表示しています。HSLの欄に入力した値は、いったんRGBに変換されてから再びHSLとして表示されるため、次のようなことが起こります。

• 入力した値と表示が1ずれることがあります。HEXが #6c3737 のとき、HSLは hsl(0, 33%, 32%) と表示されます。ここでSに 32 と入力しても、計算されるRGBは同じ rgb(108, 55, 55) なので、Sは 33 に戻ります
• HSLの欄を操作すると、HEXやRGBが1段階ずれることがあります。初期値の #3b82f6 は hsl(217, 91%, 60%) と表示されますが、この3つの数値から逆算した色は #3c83f6 です
• グレー、黒、白（Sが0、またはLが0か100）では色相が決まらないため、Hは0と表示されます。この状態でHだけを変えても、色は変わらずHは0に戻ります。先にSやLを変えてから、Hを指定してください
• Hに 360 を入力すると、同じ色相である 0 として表示されます

正確な色を受け渡したいときは、丸めの影響を受けないHEXかRGBの値を使ってください。

FAQ

3桁の省略HEX（例: #f00）は使えますか？

はい。#f00 は #ff0000、#abc は #aabbcc として変換されます。結果は常に6桁で表示されます。

アルファ値（透過度）には対応していますか？

いいえ。対応しているのは不透明な色だけです。#ff634780 のような8桁のHEXは無効な値として扱われ、rgba() や透過度付きの hsl() の出力もできません。

白と黒以外の文字色とのコントラスト比は調べられますか？

はい。「文字色のHEX」か「文字色のピッカー」で文字色を指定すると、「指定した文字色」の行に、上の色との比と適合レベルが表示されます。2つの任意の色どうしの比を調べたいときは、片方を上の色に、もう片方を文字色に入れてください。

文字色をRGBやHSLで指定できますか？

文字色の欄はHEXとピッカーだけです。RGBやHSLの値しか分からないときは、その色をいったん上の欄に入力し、「色と文字色を入れ替える」で文字色へ移してください。

コントラスト比はどの基準で計算していますか？

WCAG 2（2.0・2.1・2.2 で共通）の相対輝度とコントラスト比の式です。WCAG 3 の草案で検討されている APCA とは別の計算で、数値は互いに比べられません。

「AA 適合」と出れば、アクセシビリティの基準を満たしていますか？

満たすのは、その色の組み合わせで書いた文字のコントラストの基準だけです。文字の大きさや太さ、画像の上に置いた文字、アイコンや入力欄の枠といった文字以外の要素には、別の確認が必要です。

HSV（HSB）やCMYK、OKLCHには変換できますか？

はい。結果のHSV・CMYK・OKLCHの行に表示され、コピーもできます。ただし、この3つは表示だけで、HSVやCMYKの値を入力して色を指定することはできません。色はカラーピッカー・HEX・RGB・HSLのいずれかで指定してください。

表示されたCMYKを、そのまま印刷の入稿に使えますか？

おすすめしません。このアプリのCMYKは、カラープロファイルを使わない単純な計算式による目安です。印刷物の色を合わせたいときは、印刷所が指定するプロファイル（Japan Color など）でデザインソフトから変換するか、印刷所に確認してください。また、画面の色（RGB）には、CMYKのインクでは刷れない鮮やかな色もあります。

HSLに入力した数値が、少し違う値に変わるのはなぜですか？

HSLの値を整数に丸めて表示しているためです。RGBの整数の組み合わせは約1,677万通りありますが、整数のHSLで表せる組み合わせはそれより少なく、すべての色を1対1で対応させることはできません。詳しくは上の「HSLの値が入力と変わることがある理由」を参照してください。

カラーピッカーの見た目が他の人と違います

カラーピッカーはブラウザ標準の色選択機能を使っているため、表示や操作方法はブラウザやOSによって異なります。選んだ色は、どの環境でも同じようにHEX・RGB・HSLなどの各表記へ反映されます。

コピーボタンを押しても貼り付けできません

コピーに成功すると、ボタンの表示が一時的に「コピーしました」に変わります。表示が変わらない場合は、ブラウザがクリップボードへの書き込みを許可していない可能性があります。その場合は、結果の文字列を選択して手動でコピーしてください。

入力したデータは保存されますか？

いいえ。変換はすべてブラウザ内のJavaScriptで行われ、入力した色がサーバーへ送られることはありません。ページを再読み込みすると、色も文字色も初期値に戻ります。