画像から正確な色を抽出
写真、ウェブサイトのスクリーンショット、ロゴ、デザインのモックアップなどで気に入った色を見つけ、そのカラーコードを知りたいことはありませんか？この画像カラーピッカーは、あらゆる画像のスポイトツールとして機能します。画像を開いてピクセルをクリックするだけで、CSS、Figma、Photoshop、Canva、PowerPointにそのまま貼り付けられるHEX、RGB、HSLのカラーコードを取得できます。ズームルーペでカーソル下のピクセルを拡大表示するため、正確な位置を選択できます。また、画像のメインカラーのパレットも自動的に生成されます。
機能
- スポイトツール: ブラウザで開けるあらゆる画像形式（JPG、PNG、WebP、GIF、SVG、AVIF、HEIC）に対応。
- ズームルーペ: カーソル下のエリアをピクセル単位で拡大表示。
- HEX、RGB、HSL: ワンクリックでコピーできるカラーコード。
- メインカラーパレット: 画像全体から主要な色を自動抽出。
- 抽出履歴: 最大16色まで保存され、比較や再確認が可能。
- スクリーンショットの貼り付け: クリップボードから直接ペースト可能。
- プライバシー保護: 画像がデバイスの外部に送信されることはありません。
どのカラーフォーマットを使うべき？
| フォーマット | 例 | 主な用途 |
|---|---|---|
| HEX | #1E90FF |
CSS、HTML、Figma、Canva、一般的なデザインツール |
| RGB | rgb(30, 144, 255) |
CSS、Photoshop、Officeアプリ、プログラミング |
| HSL | hsl(210, 100%, 56%) |
CSS（明度や彩度を調整したい場合） |
抽出した色をCMYKやHSVなどの他のフォーマットに変換したり、白黒テキストとのコントラスト比を確認したりするには、カラーコンバーターで開いてください。
活用アイデア
ブランドカラーの統一: 企業のロゴやWebサイトのスクリーンショットから正確な色を抽出し、プレゼン資料のデザインに統一感を持たせます。
カラーパレットの作成: 写真のメインカラーを、Webサイト、ポスター、スライドのテーマカラーのベースとして活用します。
Web制作: デザインデータではなく、画像として共有されたモックアップから色を取得します。
デジタルアートやハンドメイド: ペイントアプリ、刺繍、編み図などの参考写真からカラーコードを抽出します。
正確に色を抽出するコツ
お手持ちの画像の中で、最もサイズが大きく、圧縮率の低いものを使用してください。PNG形式のスクリーンショットは正確な色を保ちますが、JPG形式の写真は境界線付近で色がわずかに変化する場合があります。ルーペ機能で画像を拡大し、2つの色が混ざり合うアンチエイリアス処理された境界線を避けて色を選択してください。大きな画像の一部だけが必要な場合は、あらかじめ画像の切り抜きを行っておくと作業がスムーズになります。