カラーピッカー・画像から色を抽出（無料ツール）
画像をアップロードするだけでスポイトで色を取得し、HEX・RGB・HSL・HSV・CMYKの5形式で表示。主要8色を自動抽出・パレット生成・CSS変数/SCSS/JSON出力。補色・トライアドなど配色提案も。登録不要・ブラウザ完結。
最終更新：2026年5月14日
画像をドラッグ&ドロップ
または
対応形式: JPG / PNG / WebP / GIF / SVG
手動でカラーを調整する
画像を読み込んで「パレット自動生成」をクリック、またはスポイトで色を取得してください。
保存済みパレット
選択中の色をベースにした配色提案
補色（Complementary）
類似色（Analogous）
トライアド（Triadic）
テトラード（Tetradic）
選択色を使ったグラデーション生成
パレットをコード出力
パレットが空の場合は「パレット」タブで色を追加してください。
使い方ガイド
- D&D: 点線エリアに画像ファイルをドラッグ
- ファイル選択: 「ファイルを選択」ボタンで選ぶ
- URL: 画像URLを貼り付けて「読み込む」
- クリップボード: Ctrl+V（スクリーンショット等）
他ツールとの違い（imagecolorpicker / rakko / digrart との比較）
主要な画像カラーピッカーツールと本ツールの機能比較です（2026年5月調査）。
| ツール | 形式 | ルーペ | パレット自動生成 | 配色提案 | WCAG | コード出力 | 日本語 |
|---|---|---|---|---|---|---|---|
| 本ツール（tools-navi.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月現在の調査。各サービスの仕様は変更される場合があります。
色の形式解説（HEX・RGB・HSL・HSV・CMYK）
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
シアン・マゼンタ・イエロー・ブラックの印刷向け形式。グラフィックデザイン・名刺・パンフレットの入稿時に必須。
カラーパレット・配色理論（補色・トライアド・テトラード）
配色の基本パターンを理解することで、統一感・視認性・ブランドらしさを高めるパレットを作れます。
色相環で正反対（180度）の2色。強いコントラストで視線を誘導する。CTAボタンとの組み合わせに効果的。
色相環で隣接する30〜60度の3色。自然でまとまりのある穏やかな配色。背景・テキスト・アクセントの階調に使いやすい。
色相環を3等分した120度間隔の3色。バランスが良くカラフルで活気ある印象。子ども向け・エンタメ系のデザインに向く。
色相環を4等分した90度間隔の4色（正方形配色）。豊富なバリエーションを持つが、バランスを取るのが難しい。1色を主役にして残りをアクセントとして使うと良い。
シーン別活用ガイド（Web・ブランディング・写真・印刷）
Webデザイン・UI制作
- 参考サイトのスクリーンショットを読み込み、使用カラーをHEX抽出
- CSS変数として一括コピーして設計書に即貼り付け
- WCAGコントラスト比でアクセシビリティを事前確認
- Figma・Adobe XD に取り込む場合はHEXまたはRGBをコピー
ブランドカラー策定
- ロゴ画像を読み込み主要色を抽出してブランドパレットを定義
- HEX・CMYK両方を取得してブランドガイドラインに記載
- 補色・類似色でブランドカラー拡張パレットを生成
- SCSSファイルとしてエクスポートして開発チームに共有
写真・イラスト
- 写真の雰囲気に合ったカラーパレットを自動抽出
- イラストのキャラクターカラーをHEXで正確に取得
- 参考写真から「この雰囲気の配色」を素早く取り出してデザインに応用
印刷・グラフィック
- Webで確認した色のCMYK値を取得して印刷入稿に使用
- RGBとCMYKの色域の違いを把握して色校正を最小化
- パントン（Pantone）近似の探索に参考値として活用
よくある質問（FAQ）
- このカラーピッカーは無料で使えますか？
- はい、完全無料です。会員登録・アプリのインストールも不要で、ブラウザを開くだけでご利用いただけます。使用回数の制限もありません。
- 画像はサーバーにアップロードされますか？
- いいえ。画像の処理はすべてブラウザ内のCanvas APIで完結しており、外部サーバーへの送信は一切行いません。プライバシーが完全に保護されます。
- 対応している画像形式は何ですか？
- JPG・PNG・WebP・GIF・SVGに対応しています。URLからの読み込みはCORSポリシーにより一部サイトでは制限される場合があります。
- スポイトで取得した色が画像の色と少し違うのはなぜですか？
- モニターのカラープロファイル（sRGB/Display P3等）やブラウザのカラーマネジメントにより、実際の表示色と若干異なる場合があります。印刷入稿ではCMYK値を参考に色校正を行ってください。
- Median Cutアルゴリズムとは何ですか？
- 画像の全ピクセルをRGB空間の立方体として捉え、最も色の幅が広い軸で繰り返し2分割してクラスタリングする色量子化アルゴリズムです。各クラスタの平均色がパレットの1色となります。視覚的に目立つ色を漏らさず抽出できます。
- パレットはどこに保存されますか？
- 「パレット保存」機能を使うとブラウザのLocalStorageに保存されます。同じブラウザ・デバイスであれば次回アクセス時も表示されます。ブラウザのキャッシュを消去すると削除されます。
- 「カラーコード変換」ツールとの違いは何ですか？
- 「カラーコード変換（/design/color-convert/）」は手動で色を入力してHEX/RGB/HSL/CMYKを変換するツールです。本カラーピッカーは「画像から色を取得する」ことが主目的で、スポイト機能・パレット自動抽出・コード出力が追加されています。
- CSS変数・SCSS変数の出力形式はカスタマイズできますか？
- 現在は --color-1: #XXXXXX; 形式（CSS）と $color-1: #XXXXXX; 形式（SCSS）で出力されます。パレットタブで色を整理してからコード出力タブで一括エクスポートしてください。
- スマートフォンでも使えますか？
- はい。iPhoneのSafariやAndroidのChromeで利用できます。タッチ操作によるスポイト・スライダー操作に対応しています。カメラで撮影した写真は「ファイル選択」からアップロードいただけます。