カラーパレットエクストラクター

カラーパレットエクストラクターは、メディアンカット量子化 アルゴリズムを使用して任意の画像を分析し、支配的な色を特定する 無料のブラウザベースツールです。ウェブサイトのデザイン、ブランド アイデンティティの作成、写真からのカラーインスピレーションの取得 など、このツールは画像内の最も目立つ色の正確な内訳を提供します。

すべての処理はCanvas APIを使用してブラウザ内で完全に行われます。 画像がデバイスから離れることはなく、アップロード、サーバーサイド 処理、入力に対するサードパーティの分析はありません。これにより、 プロプライエタリ画像、未公開のデザインアセット、機密のブランド 素材にも安全に使用できます。

ツールは選択したパレットサイズに応じて画像から3～10色を抽出 します。各色はHEX、RGB、HSL値とともにスウォッチとして表示され、 その色が画像の何パーセントを占めるかを示すパーセンテージも 表示されます。スウォッチをクリックするとカラーコードが即座に コピーされます。

アクセシビリティ重視のワークフローのために、内蔵のコントラスト チェッカーで抽出した2色を比較してWCAG 2.1コントラスト比を検証 できます。写真からカラースキームを導出する場合に特に便利で、 テキストと背景色のペアがAAまたはAAA準拠を満たしていることを 本番環境で使用する前にすばやく確認できます。

エクスポート機能は本番環境で使えるコードを生成します。CSSカスタム プロパティ（変数）、Tailwind CSSテーマ設定、JSONデータ、SVG スウォッチから選択できます。

特定のピクセルから1色を選択する必要がある場合は、 画像カラーピッカーをお試しください。 カラーフォーマット間の変換にはカラーコンバーターを ご利用ください。色のアクセシビリティ準拠の詳細確認には アクセシビリティカラーチェッカーを ご覧ください。

1. アップロードエリアに画像をドラッグ＆ドロップするか、クリックしてファイルピッカーを開きます。PNG、JPG、GIF、WebP、SVG形式に対応しています。
2. ツールが自動的に支配的な色を抽出し、HEX、RGB、HSL値とともにスウォッチとして表示します。
3. パレットサイズスライダー（3-10）で画像から抽出する色の数を調整します。
4. 任意のカラースウォッチをクリックするとHEX値がクリップボードにコピーされます。
5. コントラストチェックモードを有効にし、2つのスウォッチをクリックするとWCAGコントラスト比がAA/AAAの合否インジケーターとともに表示されます。
6. エクスポート形式（CSS、Tailwind、JSON、SVG）を選択し、コピーをクリックして生成されたコードをコピーします。
7. キーボードショートカットCtrl+Shift+Cで現在のエクスポート出力をすばやくコピーできます。
8. クリアをクリックしてリセットし、新しい画像をアップロードします。