画像から主要な色を抽出します
ドラッグ＆ドロップまたはクリックしてアップロード
PNG, JPEG, WebP, GIF
高解像度の画像ほど、より正確な色を抽出できます
抽出されたプライマリカラーをブランドのメインカラーとして活用
テキストと背景色の組み合わせがWCAG基準を満たしているか確認
補色と類似色を活用して調和のとれたデザインを作成
CSS、Tailwind、SCSSなどの形式でパレットをエクスポート
色をクリックして選択し、2つの色のコントラスト比を分析
カラーエクストラクタは、画像から主要な色を自動的に抽出してカラーパレットを生成するツールです。抽出された色に基づいて、色調和分析、WCAGアクセシビリティチェック、ブランドカラー提案まで提供し、CSS/Tailwind/SCSS/JSON形式でエクスポートできます。
画像をアップロード
画像をドラッグするかクリックして、色を抽出する画像をアップロードします
パレットを確認
自動抽出された主要色とカラーパレットを確認します。パレットサイズも調整できます
色を分析
カラーハーモニーとアクセシビリティ分析を確認します。2色を選ぶとコントラスト比を分析できます
エクスポート
パレットをCSS、Tailwind、SCSS、JSON形式でエクスポートまたはダウンロードします
PNG、JPEG、WebP、BMPなど、ブラウザが対応するほとんどの画像形式を使用できます。
WCAG 2.1ガイドラインで定められた、テキストと背景色の明度差を示す比率です。通常テキストは4.5:1以上、大きいテキストは3:1以上でAA基準を満たします。
はい、パレットサイズの設定で抽出する色の数を調整できます。
カラーハーモニーは、カラーホイール上の関係に基づく配色の原理です。補色（180度）、類似色（隣接）、トライアド（120度間隔）などがあり、調和の取れたデザインを作るために活用されます。
はい、CSS変数、Tailwind設定、SCSS変数、JSON形式ですぐにエクスポートできるため、開発にそのまま活用できます。