無料ツール・登録不要
Webサイトからカラーパレットを抽出
URLを貼り付けると、サイトのブランド、文字、背景、アクセントの色をhexコード付きで、使用量の多い順に表示します。無料、登録不要です。StripeのDESIGN.mdやLinearのDESIGN.mdの完全な例を見るか、DESIGN.mdでさらに何がわかるかをご覧ください。
このパレットをコードで使う
抽出ツールは、色を役割（背景、サーフェス、文字、ブランド、アクセント、ボーダー）ごとにまとめ、ページのどれだけの面積を占めるかで順位付けします。再利用するときは、スタイル全体にhexコードを貼り付けるのではなく、役割ごとに名前を付けましょう。そうすれば1か所の変更で、その色が使われているすべての場所が更新されます。
1. 色相ではなく役割で色に名前を付ける。--color-text-mutedはリデザイン後も意味が通じますが、--gray-600ではどこで使う色なのかわかりません。コピーしたhexコードに置き換えてください。
:root {
--color-brand: #635bff;
--color-text: #0a2540;
--color-text-muted: #425466;
--color-surface: #ffffff;
--color-surface-muted: #f6f9fc;
--color-border: #e3e8ee;
}
body { background: var(--color-surface); color: var(--color-text); }
a, .button-primary { color: var(--color-brand); }2. Tailwindで使う。各変数がbg-surface、text-ink-muted、border-lineなどのユーティリティになります。
/* app.css, Tailwind CSS v4 */
@theme {
--color-brand: #635bff;
--color-ink: #0a2540;
--color-ink-muted: #425466;
--color-surface: #ffffff;
--color-surface-muted: #f6f9fc;
--color-line: #e3e8ee;
}3. 使う組み合わせをチェックする。本文の文字は背景に対して4.5:1以上、大きな文字は3:1以上のコントラスト比が必要です。抽出ツールは、ページ背景に対するメインの文字色のコントラスト比を表示します。それ以外の組み合わせを使う予定がある場合は、公開前に確認してください。
カラーはデザインシステムの一層にすぎません。DESIGN.mdはカラーをタイプスケール、スペーシング、コンポーネントのルールと一緒にまとめるので、コーディングエージェントは適切な場所に適切な色を使えます。
よくある質問
カラーパレットに関する質問
無料のWebサイトのカラーパレット抽出ツールについての簡潔な回答です。
実際のブラウザでページを読み込み、描画される色をページに占める面積で計測します。各色には、背景、パネル、文字、ブランド、アクセント、ボーダーのうち、最も可能性の高い役割を割り当てます。
パレットには、ページで実際に使われている色を面積順に、最大12色まで表示します。画像や動画の中の色、ホバー時にだけ表示される色、サイトの他のページで使われている色はカウントされません。
いいえ。初めての訪問者にデフォルトで表示されるテーマ（通常はライト）でページを読み取ります。デフォルトがダークのサイトはダークで読み取られます。サイトにダークモードがある場合、完全なDESIGN.mdではダークモードも扱います。
ファイルとしてはできません。hexコードはコピーできます。スウォッチを選ぶと1色を、まとめてコピーすると全色を1行に1つずつコピーします。
はい、1ピクセルずつ取得できます。ChromeやEdgeでは、要素を右クリックして「検証」を選び、「スタイル」パネルで色の横にある四角をクリックします。カラーピッカーにはスポイトがあり、ページ上の任意の点の色を読み取れます。Firefoxでは、インスペクターのツールバーに同じスポイトがあります。
このツールは色だけを表示します。DESIGN.mdには、サイトのカラーとその役割、タイプスケール、スペーシング、コンポーネントのルールが、コーディングエージェントが従える1つのファイルにまとめられています。
その他の無料ツール
すべての無料ツールを見るデザインシステム全体が必要ですか？
あらゆるサイトのカラー、タイプスケール、スペーシング、コンポーネントをまとめたDESIGN.mdを、コーディングエージェントですぐ使える形で取得できます。