まだ色が選択されていません
画像プレビュー
ここに画像をドロップ
またはクリックして参照
JPG | PNG | WebP | GIF
#000000
マウスを移動して色をプレビュー · クリックして選択し履歴に保存
現在の色
HEX
—
RGB
—
HSL
—
色履歴 （最大12件）
画像 カラー 抽出とは？
画像 カラー 抽出では、画像上の任意の部分にマウスを合わせると、そのピクセルの正確な色をすぐに確認できます。クリックして色を固定し、HEX、RGB、HSL としてコピーできます。カラー履歴パネルには最大12件の選択した色が保存され、簡単に参照できます — デザイナー、開発者、写真やスクリーンショットから色を合わせたい方に便利です。
画像 カラー 抽出の使い方
- ドロップゾーンをクリックするか、ファイルをドラッグして画像をアップロードします。
- 画像上でマウスを移動すると、フローティングバッジとサイドパネルにリアルタイムの色プレビューが表示されます。
- 画像上の任意の場所をクリックすると、その色を選択して履歴に保存します。
- コピーボタンでHEX、RGB、HSLの値をクリップボードにコピーできます。
- 履歴パネルの任意のスウォッチをクリックすると、その色をメイン表示に戻せます。
カラー抽出を理解する ▾
例
入力
ブランドのスクリーンショットをアップロードし、ロゴの色にカーソルを合わせます
出力
#1A73E8 · rgb(26, 115, 232) · hsl(217, 80%, 51%) —コピー準備完了
一般的な使用例
- ロゴやスクリーンショットから正確なブランドカラーを特定
- UIデザイン用に写真から背景色を合わせる
- デザインモックアップからCSSの色値を抽出
- 複数の色をクリックし、履歴パネルを使ってミニパレットを作成
このツールを使う理由
- Canvas getImageDataを使ったピクセル単位で正確な色抽出 —丸め処理なし。
- 3つの出力形式（HEX、RGB、HSL）をそれぞれワンクリックでコピー
- すべてブラウザ内で動作 —画像がデバイスから外に出ることはありません。
よくある質問
画像はサーバーにアップロードされますか？
いいえ。すべての処理はHTML5 Canvas APIを使用してブラウザ内で完全に行われます。画像がデバイスから外に出ることはありません。
抽出された色の値はどの程度正確ですか？
値はピクセル単位で正確です — ツールは Canvas getImageData API を使用してカーソル下のピクセルの正確な RGBA 値を読み取り、数学的に HEX、RGB、HSL に変換します。
パレット抽出ツールとはどう違いますか？
パレット抽出ツールは画像から主要な色を自動的にサンプリングします。このツールでは任意のピクセルを手動でクリックして正確な色を取得できるため、抽出する色を精密に制御できます。
コピーボタンはどの形式を使用しますか？
各形式はすぐに使える文字列としてコピーされます。HEX は #RRGGBB、RGB は rgb(R, G, B)、HSL は hsl(H, S%, L%) としてコピーされます。