カラーピッカー&パレット抽出器 - 画像から色を選ぶ

任意のJPG、PNG、WebP、GIFをアップロードし、表示された画像のどこでもクリックしてください。カーソル下の正確なピクセルはサンプリングされ、HEX、RGB、HSLの各フォーマットでワンクリックでコピーできます。ブランドカラーを合わせたり、写真からスウォッチを試したり、デザインモックアップからアクセントトーンを取ったりするのにぴったりです。

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

はい。ダウンロードボタンは2つのフォーマットを生成します。CSS変数ブロックは:rootセレクター(--color-1, --color-2...)に貼り付ける準備ができており、もう一つは各色の16進、RGB成分、重みパーセンテージを含むJSONファイルです。どちらのフォーマットもデザイントークン、Tailwindの設定、パレットライブラリにきれいに統合できます。

いいえ、色の選択やパレット抽出はHTMLキャンバスAPIを使ってブラウザ内で完全に行えます。画像はデバイスに残るため、未公開の製品写真やドラフトモックアップ、NDAのブランド資産に安全に使えます。

ブランドアイデンティティの仕事では、5〜8色が最適なポイントです。アクセントの選択肢を薄めずに、支配的なテーマを捉えています。データの可視化には、十分なカテゴリカラーを用意するために10〜16色を推奨しています。スライダーで5から24まで選べます。

アルファが128未満のピクセルは無視されるため、透明な背景がパレットを「背景」色で汚染しません。このため、Image Color Pickerは製品の切り抜き、ステッカーアートワーク、そして孤立した被写体に特に優れています。

HEX(#RRGGBB)は最もコンパクトで、CSS、Figma、Sketchがデフォルトで使っています。RGBは0から255までの3つの成分値を表示し、画像データをプログラム的に扱う際に有用です。HSL(色相、彩度、明度)は直感的に色の調整に便利です。色相を変えるには色相を変え、色合いや色合いの明るさを調整します。

はい。無料、アカウント不要、画像サイズや抽出パレット数の制限なし。インストールするものは何もなく、ツール全体が単一のウェブページに過ぎません。