カラーパレットはWebページのすべての要素をスキャンし、テキストや背景からボーダー、シャドウ、アクセントカラーまで、使用されているすべての色を抽出します。色は使用頻度（最多使用順）でソートされたビジュアルswatchとして表示され、それぞれのHEX値と使用回数が確認できます。swatchをクリックしてコピーするか、パレット全体をカラーコードリストとしてエクスポートできます。
よく設計されたWebサイトには、通常3〜8色のメインカラーとニュートラルカラーで構成された一貫したカラーパレットがあります。カラーパレットは、すべての要素のcomputed color・background-color・border-color・box-shadowの値をスキャンすることで、このパレットを自動的に抽出します。結果は使用頻度順にソートされたページ上のすべての色のコレクションで、サイトのカラーシステム全体を把握できます。ドミナントカラー（メインブランドカラー・背景色・テキスト色）は高い使用回数で上位に表示されます。アクセントカラーや単発の色は下位に表示されます。デザインリサーチに非常に役立ちます。任意のWebサイトにアクセスして、数秒で正確なカラーパレットを抽出できます。自分のサイトの監査にも有用で、デザインシステムに属さない不正な色はないか、デザイン仕様が3色しか定義していないのに5種類の微妙に異なるグレーを使っていないかなどを確認できます。カラーパレットはすべてのカラー使用を可視化してカウントできるようにします。
ページ上のすべての表示要素をスキャンし、computedプロパティ（color・background-color・border-color・box-shadow color・outline-color・text-decoration-color）から色を抽出します。ページ上で使用されているすべての色がキャプチャされます。
色は使用回数順にソートされます。最も多く使われている色が先頭に表示されます。ドミナントなブランドカラーや背景色が上位に来て、単発のアクセントカラーは最後に表示されます。ページのプライマリ・セカンダリ・アクセントカラーが一目でわかります。
各色は大きなビジュアルswatchとしてHEXコードと使用回数を付けてレンダリングされます。swatchは#333と#2a2a2aのような微妙な色調の違いも識別できるほど十分な大きさです。
任意のcolor swatchをクリックするとHEX値がクリップボードに即座にコピーされます。カラーパネルやサブダイアログを開く必要はありません。クリック一つでコピー完了です。
「Export All」をクリックすると、パレット全体がHEXカラーコードの整形済みリストとしてコピーされます。デザインツール・CSS変数ファイル・カラードキュメントに貼り付けられます。リストは使用頻度のソート順が保持されます。
色は正規化（同一色のrgbとhex表現をマージ）され、重複が排除されます。パレットにはユニークな色のみが表示され、重複する表現の使用回数は合算されます。
美しいカラースキームを持つWebサイトにアクセスして、正確なパレットを抽出します。その色を自分のデザインの出発点として活用するか、どのカラーコンビネーションが効果的かをドキュメント化できます。
自分のサイトでカラーパレットを実行してブランドカラーの一貫性を確認します。1色であるべき青が4種類の微妙に異なる青になっていないか、ブランド外の色が紛れ込んでいないか。使用頻度のソートで不一致が一目瞭然になります。
パレットをエクスポートして、CSSカスタムプロパティ（--color-primary・--color-secondaryなど）に変換します。使用頻度順の出力により、どの色がプライマリ・セカンダリ・アクセントの役割にふさわしいかがわかります。
競合サイトからカラーパレットを抽出して、ブランドポジショニングを把握します。ウォームカラーかクールカラーか、高コントラストかミュートか、パレットから意図的なデザインの選択が読み取れます。
すべてのテキストカラーを背景色と並べて確認します。コントラストが低すぎるテキストと背景の組み合わせはないか。パレットはWCAGコントラスト要件に照らし合わせて確認すべき全色のセットを提供します。
DevSuite Proのフローティングドックを開き、カラーパレットアイコンをクリックします。ツールがページ上のすべての要素をスキャンし、カラー値を抽出します。
使用頻度順にソートされたcolor swatchのグリッドが表示されます。最も多く使われている色が上部に表示されます。各swatchにはHEXコードとその色を使用している要素数が表示されます。
任意のswatchをクリックしてHEX値をクリップボードにコピーします。コピー確認が一瞬表示されます。
「Export All」をクリックして、すべての色を整形済みリストとしてコピーします。CSS変数ファイル・デザインツール・ドキュメントに貼り付けられます。
同じサイト内の異なるページに移動してパレットを抽出し、サイト全体のカラーの一貫性を確認します。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
