「この写真の空の青、Webサイトのアクセントカラーに使いたいな」。そう思った時、わざわざPhotoshopやIllustratorなどの重いデザインソフトを立ち上げる必要はもうありません。
このツールは、ブラウザに画像をドラッグ＆ドロップし、気になる部分をクリック（タップ）するだけで、そのピクセルのカラーコード（HEX値、RGB値）を寸分狂わず抽出します。画像データは外部サーバーに一切送信されないため、公開前のデザインカンプや機密画像でも安全にスポイト可能です。
目次を開く
🎨 カラーコード抽出
モニターの正確な色味を邪魔しない、高演色なLEDデスクライトはいかがでしょうか。
スポンサーリンク
直感に頼らない、正確な色指定の利用シーン
「だいたいこんな感じの赤」という曖昧な指定は、デザインの統一感を破壊します。以下のような場面で、インスピレーションを正確な数値に変換します。
| 写真からの配色抽出 | 風景写真や商品のパッケージ画像など、美しいと感じた画像の一部分から色を吸い出し、Webサイトのテーマカラーを決定します。 |
|---|---|
| 他サイトのデザイン解析 | 参考にしたWebサイトのスクリーンショットを読み込ませ、ボタンや背景に使われている絶妙なグラデーションの構成色をピンポイントで取得します。 |
| コーディング作業の効率化 | デザイナーから渡された1枚のJPEGカンプ画像から、CSSに記述するためのHEX値（#FFFFFFなど）を素早くコピペします。 |
機能・仕様：ピクセル単位のスポイト機能
軽量でありながら、プロの要求に応える精度を備えています。
- 正確な座標計算
スマホの画面幅に合わせて画像が縮小表示されている状態でも、内部的にオリジナル解像度とのスケールを計算し、タップした位置の真のピクセル色を取得します。 - 2つのフォーマットを同時生成
Webデザインで最も多用される「HEX値（16進数）」と、画像処理やCSSのrgba指定で役立つ「RGB値」を同時に算出し、ワンクリックでコピーできます。 - 完全オフライン処理（安全性）
画像の描画とピクセル解析は、HTML5のCanvas APIを用いてお使いのブラウザ内だけで実行されます。画像がサーバーに送信されることはありません。
早見表：カラーコードの基礎知識
抽出された値をどこで使うべきか、フォーマットごとの特徴です。
| フォーマット | 特徴・主な用途 |
|---|---|
| HEX（#007bff など） | 16進数表記。Webデザインにおける絶対的標準。CSSの color や background-color など、単色を指定する場面で最も文字数が少なくスマートです。 |
| RGB（rgb(0, 123, 255) など） | 光の三原色（赤、緑、青）を0〜255の数値で表したもの。CSSの rgba(0, 123, 255, 0.5) のように、後から透明度（アルファ値）を追加したい場合に重宝します。 |
よくある質問 (FAQ)
Q 対応している画像形式は何ですか？
A. 一般的なWeb画像フォーマットであるJPG（JPEG）、PNG、WebP、GIFに対応しています。HEIC形式はブラウザの対応状況に依存します。
Q 画質の悪い画像だと色がくすんで抽出されます。
A. ツールの仕様上、クリックした「ピンポイントの1ピクセル」の色を抽出します。JPGなどで圧縮ノイズ（モスキートノイズ）が乗っている画像の場合、本来の色ではなくノイズの色を拾ってしまうことがあります。できるだけ高画質な画像を使用するか、何度か周辺をクリックして理想の値を探ってください。
開発者のひとりごと
👨💻
「あ、このサイトのボタンの色いいな。何色使ってるんだろう」
そう思った熱心なデザイナーのあなたは、ブラウザのデベロッパーツールを開き、要素を検証し、CSSの迷宮に潜り込んでカラーコードを発掘するでしょう。それはとても正しい行動です。
しかし、対象が「画像の中にある服の色」や「写真に写り込んだ夕焼けのグラデーション」だった場合、デベロッパーツールは完全に沈黙します。急にあなたは無力な存在となり、重厚長大な画像編集ソフトの起動を待つハメになるのです。
そんな無駄な待ち時間は、人生の浪費です。画像を放り込み、クリックする。ただそれだけで、あなたのインスピレーションは寸分違わぬ「#（ハッシュ）から始まる文字列」に変換されます。抽出した色をパレットに並べ、自分だけの傑作を作り上げてください。