カラーピッカー＆パレット抽出ツール - 画像から色を取得

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

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

はい。無料で、アカウント登録は不要、画像サイズや抽出できるパレット数に制限もありません。インストールするものは何もなく、ツール全体が1つのウェブページで完結します。