画像をクリックして、色を抽出する。HEX / RGB / HSL 同時表示。
JobDoneBot の画像カラーピッカーは、画像をドロップして任意の位置をクリックするだけで HEX / RGB / HSL / CMYK の全形式で色情報を取得するツール。デザイナーが他社サイトの色を分析・自社デザインに参考にする場面で。
ColorZilla / Pixie などのブラウザ拡張に近い機能を、ブラウザ内で完結。 画像はサーバーに送信されないため、未公開のデザインカンプや競合分析でも安全に使えます。
3 ステップで完了
- 1
画像をドロップ
色を抽出したい画像をドラッグ&ドロップ。
- 2
画像をクリック
対象ピクセルをクリックして色を抽出。 ホバーでリアルタイムプレビューも。
- 3
コードをコピー
HEX / RGB / HSL / CMYK の各形式から選んでコピー。
他のサービスとの違い
| 項目 | JobDoneBot | ColorZilla 拡張 | Pixie | Mac/Windows 標準 |
|---|---|---|---|---|
| 料金 | 完全無料 | 無料 | 無料 | 無料 |
| 処理場所 | ブラウザ内 | ブラウザ拡張 | PC ローカル | OS 標準 |
| プライバシー | 送信ゼロ | 送信なし | 送信なし | 送信なし |
| インストール | 不要 | 拡張要 | ソフト要 | 標準搭載 |
| 画像対応 | ✓ あらゆる形式 | Web 表示画像のみ | 画面全体 | 画面全体 |
| スマホ対応 | ✓ | ✗ | ✗ | OS による |
※ 各社の仕様は 2026 年 4 月時点の公開情報。
こんな場面で使えます
競合サイト・他社デザインの参考
気になる他社サイトのスクリーンショットから 色を抽出してデザイン参考に。
ブランドカラーの正確な抽出
PNG / JPG のブランドガイドラインから 色コードを正確に取得。
インスピレーション画像から
Pinterest / Behance で見つけた画像の配色を分析して 自分のデザインに活用。
商品画像から代表色
EC 商品画像から代表色を抽出して 「商品名 + 色」表記に使う。
写真からの配色設計
風景写真や好きな写真から 主要色を抽出してパレット化。
ロゴからのカラー再現
画像形式のロゴから正確な色を抽出して、 ブランドガイドや関連デザインに反映。
よくある質問
- Q. 完全に無料ですか?
- 会員登録不要・回数制限なし・広告なしで完全無料です。
- Q. 画像はサーバーに送信されますか?
- いいえ、ブラウザ内処理で完結します。 未公開のデザインカンプでも安全。
- Q. 対応している画像形式は?
- JPG / PNG / WebP / HEIC など主要形式すべて。
- Q. 色の精度はどうですか?
- sRGB 色空間で正確に取得。印刷用 CMYK は簡易変換 (ICC プロファイル非対応)。
- Q. 複数色を一括取得?
- クリックごとに履歴が残ります。 主要 5 色を自動抽出する機能も。
- Q. HSL / HSV の違いは?
- HSL は CSS 標準、HSV はデザインソフトで使う色空間。 当ツールは HSL を主に表示。
- Q. カラーパレットも作れますか?
- 別ツールで対応。カラーパレット生成を併用。
- Q. スマホでも使えますか?
- iPhone / Android のブラウザでそのまま動きます。 タップで色を取得できます。