画像からのカラーピッカー - HEX および RGB カラーコードを取得

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（色相・彩度・明度）は色の調整を直感的に行えます。色相をずらせば色系統が変わり、明度を調整すれば明るめ・暗めの色合いを作れます。

はい。ブラウザ上で動作するため、アカウントは必要ありません。インストールするものは何もなく、検査するパレットの数に制限もありません。

画像は必要ありません。上部のカラーピッカーとホイールは単独で機能します。彩度/明るさの四角形と色相スライダーをドラッグするか、任意の HEX、RGB、または HSL 値を入力して正確な色をダイヤルします。画像のアップロードはオプションで、写真から色を抽出するためだけです。

ベースカラーを選択すると、カラーハーモニーパネルは、カラーホイール理論を使用して、補色、相似、3次、分割補色、4次、および単色のスキームを即座に構築します。任意のスウォッチをクリックして、その 16 進コードをコピーします。

単体の「カラーピッカー＆カラーホイール」で色を調整すると、パネルに純白および純黒に対するコントラスト比が、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コードが得られ、スクリーンショットがブラウザの外に送信されることもありません。

はい — Pixoate はバッチ処理と一括処理をサポートしています。バッチ モードに切り替え、プレミアムでは最大 60 枚、プロでは最大 200 枚の画像を追加し、オプションを一度設定すると、1 つのスプレッドシート (画像ごとにパレット行) をダウンロードする前に、すべての画像が同じ設定で処理されます。一括処理はプレミアム機能です。出力にはシングル モードと同じ品質と設定が使用されます。

はい - 一括処理では、設定を 1 回行うだけで、バッチ内のすべてのアイテムに適用されます (Premium では最大 60 枚、Pro では 200 枚の画像)。項目ごとに設定を繰り返す必要はなく、パレットの抽出はブラウザで実行されます。完成したスプレッドシートのみがダウンロード用に保存されます。

ほとんどの場合、原因は次の3つのいずれかです。ファイルが無料プランのアップロード上限11 MB を超えています。Premium では50 MB、Pro では120 MB まで対応しています。または、このツールが対応していない形式です。アップロード欄に表示される対応形式をご確認ください。あるいは、実際のファイル形式がファイル名に示された形式と異なります。名前を変更してもファイルの中身は変わらないため、見た目は有効な画像でも拒否されることがあります。

ファイル内に実際に何が含まれているかを報告するため、空白または意外な結果は通常、そのデータが存在しなかったこと、つまり最後にデータを保存したアプリによって削除されたか、アップロード時にプラットフォームによって削除されたか、元のデータに存在しなかったことを意味します。メッセージング アプリを介したコピーではなく、カメラまたはソースから直接取得した、変更されていないオリジナル ファイルを試してください。

いいえ。アカウントなしで Color Picker を実行し、無料の結果をダウンロードできます。また、ウォーターマークもありません。プレミアムは、制限が厳しくなり始めたときに購入するものです。1 回のバッチで最大 60 ファイル、より大きなアップロード、1 日の上限なし、元の解像度の結果が得られます。ダウンロードのステップでは、開始する前には表示されなかったものは何も表示されません。

いいえ。カラー Picker はデスクトップとスマートフォンのブラウザで使えます。インストール、トライアル開始、ライセンス購入は不要です。必要な機能かどうかは、サンプルではなく実際に困っているファイルでお試しください。