Color utility
カラーピッカー
画像から色を抽出してHEX/RGB/HSL/HSVを切り替えながら確認、配色パレット生成とWCAGコントラスト比チェックまで1画面で完結します。
画像から色を取得
画像をドラッグ&ドロップ
JPEG / PNG / WebP / GIF / SVG、10MBまで。画像はサーバーに送信しません。
画像クリックで色を取得。フォーカス中は矢印キーで1px、Shift+矢印キーで10px移動し、Enter/Spaceで決定できます。
メインカラー
#1763ff
カラーコード
画像から主要色を抽出
抽出パレット
画像を読み込むと主要色パレットが表示されます。
スポイト履歴
画像上をクリックすると、取得した色が最新10色まで残ります。
配色パレット生成
反対色を合わせた強い対比
パレットをエクスポート
コントラスト比チェック
大きい文字のサンプル
本文サイズのサンプルテキストです。色の読みやすさを確認できます。
お気に入り・履歴
直近20色
色を操作すると履歴が残ります。
お気に入り色
保存した色はここに表示されます。
パレットを保存
抽出パレットまたは生成パレットを名前付きで保存できます。
How to
カラーピッカーの使い方
- 1
画像を追加
ドラッグ&ドロップまたはファイル選択で10MB以下の画像を読み込みます。
- 2
色を抽出
画像上をクリックしてピクセル色を取得し、主要色数を選んで自動パレットも生成します。
- 3
表記を調整
HEX、RGB、RGBA、HSL、HSV、スライダー、カラーピッカーを同期しながら色を整えます。
- 4
保存・確認
お気に入り、履歴、パレット出力、コントラスト比を使って実装用の色を確定します。
Notes
利用前に知っておきたい注意点
画像の色精度
ブラウザのCanvasに描画した状態から色を取得するため、ICCプロファイル付きの画像はsRGBに再解釈されます。広色域素材では元データと色味が変わる可能性があります。
GIFは描画フレームのみ
GIFアニメーションはブラウザが描画した時点のフレームから色を抽出します。特定フレームの色が必要な場合は、別途静止画として書き出してから読み込んでください。
アルファ値とコントラスト比
WCAGコントラスト比は文字色と背景色の不透明な値で計算します。半透明色を使う場合は、最終的に重なる背景色を指定して再確認してください。
サポート外の形式
TIFF、HEIC、RAW画像はブラウザの描画対応がないため未サポートです。事前に画像変換ツールでJPEG / PNG / WebPに変換してから使用してください。
Privacy
画像はブラウザ内だけで処理します
このツールは画像をCanvasへ読み込み、色抽出とエクスポートをブラウザ内で完結させます。ネットワーク送信を前提にしないため、制作中の素材や未公開画像でも扱いやすい設計です。
- サーバーへアップロードしません
- 画像の永続保存はありません
- ファイル名や画像内容をログに残しません
FAQ
カラーピッカーのよくある質問
画像はサーバーに送信されますか？
送信されません。画像の読み込み、ピクセル取得、主要色抽出、パレット画像の生成はすべてブラウザ内で処理します。
対応している画像形式は何ですか？
JPEG、PNG、WebP、GIF、SVGに対応しています。GIFはブラウザが描画したフレームから色を取得します。ファイルサイズの上限は10MBです。
アルファ値（透明度）は使えますか？
使えます。#RRGGBBAA、RGBA、カラーピッカーの透明度スライダーに対応し、チェッカーボード背景のプレビューで見え方を確認できます。
Adobeのファイルにエクスポートできますか？
抽出パレットや生成パレットはAdobe ASEとして保存できます。あわせてPNG、CSS変数、SCSS、JSON、テキスト形式でも出力できます。
HEXとRGBを相互変換できますか？
HEX、RGB、RGBA、HSL、HSVの各入力欄が連動します。値の表示部分をクリックするとCSSで使いやすい形式をコピーできます。
コントラスト比はどの基準で判定していますか？
WCAG 2.1のAA、AAA、大きい文字の基準に沿って、文字色と背景色の相対輝度からコントラスト比を計算します。