日本語
HEXをRGBに変換する方法（とその逆）
このカラーコード変換ツールは、入力に合わせてHEXコードをRGB、HSL、HSV、CMYK、OKLCHに変換します。逆方向にも使えて、どの欄に rgb(255, 99, 71) を貼り付けても #FF6347 が得られます。どの欄もすべての形式を受け付けるので、正しい入力欄を探す必要はありません。
手で計算するなら、HEXコードは16進数で書かれた3つの数字にすぎません。#3B82F6 を2桁ずつに分けて、それぞれを変換します。
82 → 8×16 + 2 = 130
F6 → 15×16 + 6 = 246
#3B82F6 = rgb(59, 130, 246)
RGBからHEXへはその逆です。各チャンネルを16で割り、商が1桁目、余りが2桁目になります。255は15余り15なのでFF、99は6余り3なので63。トマトレッドの rgb(255, 99, 71) が #FF6347 になるのはこのためです。
よく使うカラーコード（HEX・RGB・HSL）
見ただけでわかるようにしておくと便利なものです。どれもCSSの色名としても使えます。ツールは入力したどの色にも最も近い色名を表示します（#3B82F6に最も近いのはdodgerblueですが、同じ色ではありません）。
| 色名 | HEX | RGB | HSL |
|---|---|---|---|
| white | #FFFFFF | 255, 255, 255 | 0, 0%, 100% |
| black | #000000 | 0, 0, 0 | 0, 0%, 0% |
| red | #FF0000 | 255, 0, 0 | 0, 100%, 50% |
| tomato | #FF6347 | 255, 99, 71 | 9, 100%, 64% |
| gold | #FFD700 | 255, 215, 0 | 51, 100%, 50% |
| teal | #008080 | 0, 128, 128 | 180, 100%, 25% |
| navy | #000080 | 0, 0, 128 | 240, 100%, 25% |
| rebeccapurple | #663399 | 102, 51, 153 | 270, 50%, 40% |
短縮形・通常形・透明度つきのHEXコード
HEXには4つの長さがあります。3桁は各桁を2回重ねる短縮形で、#F60 は #FF6600 を意味します。6桁が通常の形です。8桁は末尾にアルファ（不透明度）チャンネルを加えたもので、#3B82F680 は同じ青を255分の128、約50%の不透明度にした色です。4桁はその短縮形です。ブラウザはずっと前から4種類すべてに対応していますが、デザインアプリやメールソフトの中には今も6桁しか受け付けないものがあります。迷ったら6桁のコードを貼り付けて、不透明度は別に設定しましょう。
どの形式を使えばいい？
- HEXは、デザインツール、ブランドガイド、CMSに貼り付けるもの全般に。短くて読み間違えもありません。
- RGB / RGBAは、古いCSSやJavaScriptのcanvasで透明度が必要なときに。
- HSLは、色を理屈で調整したいときに。最後の数字を下げると暗くなり、真ん中の数字を下げるとくすんだ色になります。ホバー時の色もずっと書きやすくなります。
- OKLCHは、新しいCSSデザインシステムに。明度の値が目で見た明るさと一致するので、Lが同じ2色は本当に同じ明るさに見えます。HSLではそうはいきません（明度50%の黄色は、明度50%の青よりずっと明るく見えます）。
- CMYKは、印刷用のおおまかな目安としてだけ使います。ここでの数値はプリンターのプロファイルではなく単純な計算式から出しているので、パンフレットの色は画面と完全には一致しません。印刷所にどのプロファイルを使うか確認してください。
- HSV / HSBは、主にPhotoshopやFigmaのカラーピッカーに合わせるときに使います。
コントラストチェッカー：WCAGに合格する基準は？
WCAG 2では、文字と背景の相対的な明るさを比べ、1:1（同じ色）から21:1（白地に黒）までの比率で表します。基準値は決まっています。
| レベル | 通常の文字 | 大きな文字（24px、または太字18.66px） |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
WCAG 2.1では、アイコン、入力欄の枠線、フォーカスリングに3:1が必要です。実際の色を白地の文字として使った場合の結果は次のとおりです。
| #FFFFFF上の文字色 | 比率 | 結果 |
|---|---|---|
| #949494 | 3.03:1 | 大きな文字のみ |
| #777777 | 4.48:1 | 本文ではAAにわずかに届かず不合格 |
| #767676 | 4.54:1 | AA合格 |
| #595959 | 7.00:1 | AAA合格 |
| #3B82F6 | 3.68:1 | 大きな文字とボタンのみ |
| #008080 | 4.77:1 | AA合格 |
#777777の行は典型的な落とし穴です。見た目は#767676とまったく同じで、小数点以下1桁で表示するチェッカーでは4.5と出ますが、ルールは「4.5以上」で、4.48は満たしていません。このツールは、不合格の比率を基準値まで切り上げて表示することはありません。
色が不合格のときは、同じ色相で合格する最も近い色を探します。白地の#3B82F6なら、AA用に#1E6FF5（4.52:1）、AAA用に#0950C5（7.08:1）を提案します。使うを押して読み込むか、そのままスタイルシートにコピーしてください。明るい黄色やオレンジは、白地の文字として使うにはかなり暗くする必要があることが多いので、明るい色は背景に使い、その上に暗い文字を置きましょう。
パレットを作る、画像から色を拾う
パレットのパネルでは、50から950までの濃淡スケール（Tailwindと同じ命名）に加え、補色、類似色、トライアド、スプリットコンプリメンタリー、スクエア、モノクロームの配色を作れます。色見本をクリックするとコピーでき、セット全体をCSSカスタムプロパティ、SCSS変数、JSON、Tailwindのカラー設定として書き出せます。スライドに貼ったりクライアントに送ったりするためのPNGの帯もダウンロードできます。
ロゴや写真の色に合わせたいときは、画像を読み込んでその場所をタップします。JPGの1ピクセルは圧縮ノイズのせいで見た目の色と少しずれていることがあるので、写真なら3×3か5×5の平均に切り替えてください。ChromeとEdgeでは、画面から取得ボタンでほかのウィンドウを含む画面上のどこからでも色を拾えます。画像はアップロードされず、ブラウザの中で読み取られます。
よくある質問
HEXをRGBに変換するには？
6桁を2桁ずつ3組に分け、それぞれ16進数から0〜255の数値に直します。#3B82F6は3B = 59、82 = 130、F6 = 246なので、RGB値はrgb(59, 130, 246)です。
RGBをHEXに変換するには？
各チャンネルを2桁の16進数にして、#のあとにつなげます。rgb(255, 99, 71)はFF、63、47になるので、HEXコードは#FF6347です。これはCSSカラーのtomatoです。
WCAG AAに合格するにはどれくらいのコントラスト比が必要ですか？
通常の文字は4.5:1以上、大きい文字（24px、または太字18.66px）は3:1以上です。白地にグレー#767676は4.54:1で、本文として合格する最も明るいグレーです。
8桁のHEXカラーコードはどういう意味ですか？
最後の2桁はアルファ（不透明度）チャンネルです。#3B82F680は同じ青を128/255、約50%の不透明度にしたもので、CSSではrgba(59, 130, 246, 0.5)です。
#F60のような3桁のHEXコードはどういう意味ですか？
各桁を2回ずつ繰り返すので、#F60は#FF6600です。短縮形は各組の2桁が同じ場合にしか使えないため、#3B82F6には3桁の形がありません。
CMYKの値は印刷に使えるほど正確ですか？
出発点であって、印刷の校正にはなりません。ツールは標準的な式を使うので#3B82F6はcmyk(76%, 47%, 0%, 4%)になりますが、実際のインクの配合はプリンターのカラープロファイルや用紙で変わります。印刷会社に値を確認してください。
写真の中の色のHEXコードを知るには？
上のパネルに画像を読み込み、知りたい場所をタップすると、そのピクセルを読み取ります。写真なら3×3か5×5の平均に切り替えてください。1ピクセルだけだと、目で見た色よりノイズが多いことがよくあります。
HSLとHSVの違いは？
どちらも同じ色相から始まりますが、HSLの明度100%は常に白で、HSVの明度100%はその色の最も明るい状態です。純粋な赤はhsl(0, 100%, 50%)、hsv(0, 100%, 100%)です。