PixelVault のカラー・画像アナライザーは、あらゆる画像からパレット・ヒストグラム・コントラスト情報を、すべてブラウザ内で抽出します。写真・イラスト・スクリーンショットを追加すれば、主要色がコピー可能な 16 進数コードとして、それぞれの色の占有率とともに即座に得られます。何もインストールせず、ファイルをアップロードせずに、気に入った画像からパレットを取り出せる手早い方法です。
主要色から、まとまりのある配色を作るための補色・類似色・トライアド・モノクロームのハーモニーを生成でき、パレット全体を素の HEX、CSS 変数、SCSS 変数、JSON、Tailwind 設定として書き出せます。そのままプロジェクトに貼り付けられます。より詳しい分析では、RGB と輝度のヒストグラムが露出と階調のバランスを示し、グレースケールのプレビューで色なしでの見え方が分かり、WCAG コントラストチェッカーが、テキストと背景の組み合わせがアクセシビリティの AA・AAA を満たすかどうかを教えてくれます。
仕組み
PixelVault は画像を縮小した解像度でサンプリングし、似た色をまとめて主要色を見つけ、色空間を変換してハーモニーを作り、ピクセル値を読み取ってヒストグラムを計算します。コントラスト比には WCAG 2.1 の相対輝度の計算式を使います。これらはすべて、すでにブラウザに読み込まれたピクセル上で実行されます。
ローカル処理が重要な理由
ローカルでの解析は、クライアントの仕事・未公開のデザイン・プライベートな写真といった画像をネットワークから遠ざけます。アップロードはなく、コピーを保持しうるサーバーもなく、ピクセルはすでにページ内にあるため結果は瞬時に表示されます。
対応フォーマット
- JPG — そのまま解析します。
- PNG — 色のサンプリング時に透過を考慮します。
- WebP — 完全対応。
主な使用例
- 写真やデザインの参考画像からカラーパレットを抽出できます。
- ブランドや UI に合う配色を生成できます。
- アクセシビリティのために、テキストと背景のコントラストをチェックできます。
- RGB と輝度のヒストグラムで露出と階調を確認できます。