カラーコンバーター
HEX・RGB・HSL・HSV・CMYK・OKLCHを変換し、パレット生成とコントラスト確認 — ブラウザ内で。
カラー変換ツール - HEXとRGBとHSLをオンラインで相互変換
デザインツールが渡してくる色の形式、CSSが求める形式、canvas APIが求める形式はそれぞれ違います。この無料のカラー変換ツールは、よく使われる3つの記法 #0A84FF、rgb(10,132,255)、hsl(210,100%,52%) のいずれを入力しても、必要な形式の正確な等価値を返します。
値を貼り付け、出力形式を選び、変換をクリックするだけです。インストールも会員登録も不要で、変換はブラウザー内で行われるためオフラインでも使えます。
3つの形式と、それぞれが得意な場面
| 形式 | 書き方 | 向いている用途 |
|---|---|---|
| HEX | #0A84FF | デザインの受け渡し、ブランドガイドライン、色を書き留めたり貼り付けたりする場面全般 |
| RGB | rgb(10, 132, 255) | canvas、SVG、画像処理、チャンネルを操作するコード |
| HSL | hsl(210, 100%, 52%) | デザインシステム。ホバー・無効状態・ダークモード用に明度だけを調整できます |
このツールが返すすべての形式
貼り付けたものが何かを指定する必要はありません。自動判別 は # のあるHEXもないHEXも、rgb() と hsl() のカンマ区切りとスペース区切りの両方も、oklch()、hwb()、lab() といった新しい記法も、CSSの148色の色名もすべて読み取ります。HEX・RGB・HSLに加えて、カラーピッカー向けのHSV、印刷に回すためのCMYK、知覚的に均等なデザイントークン向けの oklch()、そして最も近いCSS色名も表示されます。アルファチャンネル（rgba()、hsla()、8桁HEX）は切り捨てずにそのまま引き継ぎます。
色を変換する手順
- 任意の記法で色を貼り付けるか、カラーピッカーで選びます。形式は 自動判別 が判別します。対応ブラウザー（デスクトップ版のChromeやEdgeなど）では、画面から取得で画面上の任意のピクセルの色を拾えます。非対応のブラウザーではこのボタンは表示されません。
- 形式 タブにHEX、RGB、HSL、HSV、CMYK、OKLCHが並びます。各行の横のボタンでコピーできます。色名も表示されます。CSSの名前付きカラーと完全に一致すればCSS色名、そうでなければ最も近い色名です。
- パレット タブでは、明度違いのスケールに加えて補色・類似色・三色配色・四色配色が手に入ります。
- コントラスト タブで背景色を指定すると、WCAGのコントラスト比とAA・AAAの判定が読み取れます。
- ランダム で色を試し、クリア で次の値の前にリセットします。
HEXカラーコードの仕組み
HEXカラーは16進数2桁の組を3つ並べたもので、赤・緑・青にそれぞれ1組ずつ対応し、各組は00からFF、10進数でいえば0から255の範囲を表します。#FF0000は純粋な赤、#000000は黒、#FFFFFFは白です。3組とも同じ数字が繰り返される場合は短縮形が使え、#FFFは#FFFFFFを意味します。4桁や8桁のコードはアルファチャンネルを加えるため、#0A84FF80は同じ青のおよそ50%の不透明度になります。
HSLのほうが考えやすい理由
HSLは人が色を語るときと同じ方法で色を表します。色相は色相環上の角度、彩度は鮮やかさ、明度は白や黒への近さです。そのためパレットを組み立てるには実務的な選択になります。ブランドの色相を取り、彩度は保ったまま明度だけを動かせば、ホバー状態、無効状態、境界線の淡い色、ダークモード用の色が、同じ family に属することがはっきり分かる形で生まれます。同じことをHEXでやろうとすると、6桁を勘で決めることになります。
1色からパレット全体を作る
パレット タブは、ブランドカラー1色から実務で必要になる一式を作ります。明度スケールは色相と彩度を保ったまま明度だけを11段階動かし、多くのデザインシステムと同じく50から950まで番号が付くので、ホバー・境界線・無効状態・ダークモードの各バリエーションが同じ family に属していることが一目で分かります。CSSとしてコピー を押すと、スケール全体がカスタムプロパティとしてクリップボードに入り、そのまま :root に貼り付けられます。
スケールの下には色相環の配色があります。補色（正反対の色相）、類似色（30度隣）、三色配色と分裂補色（バランスの取れたアクセント向け）、そして四色配色です。スウォッチをクリックするとHEXがコピーされ、ダブルクリックするとその色が現在の色になり、そこから新しいパレットを組み立てられます。
公開前にコントラストを確認する
コントラスト タブは、選んだ色と任意の背景色とのWCAGコントラスト比を測ります。比率は小数第2位まで表示され、各しきい値に合格・不合格が付きます。AA 通常の文字は4.5:1、AA 大きな文字は3:1、AAA 通常の文字は7:1、AAA 大きな文字は4.5:1、アイコンや入力欄の枠のようなUIコンポーネントは3:1です。入れ替えを押すと、文字色と背景色がワンクリックで入れ替わります。ライブサンプルが16pxと24px太字での見え方を示します。本文には足りない比率でも、見出しなら問題ないことがあるからです。
基準に届かない組み合わせでは、同じ色相のまま4.5:1に達する最も近い明度を提案します。ブランドカラーを捨てずにコントラストだけを直せます。半透明の色は先に背景と合成してから測ります。読者が実際に見るのは合成後の色であり、rgba() の生の値で測ると実際より良い結果が出てしまうためです。
色の変換が必要になる場面
- デザインファイルのブランドカラーをCSSカスタムプロパティへ移すとき。
- RGBを好むcanvasの
fillStyleやSVGの色属性を設定するとき。 - クライアント間で最も安全な記法がHEXであるHTMLメールのテンプレートを作るとき。
- デザインシステム向けに、明るい色と暗い色の一貫したセットを生成するとき。
- 色相を均等に配置する必要があるグラフやダッシュボードのパレットを選ぶとき。
- スクリーンショットやブランドPDFの色を、コードで使える値に翻訳するとき。
色と読みやすさ
色を変換しても、その上の文字が読めるかどうかは分かりません。コントラストは相対輝度で決まり、WCAGは通常の本文で4.5対1以上、大きな文字で3対1以上を求めています。HSLの明度は最初の目安として役立ちます（明度が近ければコントラストはまず足りません）。そのうえで コントラスト タブが、どの色の組み合わせでも公開前に正確な答えを出します。
知っておきたい細かな点
- 丸め。HSLは整数の度とパーセントを使うため、HEXからHSLへ変換して戻すとチャンネルが1ずれることがあります。どれか1つの形式を正とする運用にしてください。
- アルファ。
rgba()と8桁HEXは不透明度を持ちますが、6桁HEXでは表現できません。 - RGBのパーセント表記。
rgb(100%, 0%, 0%)は有効なCSSで、rgb(255,0,0)と同じ意味です。 - 広色域。
oklch()やcolor(display-p3 ...)といった新しいCSS関数は、HEXでは表せないsRGB外の色を表現できます。 - 色名。
tomatoのようなCSSキーワードは固定のHEX値に対応しますが、数が限られ、体系に組み込みにくい表現です。
ローカルで動作します
変換はブラウザー内で行う単純な計算です。貼り付けた色がアップロードされることはないため、未公開のブランドパレットを扱うときにも安心です。
HEXからRGBへの計算式と、コードでの変換
HEXコードは16進数で書かれた3バイトにすぎません。#0A84FF を 0A・84・FF に分け、各ペアを10進数に直せば（0A = 10、84 = 132、FF = 255）rgb(10, 132, 255) になります。逆方向は各チャンネルを2桁の16進数で書き、16未満なら先頭を0で埋めます。
| 言語 | HEX→RGB | RGB→HEX |
|---|---|---|
| JavaScript | parseInt(hex.slice(1, 3), 16) で赤、以下 3-5、5-7 | '#' + [r, g, b].map(c => c.toString(16).padStart(2, '0')).join('') |
| Python | tuple(int(h[i:i+2], 16) for i in (0, 2, 4)) | '#%02x%02x%02x' % (r, g, b) |
| PHP | sscanf('#0A84FF', '#%02x%02x%02x') | sprintf('#%02x%02x%02x', $r, $g, $b) |
| CSS（最近のブラウザ） | rgb(from #0A84FF r g b) | 変換不要 - どちらの表記も有効な色の値 |
関連ツール
フロントエンドの作業は色だけで終わりません。デザイントークンはJSON整形ツールで整え、小さなアイコンはBase64エンコーダーでデータURIに埋め込み、スタイルシート内のカラーコードは正規表現テスターで洗い出し、画像は画像変換ツールで変換できます。色をグラデーションや影に仕上げるには、CSSジェネレーターを使ってください。