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

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

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

画像は不要です。上部のカラーピッカー＆ホイールはそれだけで使えます。彩度／明度の四角と色相スライダーをドラッグするか、HEX・RGB・HSLの値を入力して正確な色を決められます。画像のアップロードは任意で、写真から色をスポイト抽出したい場合のみです。

ベースカラーを選ぶと、カラーハーモニーパネルがカラーホイール理論を用いて、補色・類似色・トライアド・スプリットコンプリメンタリー・テトラード・モノクロマティックの配色を即座に組み立てます。任意のスウォッチをクリックすると、そのHEXコードをコピーできます。

In the standalone Color Picker & Wheel, dial in your color and the panel shows its contrast ratio against pure white and pure black along with the WCAG rating — AAA, AA, AA Large, or Fail. Use this before finalizing a text or button color so it stays readable and meets WCAG 2.1 accessibility guidelines.

Yes. The standalone Color Picker & Wheel shows the closest matching named CSS color next to whatever HEX, RGB or HSL value you've dialed in, which is handy for quickly describing a shade in a brief, ticket or design spec without guessing.

Click Random in the Color Picker & Wheel to jump to a new color, then use the Color harmonies panel below it to see complementary, analogous, triadic and other coordinated palettes built from that color — a quick way to find a starting point when you're designing from scratch rather than sampling an existing image.

Use the Size dropdown above the palette to choose 5, 8, 10, 16 or 24 dominant colors — the palette recalculates instantly as you change it. Combine a small size like 5 for a clean brand palette with the picked-color eyedropper to grab one or two exact accent shades the automatic extraction might average away.

Yes — the standalone Color Picker & Wheel shows your current color's contrast ratio against pure white and pure black right under the swatch, labelled AAA, AA, AA Large or Fail per the WCAG thresholds (7:1, 4.5:1, 3:1). Use it to check a text/background pairing meets accessibility standards before you lock in a design color.

The Color Picker & Wheel automatically matches whatever color you've dialed in — via the picker, HEX box, or RGB/HSL fields — to its closest standard CSS color name, shown as 'Closest name' next to the swatch. It's a quick way to describe a color verbally or find its nearest web-safe equivalent.

Yes — every click or tap on the uploaded image adds a new swatch to your Picked Colors list rather than replacing the last one, so you can build up a custom set of exact pixel colors from different parts of a photo. Remove any single swatch with its × button, or clear the whole list with Clear picked.

Yes — the Random button (shuffle icon) in the Color Picker & Wheel jumps to a new hue, saturation and brightness combination in one click, useful for breaking creative block or exploring a palette you wouldn't have typed in manually. HEX, RGB, HSL and the harmony swatches below all update together.

On a touchscreen, drag your finger across the image to preview the color under it in a live floating swatch, then lift your finger to add that exact pixel to your Picked Colors list — no separate confirm tap needed. The same palette-size dropdown and export buttons work identically on mobile.