カラーピッカー・画像から色を抽出（無料ツール）
登録不要 無料 ブラウザ完結
このツールの特徴: 画像をアップロードするだけでスポイト（ルーペ付き8倍拡大）で色を取得し、HEX・RGB・HSL・HSV・CMYKの5形式を同時表示。Median Cutアルゴリズムで主要8色を自動抽出し、CSS変数・SCSS・JSON形式で一括出力。補色・トライアドなど配色提案も。日本語対応・登録不要・ブラウザ完結。
画像をドラッグ&ドロップ
または
対応形式: JPG / PNG / WebP / GIF / SVG
#000000
インディゴ / Indigo 白: — 黒: —
HEX
RGB
HSL
HSV
CMYK
手動でカラーを調整する
カラーパレット
画像を読み込んで「パレット自動生成」をクリック、またはスポイトで色を取得してください。
保存済みパレット
選択中の色をベースにした配色提案
補色（Complementary）
類似色（Analogous）
トライアド（Triadic）
テトラード（Tetradic）
選択色を使ったグラデーション生成
パレットをコード出力
パレットが空の場合は「パレット」タブで色を追加してください。
コピーしました
1
画像を読み込む（4通りの方法）
- D&D: 点線エリアに画像ファイルをドラッグ
- ファイル選択: 「ファイルを選択」ボタンで選ぶ
- URL: 画像URLを貼り付けて「読み込む」
- クリップボード: Ctrl+V（スクリーンショット等）
2
スポイトで色を取得
画像上にカーソルを乗せるとルーペ（8倍拡大）が追従。クリックした点のピクセルの色が即座に5形式（HEX/RGB/HSL/HSV/CMYK）で表示されます。
3
パレットを自動生成
「パレット自動生成」ボタンで Median Cut アルゴリズムが画像全体を解析し、主要色を最大8色抽出します。抽出後はパレット内の色をクリックして詳細表示できます。
4
CSS/SCSS/JSONで出力
「コード出力」タブでCSS変数・SCSS変数・JSON形式に一括変換。ワンクリックでコピーしてプロジェクトにそのまま貼り付けられます。
プライバシー安心: 画像はすべてブラウザ内でCanvas APIによって処理されます。サーバーへのアップロードは一切なく、外部に画像データが送信されることはありません。
主要な画像カラーピッカーツールと本ツールの機能比較です（2026年5月調査）。
| ツール | 形式 | ルーペ | パレット自動生成 | 配色提案 | WCAG | コード出力 | 日本語 |
|---|---|---|---|---|---|---|---|
| 本ツール（tool-box.jp） | ✔ 5形式+名称 | ✔ 8倍 | ✔ 8色（Median Cut） | ✔ 4種 | ✔ | ✔ CSS/SCSS/JSON | ✔ 完全日本語 |
| imagecolorpicker.com | △ 4形式 | ✗ | △ パレット | ✗ | ✗ | ✗ | ✗ 英語 |
| studioasari（画像カラーピッカー） | △ 3形式 | ✗ | ✗ | ✗ | ✗ | ✗ | ✔ |
| digrart.jp | ✔ 4形式 | ✗ | ✔ 8色 | ✗ | ✗ | △ CSS変数のみ | ✔ |
| en.rakko.tools/64 | △ 3形式 | ✗ | ✗ | ✗ | ✗ | ✗ | △ 部分 |
| coolors.co（image picker） | ✔ | ✗ | ✔ 5色 | ✔ | ✔ | △ 要登録 | ✗ 英語 |
※ 2026年5月現在の調査。各サービスの仕様は変更される場合があります。
Web標準
HEX（16進数）
RGB値を16進数2桁ずつ並べたWeb最標準形式。CSS・HTML・デザインツール全般で使用。#FF5733のように6文字で表現。
加法混色
RGB
赤・緑・青の光の強度を0〜255で表す加法混色。モニター・スマートフォンなどの発光デバイス向け。CSS: rgb(255,87,51)
人間感覚
HSL
色相（H）・彩度（S）・明度（L）の3要素。人間の色認識に近い直感的モデル。ダークモード設計・トークン設計に最適。CSS: hsl(11,100%,60%)
デザインツール
HSV / HSB
色相（H）・彩度（S）・輝度（V/B）で表現。Photoshop・Illustrator・Figmaなどのデザインツールで広く採用。HSLと似るが明度の定義が異なる。
減法混色
CMYK
シアン・マゼンタ・イエロー・ブラックの印刷向け形式。グラフィックデザイン・名刺・パンフレットの入稿時に必須。
使い分けの目安: Web/アプリ → HEX・RGB・HSL。デザインツール → HSV。印刷入稿 → CMYK。本ツールは5形式すべてを同時表示するためワンストップで活用できます。
配色の基本パターンを理解することで、統一感・視認性・ブランドらしさを高めるパレットを作れます。
補色（Complementary）
色相環で正反対（180度）の2色。強いコントラストで視線を誘導する。CTAボタンとの組み合わせに効果的。
色相環で正反対（180度）の2色。強いコントラストで視線を誘導する。CTAボタンとの組み合わせに効果的。
類似色（Analogous）
色相環で隣接する30〜60度の3色。自然でまとまりのある穏やかな配色。背景・テキスト・アクセントの階調に使いやすい。
色相環で隣接する30〜60度の3色。自然でまとまりのある穏やかな配色。背景・テキスト・アクセントの階調に使いやすい。
トライアド（Triadic）
色相環を3等分した120度間隔の3色。バランスが良くカラフルで活気ある印象。子ども向け・エンタメ系のデザインに向く。
色相環を3等分した120度間隔の3色。バランスが良くカラフルで活気ある印象。子ども向け・エンタメ系のデザインに向く。
テトラード（Tetradic）
色相環を4等分した90度間隔の4色（正方形配色）。豊富なバリエーションを持つが、バランスを取るのが難しい。1色を主役にして残りをアクセントとして使うと良い。
色相環を4等分した90度間隔の4色（正方形配色）。豊富なバリエーションを持つが、バランスを取るのが難しい。1色を主役にして残りをアクセントとして使うと良い。
実践ヒント: ベースカラーをメインに60%、サブカラーを30%、アクセントカラーを10%の比率で使う「60:30:10ルール」が定番です。本ツールの配色提案タブで即確認できます。
🌐
Webデザイン・UI制作
- 参考サイトのスクリーンショットを読み込み、使用カラーをHEX抽出
- CSS変数として一括コピーして設計書に即貼り付け
- WCAGコントラスト比でアクセシビリティを事前確認
- Figma・Adobe XD に取り込む場合はHEXまたはRGBをコピー
🏢
ブランドカラー策定
- ロゴ画像を読み込み主要色を抽出してブランドパレットを定義
- HEX・CMYK両方を取得してブランドガイドラインに記載
- 補色・類似色でブランドカラー拡張パレットを生成
- SCSSファイルとしてエクスポートして開発チームに共有
📷
写真・イラスト
- 写真の雰囲気に合ったカラーパレットを自動抽出
- イラストのキャラクターカラーをHEXで正確に取得
- 参考写真から「この雰囲気の配色」を素早く取り出してデザインに応用
🖨
印刷・グラフィック
- Webで確認した色のCMYK値を取得して印刷入稿に使用
- RGBとCMYKの色域の違いを把握して色校正を最小化
- パントン（Pantone）近似の探索に参考値として活用
- Q このカラーピッカーは無料で使えますか？
- A はい、完全無料です。会員登録・アプリのインストールも不要で、ブラウザを開くだけでご利用いただけます。使用回数の制限もありません。
- Q 画像はサーバーにアップロードされますか？
- A いいえ。画像の処理はすべてブラウザ内のCanvas APIで完結しており、外部サーバーへの送信は一切行いません。プライバシーが完全に保護されます。
- Q 対応している画像形式は何ですか？
- A JPG・PNG・WebP・GIF・SVGに対応しています。URLからの読み込みはCORSポリシーにより一部サイトでは制限される場合があります。
- Q スポイトで取得した色が画像の色と少し違うのはなぜですか？
- A モニターのカラープロファイル（sRGB/Display P3等）やブラウザのカラーマネジメントにより、実際の表示色と若干異なる場合があります。印刷入稿ではCMYK値を参考に色校正を行ってください。
- Q Median Cutアルゴリズムとは何ですか？
- A 画像の全ピクセルをRGB空間の立方体として捉え、最も色の幅が広い軸で繰り返し2分割してクラスタリングする色量子化アルゴリズムです。各クラスタの平均色がパレットの1色となります。視覚的に目立つ色を漏らさず抽出できます。
- Q パレットはどこに保存されますか？
- A 「パレット保存」機能を使うとブラウザのLocalStorageに保存されます。同じブラウザ・デバイスであれば次回アクセス時も表示されます。ブラウザのキャッシュを消去すると削除されます。
- Q 「カラーコード変換」ツールとの違いは何ですか？
- A 「カラーコード変換（/design/color-convert/）」は手動で色を入力してHEX/RGB/HSL/CMYKを変換するツールです。本カラーピッカーは「画像から色を取得する」ことが主目的で、スポイト機能・パレット自動抽出・コード出力が追加されています。
- Q CSS変数・SCSS変数の出力形式はカスタマイズできますか？
- A 現在は --color-1: #XXXXXX; 形式（CSS）と $color-1: #XXXXXX; 形式（SCSS）で出力されます。パレットタブで色を整理してからコード出力タブで一括エクスポートしてください。
- Q スマートフォンでも使えますか？
- A はい。iPhoneのSafariやAndroidのChromeで利用できます。タッチ操作によるスポイト・スライダー操作に対応しています。カメラで撮影した写真は「ファイル選択」からアップロードいただけます。