色摘出Webアプリ（スポイトWebアプリ）の使い方｜PC・スマホ対応でHEX/RGB/HSLを簡単コピー

色摘出Webアプリ（スポイトWebアプリ）とは？

このツールは、画像から色を取得できる無料のWebアプリです。

ブラウザ上で動作するため、インストールや設定は不要。画像を読み込んでクリック・タップするだけで、カラーコードを HEX / RGB / HSL 形式で確認・コピーできます。

• インストール不要：HTMLファイルを開くだけで使用可能
• 複数形式に対応：HEX・RGB・HSLをワンクリックでコピー
• PC/スマホ両対応：操作方法がそれぞれ最適化

PCでの操作方法

1. 画像を読み込む

• 「画像を開く」ボタンからファイルを選択
• または画像を ドラッグ＆ドロップ
• クリップボードから 貼り付け も可能です

2. 色を取得する

画像の任意の場所をクリックすると、そのピクセルの色が右側に表示されます。

3. 履歴機能

クリックした色は下の「履歴」に自動追加されます。

• 左クリック → HEXコードをコピー
• 右クリック → メニューが開き、HEX / RGB / HSL を選んでコピー可能

これにより、必要な形式をその場でコピーできます。

画面全体からスポイト（EyeDropper）

ページ上の任意の場所の色を直接スポイトできる機能です。

ボタンを押すと画面が少し暗くなり、ポインタがスポイトに変わります。

クリックした地点の色の HEX が自動でクリップボードにコピーされます。

使い方（PC）

1. 上部の「画面全体からスポイト」をクリック
2. スポイトカーソルで取得したい場所をクリック
3. 「コピーしました」の表示とともに HEX（例：#1E3A5F）がコピーされます
4. キャンセルは Esc キー

対応・注意

• 対応ブラウザ：Chromium系（Chrome / Edge）
• Safari / Firefox は未対応（画像クリックによる取得をご利用ください）
• 取得できるのはそのタブ内のコンテンツのみ（他アプリやOSのUIは不可）

スマホでの操作方法

1. 画像を読み込む

• 「画像を開く」ボタンから写真を選択
• Android/iOS どちらでも利用可能です

2. 色を取得する

画像をタップすると、その色が「履歴」に追加されます。

3. 履歴から反映

履歴の色チップをタップすると、右側のHEX / RGB / HSLがその色に更新されます。

4. 値をコピーする

HEX / RGB / HSL の横にある 「コピー」ボタン をタップすると、その形式の値がクリップボードにコピーされます。

このツールの便利な使い方

• Webデザインやバナー制作で、配色を簡単に抽出
• 写真やスクリーンショットからブランドカラーを取得
• ブログやSNS投稿のカラーチェックに利用

まとめ

• PC版は 右クリックで形式を選択してコピー
• スマホ版は 履歴タップで反映 → コピー ボタンで保存
• HEX / RGB / HSL 全形式に対応しており、インストール不要で使える