← owt.jp

画像カラーピッカー

画像から任意の場所の色情報（HEX / RGB / HSL）を抽出・コピーできるツールです。
マウスを画像に重ねるとリアルタイムにカーソル位置の色を表示し、クリックでパレットに固定。代表色・平均色・明度分布などの統計も同時に表示します。
画像はブラウザ内で処理され、サーバーには一切送信されません。

1画像を読み込み

クリックまたは 画像をドロップ（クリップボードから貼り付けも可）
対応: JPEG / PNG / GIF / WebP / BMP / SVG（ブラウザ内処理・最大 ~30MB 推奨）

カラーコード（HEX / RGB / HSL）の違い

HEX（16進数表記）

#RRGGBB の形式で、R/G/B の各成分を 16 進数 2 桁（0〜255）で並べたものです。#ffffff は白、#000000 は黒。CSS や Web デザインでもっとも一般的に使われる表記です。

RGB（10進数表記）

rgb(255, 204, 0) のように R/G/B 成分を 0〜255 の 10 進数で表します。HEX と等価ですが、JavaScript や画像処理ではこちらが扱いやすい場面が多いです。

HSL（色相・彩度・明度）

hsl(48, 100%, 50%) の形式で、色相（Hue, 0〜360°）・彩度（Saturation, 0〜100%）・明度（Lightness, 0〜100%）で表します。「同じ色相のまま明るくしたい」「彩度だけ落としたい」といった感覚に近い調整がしやすく、デザイン用途で好まれます。

代表色（Dominant Colors）の抽出方法

本ツールでは画像のピクセルを縮小サンプリングし、K-means クラスタリングで類似色をグルーピングして上位 8 色を抽出しています。完全なフォトショの「カラー範囲」ほど精密ではありませんが、Web ページの主要配色を読み解く用途には十分です。

色相（Hue）分布の見方

横軸は色相 0°（赤）〜 360°（赤）を 1 周。バーの高さがピクセル数の多さを示します。彩度の極端に低いピクセル（無彩色）はこのグラフから除外しているので、「写真がほぼグレー寄り」でも色相帯の偏りを読み取りやすくなっています。

明度ヒストグラムの見方

横軸は輝度 Y（Y = 0.299R + 0.587G + 0.114B）の 0〜255。バーが左に寄っていれば暗めの画像、右に寄っていれば明るい画像です。中央が大きく凹む U 字型はコントラストが強い画像、なだらかな山型はコントラストが弱めの画像という大まかな目安になります。

このアプリについて

このツールでできること

  • 任意座標の色抽出: マウスオーバーでカーソル位置の色を即時表示。クリックでパレットに保存し、複数の色を同時管理できます。
  • 3 種のカラーコード: HEX（#ffcc00形式）、RGB、HSL をワンクリックでコピー。
  • ルーペ表示: 拡大プレビューと十字カーソルで 1px 単位の正確なピッキングが可能。
  • 3×3 平均モード: JPEG 圧縮ノイズの影響を抑えるための周辺ピクセル平均化。
  • 画像全体の統計: サイズ・ファイル容量・平均色・代表色（K-means クラスタリング）・色相分布・明度ヒストグラムを自動計算。
  • パレット書き出し: CSV ／ JSON ／ PNG 画像でダウンロード可能。デザインカンプやコーディング資料にそのまま使えます。
  • 完全ブラウザ完結: 画像をサーバーに送信せず、あなたの PC 内だけで処理。閉じれば消えます。

主な使用例

  • Web デザイン: お手本サイトのスクショから配色を抽出して CSS 変数化。
  • UI / ブランド調査: ロゴやキービジュアルの主要色を客観的な数値で記録。
  • 写真補正: 暗部・明部の色被りを HSL ベースで確認。
  • 資料作成: グラフや図に画像の色を一貫して適用したいときの基準パレット作り。
  • EC 商品掲載: 撮影した商品の主要色を抽出して、商品説明に「カラー: #c93a3a 系」と記載。

プライバシーについて

読み込んだ画像はブラウザ内（あなたの PC 上）でのみ処理されます。アップロードはありません。ページを閉じれば破棄されます。

対応形式・制限

  • 対応形式: JPEG PNG GIF（1 フレーム目）WebP BMP SVG
  • ピッキングの座標は元画像の解像度に基づきます（描画上の拡大率に依存しません）
  • サイズ目安: 30MB 程度まで（ブラウザの空きメモリに依存）
  • 巨大画像は内部で 4096×4096 にフィット縮小して描画します（統計用サンプリングは別途実施）