カラーピッカー＆カラーコード変換 — RGB、HEX、HSL
画面上のどこからでも色を取得したり、HEX、RGB、HSL を瞬時に相互変換したりできます。
ヒント：Chrome や Edge では、ここに「画面から色を取得」スポイトが表示されます。ブラウザの外も含め、画面上のあらゆるピクセルの色を取得できます。
#071E93rgb(7, 30, 147)hsl(230, 91%, 30%)HEX（#RGB または #RRGGBB）、rgb()、hsl()、または単なる「r, g, b」— 最大 500 行。各行を HEX、RGB、HSL で表示します。色として認識できない行にはマークが付き、それ以外の行は通常どおり変換されます。
不具合や改善できそうな点を見つけましたか？いただいたメッセージはすべて読み、すぐに対応します。
どんな色でも HEX、RGB、HSL の間で瞬時に変換できます。ピッカーで色を選んだり、HEX コードを貼り付けたり、RGB や HSL の値を入力したりできるほか、画面スポイトを使えば、別のアプリの中も含めディスプレイ上のどのピクセルの色でも取得できます。すべての形式が常に同期し、それぞれ CSS ですぐ使える文字列をコピーできます。
パレットをまるごと変換したいときは、色のリストを 1 行に 1 つずつ一括変換ボックスに貼り付けてください。各行が HEX、RGB、HSL に変換されて 1 つの表にまとまり、CSV としてダウンロードできます。
使い方
- ビジュアルピッカーで色を選ぶか、いずれかの欄（HEX、RGB、HSL）に入力します。または「画面から色を取得」をクリックし、ブラウザの外も含めディスプレイ上の任意のピクセルをクリックします。
- 他のすべての形式が瞬時に更新されます。
- 必要な形式の横にあるコピーをクリックします。値はそのまま CSS に貼り付けられます。
- 多くの色を変換するには、変換ツールの下にある一括変換ボックスに 1 行に 1 つずつ貼り付け、表を CSV でダウンロードします。
よくある質問
HEX、RGB、HSL の違いは何ですか？
同じ色を異なる方法で表しています。HEX（#071E93）はコンパクトで、Web で最も一般的な表記です。RGB（rgb(7, 30, 147)）は赤・緑・青の成分を表し、rgba() で透明度を加えるときに便利です。HSL（hsl(229, 91%, 30%)）は色相・彩度・明度を表し、色を明るくしたり落ち着かせたりといった調整に最も直感的です。
CSS で HSL を使うべきなのはどんなときですか？
色のバリエーションが必要なときに HSL を使いましょう。色相と彩度を固定して明度だけを変えれば、ブランドカラーの明るい色調と暗い色調を一貫して作れます。HEX の値を当て推量するよりずっと簡単です。
3 桁の HEX コードに対応していますか？
はい。#fff や #1a9 のような省略形は、自動的に 6 桁の完全な形（#ffffff、#11aa99）に展開されます。
RGB から HEX への変換は正確ですか？
はい。HEX は RGB を 16 進数で書いただけなので、両者の変換はどちらの方向にも正確です。HSL との往復変換では丸めにより値が ±1 ずれることがありますが、実際には見分けがつきません。
複数の色をまとめて変換できますか？
はい。「一括変換」ボックスに最大 500 色を 1 行に 1 つずつ貼り付けてください。HEX（#fff や #071E93）、rgb()、hsl()、素の「r, g, b」の 3 つ組のいずれも使えます。各行が HEX、RGB、HSL の値と色見本付きで表に表示され、色として認識できない行は印が付きますが、他の行の処理は止まりません。「CSV をダウンロード」で表全体を保存できます。
画面スポイトはどのように動作しますか？
ブラウザ標準の EyeDropper API を使っています。ボタンをクリックするとカーソルが拡大ルーペになり、このページ、別のタブ、まったく別のアプリケーションなど、どこのピクセルでもクリックすればその色を正確に取得できます。何も記録・アップロードされず、API が返すのはクリックした 1 色だけです。Chrome と Edge で対応しており、Firefox と Safari はまだ対応していません。
早見表：3 つのカラー表記
• HEX（#071E93）— 16 進数 6 桁で、チャンネルごとに 2 桁。最もコンパクトな表記で、多くのデザインツールや CSS のコードベースで標準です。
• RGB（rgb(7, 30, 147)）— 各チャンネル 0〜255。アルファ透明度が必要なときは rgba() か、新しい rgb(r g b / a) 構文を使います。
• HSL（hsl(229, 91%, 30%)）— 色相環上の色相（0〜360°）、彩度、明度。人が最も編集しやすい表記で、数値を 1 つ変えるだけで同じ色相の明るい版、暗い版、落ち着いた版が得られます。
実践的なワークフロー：ブランドカラーは HEX で定義し、HSL で操作し（明度を動かして明るい色調・暗い色調を作る）、ライブラリや Canvas API が数値のチャンネルを求めるときは RGB を使いましょう。