文字ツール

画像カラーピッカー

画像をアップロードまたはURLを入力して、クリックでカラーコードを抽出できます。

クリックまたはドラッグ＆ドロップ

クリップボードから貼り付けも可能 (Ctrl+V)

ファイルを選択

対応形式: PNG, JPG, GIF, WebP, SVG

#f9f9f9
HEX #f9f9f9
RGB rgb(249,249,249)
HSL hsl(0,0%,97.6%)
HSV 0° 0% 97.6%

抽出履歴

画像をクリックして色を抽出

使い方

1

画像を読み込む

クリック・ドラッグ＆ドロップ・クリップボード貼り付け・URL入力のいずれかで画像を読み込みます。

2

色を抽出する

画像上でマウスを移動し、拡大鏡で確認しながらクリックするとカラーコードが自動コピーされます。

3

コードを活用する

HEX・RGB・HSL・HSVの4形式を表示。各行クリックでコピー。主要カラーや履歴からも再取得できます。

画像の読み込み方法

クリック選択
画像エリアをクリックしてファイルを選択
ドラッグ＆ドロップ
画像ファイルをエリアに直接ドロップ
貼り付け
Ctrl+V / Cmd+V でクリップボードの画像を貼り付け
URL入力
画像URLを入力して「読み込む」ボタンで取得

カラーコード形式

HEX
16進数表記（例：#ff6600）。CSS・デザインツールで広く使用
RGB
赤・緑・青の値（0〜255）で色を表現
HSL
色相・彩度・明度で表現。色の調整に直感的
HSV
色相・彩度・明るさで表現。画像編集ソフトで一般的

使用例

  • 参考画像やデザインカンプからイメージカラーを抽出する
  • Webサイトのスクリーンショットから正確なカラーコードを取得する
  • 写真から色のインスピレーションを得て配色を考える
  • ブランドカラーの確認やカラーパレットの作成に活用する

対応形式 — PNG、JPG、GIF、WebP、SVG。すべての処理はブラウザ上で完結します。