画像 カラーパレット抽出ツール

画像をドロップして、支配色とパレット一式を抽出 — 各スウォッチを HEX・RGB・HSL でコピー、または CSS 変数や Tailwind の色として書き出し。画像はブラウザから外に出ません。

画像 カラーパレット抽出ツールは、画像のデコードと色の解析を完全にブラウザ内で行います。画像がアップロードされることはなく、画像データや抽出された色が ArrayKit に送られることはありません。

画像カラーピッカーを開く

カラーパレット抽出 について

画像 カラーパレット抽出ツールは、どんな画像でも使えるカラースキームに変えます。写真、ロゴ、スクリーンショット、デザインのモックアップをドロップまたは選択すると、単一の支配色に加え、画像全体で最も目立つ色合いのパレットを浮かび上がらせます。各スウォッチは HEX・RGB・HSL で表示されるので、値をそのまま CSS、デザイントークン、ペイントバケツに取り込めます。パレットのサイズを 4 色から 12 色まで調整し、個々のスウォッチやすべての HEX コードを一度にコピーしたり、テーマ向けの既製の CSS :root 変数ブロックや Tailwind の色スニペットを取得したりできます。デザイナー、フロントエンド開発者、画像からブランドパレットを合わせるすべての人のために作られています。画像はデバイス上でデコードされ、その色が読み取られます — 何もアップロードされません。

機能

カラーパレット抽出 の使い方

  1. ドロップゾーンをクリックするか、画像ファイルをその上にドラッグします
  2. 支配色と、抽出されたパレットのスウォッチを読みます
  3. スウォッチを HEX・RGB・HSL で切り替えるか、パレットサイズを変えます
  4. 個々のスウォッチ、すべての HEX コード、または CSS や Tailwind のブロックをコピーします

例

入力

Uploaded: brand-hero.png (blue / green / red artwork)

出力

:root {
  --color-1: #2563eb;
  --color-2: #10b981;
  --color-3: #ef4444;
}

3 色のパレットが、そのままコピーできる CSS 変数ブロックになります。

よくあるエラーとトラブルシューティング

よくある質問

画像から何色を抽出できますか？
パレットには 4 色から 12 色を取り込め、加えて単一の支配色が別に表示されます。パレットサイズはいつでも変更でき、スウォッチ、CSS 変数、Tailwind ブロックが即座に更新されます。
支配色とパレットの違いは何ですか？
支配色は、画像全体を最もよく代表する 1 色で、HEX・RGB・HSL とともに表示されます。パレットは、画像全体で最も目立つ色の集合で、どれだけ際立つかの順に並びます。
パレットを CSS 変数や Tailwind の色として書き出せますか？
はい。ツールは --color-N カスタムプロパティの :root ブロックと、palette-1、palette-2 などをキーにした Tailwind の色オブジェクトを生成します。どちらもワンクリックでコピーして、プロジェクトに貼り付けられます。
どの画像形式からパレットを抽出できますか？
PNG、JPEG、WebP、SVG、GIF、AVIF、BMP、ICO がすべて動作します。ファイルをドロップまたは選択すると、ブラウザ内でデコードされたピクセルからパレットが生成されます。
ブランドに合うパレットをどう作りますか？
ロゴ、製品写真、サイトのスクリーンショットをアップロードしてください。抽出ツールが最も目立つ色を浮かび上がらせるので、ブランドの HEX 値を固め、CSS 変数や Tailwind トークンとして書き出せます。
2 つのスウォッチがほぼ同一になったのはなぜですか？
1 つの色相が支配的な画像は、いくつかの近い色合いを生みます。パレットサイズを減らしてまとめるか、より色の多様な画像を選ぶと、より広い広がりになります。

関連ツール

すべての ArrayKit ツール