画像からカラーパレットを抽出
写真、スクリーンショット、ロゴ、イラストをアップロード、ドラッグ、または貼り付けて、画像全体からカラーパレットを抽出します。このツールは 1 つのピクセルを選ぶのではなく、見えている主要な色を 3、5、8 色のパレットにまとめます。個別の HEX と RGB、改行区切りのすべての HEX、またはすぐに使える CSS 変数をコピーできます。画像はブラウザ内でローカルに処理され、ColourPicker.app にアップロードされることはありません。
画像をアップロード
ファイルを選択するか、ここにドラッグするか、クリップボードから画像を貼り付けます。
Ctrl+V または Command+V でスクリーンショットを貼り付けることもできます。
画像はデバイス上にとどまり、このブラウザ内でのみ処理されます。
画像からカラーパレットを抽出する方法
画像ファイルを選択し、アップロード領域にドラッグするか、クリップボードから貼り付けます。ブラウザは画像をデコードし、表示ピクセルの小さなサンプルを分析します。近い色合いをまとめるため、パレットには各ピクセル値ではなく、画像の見た目を最も特徴づける色が表示されます。
- ブラウザで開ける写真、ロゴ、イラスト、スクリーンショットを追加します。
- 読み込み後、5 色の主要色パレットが自動作成されます。
- 必要な詳しさに合わせて 3、5、8 色を選びます。
- 個別の色またはパレット全体を次のデザインや開発作業へコピーします。
主要な色であり、正確な 1 ピクセルではありません
このページは、写真、イラスト、ロゴ、スクリーンショット全体の多色要約のためのものです。結果は画像全体を形づくる色であり、特定の 1 点の正確な値ではありません。
1 ピクセルの正確な色が必要な場合は、画像から正確な 1 色を選択してください。ベースカラーから補色、類似色などの理論的な関係を作る場合は、ベースカラーから色の調和を生成してください。この抽出ツールは画像にすでにある色だけを要約します。
HEX、RGB、CSS 変数としてパレットをコピー
各スウォッチには HEX と RGB の値があり、それぞれコピーできます。すべての HEX 値を 1 色 1 行のリストとしてコピーすることもできます。CSS 変数ボタンでは、--cp-1 や --cp-2 のような :root ブロックが作成されます。
最終的なインターフェースで使う前に、コントラストとアクセシビリティを別途確認してください。
画像は非公開のままです
すべての処理はブラウザ内で行われます。画像が ColourPicker.app や外部サービスに送信されたり、サーバーに保存されたりすることはありません。実質的に透明なピクセルは無視されるため、PNG の透明背景が誤って主要色になることもありません。
3、5、8 色は最大数です。単純な画像には固有の表示色が少ないことがあり、その場合は色を複製したり新たな色を作ったりせず、小さい実際のパレットを返します。
よくある質問
- 画像からカラーパレットを抽出するには？
- 画像をアップロード、ドラッグ、または貼り付けます。ツールが主要な表示色を 3、5、8 色のパレットにまとめます。
- 画像パレット抽出ツールとは？
- 画像全体の主要な表示色を、より小さな代表的パレットにまとめるツールです。
- HEX、RGB、CSS 変数をコピーできますか？
- はい。各値、すべての HEX 値、またはパレット全体を CSS 変数としてコピーできます。
- 画像はアップロードまたは保存されますか？
- いいえ。画像はブラウザ内でローカルにデコード、分析されます。
- 選択した数よりパレットが小さいのはなぜ？
- 画像の固有の表示色が少ない場合があります。色は複製されず、透明なピクセルは無視されます。