画像カラーコード抽出：どんな色でもHEXコードがわかる
写真やスクリーンショットの任意のピクセルをクリックして、HEX、RGB、HSL、HSV、CMYKコードと最も近い色の名前を取得できます。ルーペで正確なピクセルを狙え、各コードはワンクリックでコピーできます。
画像から色を抽出する目的
ウェブサイトとアプリ
- ロゴからブランドカラーをHEXコードとしてコピーしてCSSに使う
- サイトのスクリーンショットからボタンや背景の色を合わせる
- 公開中のページがデザイン通りの色になっているか確認する
- 抽出した色をCSS変数やTailwindの設定に変換する
ブランドとマーケティング
- スタイルガイドがないクライアントのロゴの色を調べる
- スライドやSNS投稿、チラシのブランドカラーを統一する
- 商品写真に合うテキストやボタンの色を選ぶ
- 印刷用の目安としてCMYK値を取得する
アート、手芸、暮らし
- 参考写真から肌や空、髪の色を絵の参考として抽出する
- お気に入りの写真の色を裁縫や編み物の参考として保存する
- ペンキを買う前に壁やソファの色のコードを調べる
- tomatoやdodgerblueのように色を名前で表現する
画像から色を抽出する方法
- 1
画像を追加する
このページ上部の枠に画像をドロップするか、クリックして選択、またはスクリーンショットを貼り付けてください。JPG、PNG、WebP、HEICなど一般的な形式に対応しています。手元に画像がない場合は「サンプルを試す」をクリックしてください。
- 2
欲しいピクセルをクリック
画像の上でポインターを動かすと、周囲15×15ピクセルをルーペが拡大表示するので、どのピクセルが選ばれるか確認できます。クリックして決定。スマホでは長押ししてドラッグし、指を離してください。
- 3
コードをコピー
HEX、RGB、HSL、HSVまたはCMYKの横にあるコピーボタンをクリックしてください。選んだ色はそれぞれ「あなたの色」にも追加されるので、最後にまとめて書き出せます。
画像内の色のHEXコードを調べる方法
画像を追加し、調べたい場所をクリックするだけです。HEXコードが大きなカラーサンプルとともにすぐ表示され、デザインアプリやサイト、メッセージにそのままコピーできます。
不透明なピクセルの場合、カラーコードはそのまま正確な値になります。縮小されたプレビューではなく元のフルサイズ画像から読み取るため、1200万画素の写真内の小さな部分でも本来の色が保たれます。
これが重要な理由は、写真にはノイズがあるからです。隣り合う2ピクセルでも、晴れた空のような場所で数段階色が違うことがあります。ルーペは中心のピクセルを示すので、クリックする前にどのコードになるかわかります。
PNGのスクリーンショットでは、ボタンのような単色領域のピクセルは通常同じコードになります。JPGでは、圧縮の影響が大きい端や文字の近くを避けて選びましょう。
すべてのコードはウェブ標準のsRGB値です。iPhoneの一部の写真はより広い色域を持ちますが、これらはsRGBに変換されるため、非常に鮮やかな色がやや控えめなコードになることがあります。
画面上のどこからでも色をスポイトで抽出
パソコンのChrome、EdgeまたはOperaでは、「画面から選択」をクリックしてください。ポインターがスポイトツールになり、ウェブサイトやアプリ、ドキュメントなど画面上の任意のピクセルを読み取れます。任意の場所をクリックすると、ほかの選択と同じようにカラーコードがここに表示されます。
Firefox、Safari、スマホのブラウザはこの方法で画面を読み取れないため、このボタンは表示されません。代わりにスクリーンショットを撮り、Ctrl+V（Macの場合はCmd+V）で貼り付けて選択してください。
スマホでは、スクリーンショットを撮って写真から追加してください。どちらの方法でも、拡張機能やアプリのインストールは不要です。
写真からHEX、RGB、HSLコードを取得
選択した色はすべて5つの形式で表示され、それぞれにコピーボタンが付いています。紫色のピクセルを例にすると：
- HEX：#8338ec、多くのサイトやデザインアプリで使われる短いコード
- RGB：rgb(131 56 236)、赤・緑・青の量を0〜255で表したもの
- HSL：hsl(265 83% 57%)、色相・彩度・明度
- HSV：色相265°、彩度76%、明度93%。多くのデザインアプリのカラーピッカーで使われるモデル
- CMYK：シアン44%、マゼンタ76%、イエロー0%、ブラック7%。印刷用の目安
HEX、RGB、HSLのコードはそのままCSSとして有効なので、スタイルシートに直接貼り付けられます。PNGロゴの輪郭のようにピクセルが半透明な場合でも透明度情報は保持され、ブラウザが読み取れる範囲で最も正確な色になります。
色の名前を調べる
選んだ色にはそれぞれ名前も付きます。ピッカーはCSSで定義された148色の名前の中から最も近いものを探し、「近い色名」として表示します。例えば紫のピクセルなら「近い色名：blueviolet」のように表示されます。この名前を使えば色を言葉で説明したり、そのままCSSに貼り付けたりできます。
どの色コードを使うべきか
ほとんどの用途ではHEXを使いましょう。サイトやデザインアプリの多くが対応しています。他のコードは次のような場合に役立ちます：
- 赤・緑・青を個別の数値で求められるアプリならRGB
- 色を手動で明るく、暗く、または控えめにしたいならHSLやHSV
- 印刷用のおおよその目安としてはCMYK。プリンタープロファイルではなく簡易な計算式によるものなので、最終的な色合わせは印刷業者に確認してください
スクリーンショット、ロゴ、写真から色を抽出
スマホの写真からウェブページのスクリーンショットまで、どんな画像でも使えます。主な用途：
- スクリーンショット：コピーしてここに貼り付ければ、サイトやアプリの色を取得できます
- ロゴ：ブランドのスタイルガイドがなくても、ロゴファイルからブランドカラーを抽出できます
- 写真：空やドレス、塗装された壁の色を写真から取得できます
選んだ色を保存する
選んだ色はすべて「あなたの色」に新しい順で追加され、最大24色まで保存できます。各色のコピーや削除、リストのクリアが可能です。その後、リスト全体を以下の形式で書き出せます：
- スタイルシートに貼り付けられるCSS変数
- Tailwindの設定スニペット
- 各色のHEX、RGB、HSLを含むJSON
- 共有用のサンプル画像（PNG）
リストはブラウザに保存されるため、再読み込みや別の画像を開いた後も残ります。保存されるのは色のコードのみで、画像は保存されません。リストが満杯になると、最も古い色から削除されます。
画像の主要な色を見る
ピッカーでは画像の主要な6色も表示されます。クリックすると「あなたの色」に追加されます。画像全体から4〜12色のパレットとして主要な色を抽出したい場合は、パレット抽出ツールをご利用ください。
画像をプライベートに保つ無料のオンラインカラーピッカー
このカラーピッカーは無料で、登録もアカウントも不要です。色のエクスポートにも必要ありません。画像はスマホやパソコン上で開かれ、アップロードされることはありません。ブラウザ上で動作するため、ダウンロードするアプリもありません。
- スマホ、タブレット、パソコンに対応。タッチスクリーンでは指の上にルーペが表示されるため、指でピクセルが隠れません。
- キーボードでも操作できます。Tabキーで画像に移動し、矢印キーで十字カーソルを動かし（Shiftで10px移動）、Enterキーで選択します。
- JPG、PNG、WebP、AVIF、GIF、BMP、SVG、HEIC、HEIF、TIFFファイル（最大50MB）に対応。GIFは最初のフレームを使用します。
- iPhoneのHEIC写真もそのまま開けます。変換の必要はありません。
- 一度に処理できるのは1枚の画像のみです。別の画像を開いても「あなたの色」はそのまま保持されます。
よくある質問
色コード、スマホ、画面からの色抽出、ペンキの色について