---
title: "カラースポイト - 画像の任意位置から色を取得"
description: 画像の任意の位置から色を取得し、HEX・RGB・HSL・OKLCHで確認・コピーできるスポイトツールです。1px単位の取得に加えて、3×3・5×5の平均でノイズをならせます。取得した色は履歴に残ります。画像はブラウザ内で処理されます。
canonical_url: "https://web-toolbox.dev/tools/color-eyedropper"
meta:
  author: K
  "og:description": 画像の任意の位置から色を取得し、HEX・RGB・HSL・OKLCHで確認・コピーできるスポイトツールです。1px単位の取得に加えて、3×3・5×5の平均でノイズをならせます。取得した色は履歴に残ります。画像はブラウザ内で処理されます。
  "og:image": "https://web-toolbox.dev/og/ja/tools/color-eyedropper-0e930cde.png"
  "og:image:alt": カラースポイト
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "カラースポイト - 画像の任意位置から色を取得"
---

> Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt)

# **カラースポイト**

画像の任意の位置から色を取得

**ここに画像をドロップ**またはクリックして画像を選択

PNG / JPEG / WebP / GIF / BMP / AVIF

## **取得した色**

色をスポイトすると詳細を表示します

## **履歴**

0

画像を選ぶと、取得した色がここに残ります

## カラースポイトとは？

画像の任意の位置から色を取得し、HEXなどのカラーコードとして確認できるツールです。スクリーンショットや写真から、ボタンの色や影のグレーなど、必要な1点の色を拾えます。

画像はブラウザ内で処理され、外部へ送信されません。

## 使い方

1. 画像ファイルを選びます。ドラッグ & ドロップでも読み込めます。
2. 画像上でカーソルを動かすと、ルーペに周囲の画素と取得する色が表示されます。
3. クリックまたはタップで色を取得します。値の行をクリックするとコピーできます。

画像にフォーカスを合わせると、矢印キーでカーソルを1画素ずつ動かし、EnterキーまたはSpaceキーで取得できます。

## サンプル範囲

- **1px**：カーソル直下の画素の色です。
- **3×3**・**5×5**：カーソルを中心にした範囲の平均です。赤・緑・青・透明度の各チャンネルをそれぞれ平均します。画像の圧縮によるむらや、輪郭のぼけをならせます。

画像の端では、範囲が画像内に収まるように移動します。画像が範囲より小さいときは、画像に収まる大きさになります。

## 取得した色

色はHEX・RGB・HSL・OKLCHで表示されます。透明度がある色は、HEXが8桁になり、RGB・HSL・OKLCHにも透明度が含まれます。

取得した色は履歴に新しい順で残ります。同じ色は重複して追加されません。履歴の行を選ぶと、その色の値を確認できます。行ごとの削除、すべて削除、すべてコピーもできます。すべてコピーでは、履歴の色を1行に1色ずつHEXでコピーします。履歴はページを再読み込みするか画像を変更すると消えます。

## 対応形式

PNG・JPEG・WebP・GIF・BMP・AVIFに対応しています。SVGはPNGなどに書き出してから読み込んでください。

## 活用シーン

- デザインカンプやスクリーンショットから、ボタンや見出しの色を合わせたいとき
- 写真からアクセントカラーを拾いたいとき
- 既存サイトのUI色を確認して再現したいとき
- 配色見本を作る前に候補色を集めたいとき

画像全体の配色をまとめて知りたいときは、 [**カラーコード抽出**](https://web-toolbox.dev/tools/color-extractor)で主要な色を一度に取り出せます。

**使ってみてどうでしたか？**

最終更新: 2026年10月30日

### **関連ツール**

- [<h4>**カラーコード抽出**</h4>](https://web-toolbox.dev/tools/color-extractor)
- [<h4>**カラーコントラストチェッカー**</h4>](https://web-toolbox.dev/tools/color-contrast-checker)
- [<h4>**カラーコードコンバーター**</h4>](https://web-toolbox.dev/tools/color-converter)
- [<h4>**Tailwindカラーパレットジェネレーター**</h4>](https://web-toolbox.dev/tools/tailwind-color-palette)
- [<h4>**見出し抽出**</h4>](https://web-toolbox.dev/tools/heading-extractor)
- [<h4>**サジェストキーワード抽出**</h4>](https://web-toolbox.dev/tools/suggestion-extractor)
- [<h4>**動画フレーム切り出し**</h4>](https://web-toolbox.dev/tools/video-frame-extractor)
- [<h4>**ASCII to HEX変換**</h4>](https://web-toolbox.dev/tools/ascii-to-hex)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"ja-JP","name":"Web ToolBox","url":"https://web-toolbox.dev/","workTranslation":{"@id":"https://web-toolbox.dev/en#website"}},{"@id":"https://web-toolbox.dev/tools/color-eyedropper#webpage","@type":"WebPage","description":"画像の任意の位置から色を取得し、HEX・RGB・HSL・OKLCHで確認・コピーできるスポイトツールです。1px単位の取得に加えて、3×3・5×5の平均でノイズをならせます。取得した色は履歴に残ります。画像はブラウザ内で処理されます。","name":"カラースポイト - 画像の任意位置から色を取得","url":"https://web-toolbox.dev/tools/color-eyedropper","isPartOf":{"@id":"https://web-toolbox.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/tools/color-eyedropper"]}]},{"@id":"https://web-toolbox.dev/tools/color-eyedropper#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"画像の任意の位置から色を取得し、HEX・RGB・HSL・OKLCHで確認・コピーできるスポイトツールです。1px単位の取得に加えて、3×3・5×5の平均でノイズをならせます。取得した色は履歴に残ります。画像はブラウザ内で処理されます。","name":"カラースポイト - 画像の任意位置から色を取得","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]}
```

## Sitemap

See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.