---
title: "カラーコード抽出 - 画像から主要なHexカラーを抽出 | Web ToolBox"
description: 画像から主要な色を抽出してHexカラーコードで一覧表示するツールです。色の距離や色相・彩度・明度のまとまり方を調整しながら、カラーパレット作成や配色確認に使えます。
canonical_url: "https://web-toolbox.dev/tools/color-extractor"
meta:
  author: K
  "og:description": 画像から主要な色を抽出してHexカラーコードで一覧表示するツールです。色の距離や色相・彩度・明度のまとまり方を調整しながら、カラーパレット作成や配色確認に使えます。
  "og:image": "https://web-toolbox.dev/og/ja/tools/color-extractor-c30770c5.png"
  "og:image:alt": カラーコード抽出
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "カラーコード抽出 - 画像から主要なHexカラーを抽出 | Web ToolBox"
---

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

# **カラーコード抽出**

画像から主要な色を抽出してHexで表示

**画像ファイル**

**ここにファイルをドラッグ & ドロップ**

または

## **色抽出オプション**

色の距離

近い色を同じグループとしてまとめやすくします

色相距離

色相の違いをどこまで別の色として扱うかを調整します

彩度距離

彩度の近い色をまとめやすくします

明度距離

明るさの近い色をまとめやすくします

画像をアップロードすると、抽出した色がここに表示されます

## **プレビュー**

## カラーコード抽出とは？

画像から主要な色を抽出し、Hex カラーコードの一覧として確認できるツールです。アップロードした画像をもとに近い色をまとめながらパレット化できるため、参考画像から配色を拾いたいときに役立ちます。

バナーや写真から使われている色を整理したいとき、UI の参考画像から近い配色を抜き出したいとき、カラーパレットのたたき台を作りたいときに便利です。

## 使い方

1. 画像ファイルをアップロードします。
2. 画像から抽出された色が Hex コードで一覧表示されます。
3. 必要に応じて抽出オプションを調整します。
4. 個別の色をコピーするか、一覧をまとめてコピーします。

オプションを動かすと抽出結果がその場で更新されるので、細かく色を拾いたいのか、近い色をまとめたいのかを見ながら調整できます。

## 主な設定項目

### 色の距離

全体としてどの程度近い色をまとめるかを決める項目です。値を大きくすると似た色がまとまりやすくなり、抽出される色数は少なめになります。細かな色の違いも残したい場合は、低めにすると確認しやすくなります。

### 色相距離

色相の差をどこまで別の色として扱うかを調整します。赤とオレンジのように色味が近い部分をまとめたいときは高め、色相の違いをしっかり分けたいときは低めが向いています。

### 彩度距離

鮮やかさの差をどの程度まとめるかを調整します。彩度の近い色を同じグループとして扱いたいときに使います。

### 明度距離

明るさの差をどこまで一つにまとめるかを決めます。明度差の小さい色をまとめると、写真の細かな陰影よりも大まかな配色を見やすくなります。

## 入出力例

たとえば、青空と白い雲が写った画像を読み込むと、結果は次のような一覧になることがあります。

```text
#5FA8FF
#A9D2FF
#F7FAFF
#C9CED6
```

ここから個別の色をクリックしてコピーしたり、一覧をまとめてコピーして配色メモへ貼り付けたりできます。

## 活用シーン

- 写真やバナーからカラーパレットを作りたいとき
- 参考サイトのスクリーンショットから主要色を整理したいとき
- UI やイラストの配色をざっくり把握したいとき
- ブランドカラー候補を画像素材から探したいとき

## 使うときの注意点

- 抽出結果は画像内の近い色をまとめた一覧なので、すべてのピクセル色をそのまま列挙するものではありません
- オプションの値によって色数やまとまり方が大きく変わります。迷ったらまずはデフォルト値から試すのが安全です
- 透過や圧縮ノイズのある画像では、見た目より色数が多く出ることがあります

```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-extractor#webpage","@type":"WebPage","description":"画像から主要な色を抽出してHexカラーコードで一覧表示するツールです。色の距離や色相・彩度・明度のまとまり方を調整しながら、カラーパレット作成や配色確認に使えます。","name":"カラーコード抽出 - 画像から主要なHexカラーを抽出","url":"https://web-toolbox.dev/tools/color-extractor","isPartOf":{"@id":"https://web-toolbox.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/tools/color-extractor"]}]},{"@id":"https://web-toolbox.dev/tools/color-extractor#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"画像から主要な色を抽出してHexカラーコードで一覧表示するツールです。色の距離や色相・彩度・明度のまとまり方を調整しながら、カラーパレット作成や配色確認に使えます。","name":"カラーコード抽出 - 画像から主要なHexカラーを抽出","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]}
```

## Sitemap

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