Grab the exact color from any image

JPG、PNG、WebP、GIFのいずれかをアップロードし、表示された画像の好きな場所をクリックしてください——カーソル下の正確なピクセルが抽出され、HEX、RGB、HSLで表示され、各形式をワンクリックでコピーできます。ブランドカラーの一致、写真からの色見本の採取、デザインモックアップからのアクセントトーンの取得などに最適です。

どのピクセルをクリックしても、このカラーピッカーツールがそのHEXカラーコード（例：#FF6B35）をRGBやHSLと並べて表示します — スタイルシートやデザイントークン、HTML属性にそのまま貼り付けられる、HTML/CSSと同じカラーコードです。Copyを押せばワンクリックでHEXコードを取得できます。

画像は長辺が320ピクセルになるようダウンサンプリングされ、各ピクセルはチャンネルごとの上位4ビットでバケットに振り分けられます。最も多く含まれるバケットは完全な8ビットカラーに平均化され、頻度順にソートされて、パレットとして返されます。結果は通常、画像を視覚的に要約する5〜24色の主要な色になります。

はい。ダウンロードボタンは2つの形式を生成します。:rootセレクターに貼り付けられる状態のCSS変数ブロック（--color-1、--color-2…）と、各色のhex、RGB成分、重み付けのパーセンテージを含むJSONファイルです。どちらの形式も、デザイントークン、Tailwindの設定、パレットライブラリにすっきりと組み込めます。

いいえ。カラーの抽出とパレットの生成は、HTMLのcanvas APIを使ってすべてブラウザ内で行われます。画像はデバイス上に留まるため、未公開の商品写真、下書きのモックアップ、NDA下のブランド素材にも安全に使えます。

ブランドアイデンティティの制作では、5〜8色がちょうどよい範囲です。アクセントの選択肢を薄めることなく、主要なテーマを捉えられます。データの可視化では、十分な数のカテゴリー色を確保できるよう10〜16色をおすすめします。スライダーで5〜24の範囲から選べます。

アルファ値が128未満のピクセルは無視されるため、透明な背景が「背景」の色でパレットを汚すことはありません。これにより、画像カラーピッカーは、商品の切り抜き、ステッカーアート、切り出した被写体に特に適しています。

HEX（#RRGGBB）は最もコンパクトで、CSS、Figma、Sketchが標準で使う形式です。RGBは0〜255の3つの成分値を表示し、画像データをプログラムで扱うときに便利です。HSL（色相・彩度・明度）は色の調整を直感的に行えます。色相をずらせば色系統が変わり、明度を調整すれば明るめ・暗めの色合いを作れます。

Yes. Free, free account required to download, no limits on image size or number of palettes extracted. There is nothing to install — the entire tool is a single web page.

No image needed. The Color Picker & Wheel at the top works on its own — drag the saturation/brightness square and the hue slider, or type any HEX, RGB or HSL value to dial in an exact color. Uploading an image is optional, just for eyedropping colors out of a photo.

Pick your base color and the Color harmonies panel instantly builds complementary, analogous, triadic, split-complementary, tetradic and monochromatic schemes using color-wheel theory. Click any swatch to copy its HEX code.

単体の「カラーピッカー＆カラーホイール」で色を調整すると、パネルに純白および純黒に対するコントラスト比が、WCAG評価（AAA、AA、AA Large、Fail）とともに表示されます。テキストやボタンの色を確定する前にこれを使えば、読みやすさを保ち、WCAG 2.1のアクセシビリティガイドラインを満たせます。

はい。単独の Color Picker & Wheel は、指定した HEX、RGB、HSL のいずれの値の隣にも、最も近い名前付き CSS カラーを表示します。これは、当てずっぽうにせずブリーフ、チケット、デザイン仕様書で色合いを素早く説明するのに便利です。

カラーピッカー＆ホイールで「Random」をクリックすると新しい色にジャンプでき、その下の「Color harmonies」パネルを使うと、その色から作られた補色、類似色、トライアド、その他の調和のとれたパレットを確認できます。既存の画像からサンプリングするのではなく、ゼロからデザインするときに出発点を素早く見つける方法です。

パレットの上にある Size ドロップダウンを使って、5、8、10、16、24 の主要色から選んでください。変更するとパレットが即座に再計算されます。5 のような小さいサイズを使ってすっきりしたブランドパレットを作り、それに picked-color スポイトを組み合わせれば、自動抽出では平均化されて消えてしまいがちな正確なアクセント色を 1〜2 色つかみ取れます。

はい。スタンドアロンの Color Picker & Wheel は、スウォッチのすぐ下に、現在の色の純白および純黒に対するコントラスト比を表示し、WCAGのしきい値（7:1、4.5:1、3:1）に従って AAA、AA、AA Large、Fail のいずれかでラベル付けします。デザインの色を確定する前に、テキストと背景の組み合わせがアクセシビリティ基準を満たしているか確認するのに使えます。

カラーピッカー＆ホイールは、ピッカー・HEXボックス・RGB/HSLフィールドで指定した色を、最も近い標準のCSSカラー名に自動的に対応させ、スウォッチの横に「最も近い名前」として表示します。色を言葉で表現したり、最も近いウェブセーフの同等色を見つけたりするのに手早い方法です。

はい。アップロードした画像をクリックまたはタップするたびに、直前のものを置き換えるのではなく Picked Colors リストに新しいスウォッチが追加されるので、写真のさまざまな部分から正確なピクセル色のカスタムセットを作り上げられます。個々のスウォッチは × ボタンで削除でき、Clear picked でリスト全体を消去できます。

はい。Color Picker & Wheel の Random ボタン（シャッフルアイコン）は、1クリックで新しい色相、彩度、明度の組み合わせにジャンプします。創作の行き詰まりを打破したり、手動では入力しないようなパレットを探索したりするのに便利です。HEX、RGB、HSL、およびその下のハーモニースウォッチがすべて一緒に更新されます。

タッチスクリーンでは、画像上を指でドラッグすると、その下の色がライブのフローティングスウォッチでプレビューされ、指を離すとそのピクセルがそのまま「Picked Colors」リストに追加されます。別途確定のタップは不要です。同じパレットサイズのドロップダウンや書き出しボタンも、モバイルで同じように動作します。

はい。ページ上部のカラーホイールには「ランダム」ボタンがあり、クリックするとランダムな色に切り替わり、そのHEX・RGB・HSLコード、最も近い色の名前、白背景・黒背景でのコントラスト比、そして補色・類似色・トライアド・スプリット補色・テトラード・モノクロといったハーモニーセット一式が瞬時に表示されます。配色の出発点を手早く探るのに便利な方法です。

このツールは、画面をリアルタイムで読み取るのではなく、アップロードした画像または内蔵のカラーホイールから色をサンプリングします。スクリーンカラーピッカーの代わりとして最も手軽な方法は、スクリーンショットを撮ってこのページにドロップし、欲しい色のピクセルをクリックすることです — 拡張機能をインストールしなくても同じHEX・RGB・HSLコードが得られ、スクリーンショットがブラウザの外に送信されることもありません。