カラーピッカー — 任意の色や画像からHEX、RGB、HSLを取得

このツールとは？

カラーピッカーは、視覚的な選択（この青の色合いや、ロゴ内の特定のピクセルなど）を、ソフトウェアが理解できる数値コードに変換します。同じ色でも、いくつかの同等の表記方法があります。HEX（#3b82f6）はCSSやデザイン引き継ぎで主流であり、RGB (59, 130, 246)は画面やコードが色を表現する方法に合致し、HSL (217°, 91%, 60%)は、人間が理解しやすい形で色相、彩度、明度を記述します。

このツールの後半部分は、画像用スポイトツールです。スクリーンショット、ロゴ、または写真をアップロードし、任意の場所をクリックしてカーソルの下の色を抽出します。これは、「この色は正確には何色か？」という疑問に答えるための標準的な方法です。 ブラウザがEyeDropper APIをサポートしている場合は、ネイティブの拡大ルーペ機能が使用されます。その他のブラウザでは、ツールが画像のキャンバスコピーからピクセル値を読み取ります。いずれの場合も処理はローカルで行われ、画像がアップロードされることはありません。

なぜこれを使うのか？

• 3つの形式を同時に表示：選択した色はすべて、HEX、RGB、HSLの形式で同時に表示され、それぞれにワンクリックでコピーできるボタンが付いています。別途変換する手間は不要です。
• 画像から選択：任意の画像をアップロードし、クリックしてそのピクセルの色を正確に抽出できます。ロゴからブランドカラーを抽出したり、スクリーンショット内の色と合わせたりするのに最適です。
• 利用可能な場合は、ブラウザのネイティブ機能である拡大鏡付きカラーピッカーを使用し、それ以外の場合はキャンバスのピクセル値を正確に読み取ります。
• ライブプレビューのスウォッチでは、現在の色が一目で確認できるため、コピーする前に選択した色を確認することができます。
• 無料、即時、完全にローカル：色の計算や画像の読み込みはすべてブラウザ内で行われます。データのアップロード、保存、記録は一切行われません。

使い方

1. カラーフィールドから色を選択するか、値を直接貼り付けたり編集したりしてください。
2. 画像から色を取得するには、画像をアップロードし、色を取得したい箇所をクリックしてください。
3. HEX、RGB、HSLの値を確認し、リアルタイムのプレビュースウォッチと併せて表示されます。
4. 必要な形式の横にある「コピー」ボタンをクリックしてください。CSS用にはHEX、コード用にはRGBまたはHSLです。

例

入力

Clicking the blue area of an uploaded logo

出力

HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)

3つの表記はいずれもまったく同じ色を表しています。スタイルシートやデザインツールではHEXを、コードで各チャンネルの値が必要な場合はRGBを、最後の数値だけを変更して明るい色や暗い色のバリエーションを作成したい場合はHSLを使用してください。

どの作業にどのカラーフォーマットを使うか

現代のCSSでは、色が指定できる場所であればどこでもこれら3つの形式すべてが受け入れられるため、選択は互換性の問題ではなく、ワークフローの問題となります。通常、チームではデザイントークンではHEXを標準とし、バリエーションを検討する際にはHSLを使用します。例えば、色相を変えずに実用的なホバー状態を実現するために、明度を10～15ポイント変更するといった具合です。

選択した色から完成したCSSまで

色の選択は、通常、スタイリング作業の第一歩です。印刷用のCMYKや、広色域CSS用のOKLCH値など、他の表記形式で同じ色が必要な場合は、このカラーピッカーでの作業が終わった後、カラーコンバーターがその作業を引き継ぎます。

選択した色は、多くの場合、そのまま視覚効果に反映されます。「Box Shadow Generator」ではHEX値を入力することでリアルな影を表現でき、「Border Radius Generator」を使って作成した角が丸いカードが、その外観を完成させます。

→ カラーコンバーター · Box Shadow ジェネレーター · Border Radius ジェネレーター

よくある質問