URLから色を取得
Webサイト配色抽出ツール
Webサイト配色抽出ツールは、URLからWebサイトのHTMLとCSSを読み取り、サイトのカラーパレットを返します。ブランドカラー、アクセント、背景、文字、枠線の各色に、CSS変数と使用比率が付きます。
- 無料・登録不要
- 実際のCSSと変数を読み取ります
- 何も保存しません
ブロックされた場合はHTMLまたはCSSを貼り付け
Webサイト配色抽出ツールはどのように動作しますか？
Webサイト配色抽出ツールは、ページとそのスタイルシートをダウンロードし、コード内のすべての色の値を読み取り、ページ内で使われる場所と頻度で色を順位付けします。
URLを入力
example.comのようなドメインを入力するか、公開ページの完全なURLを貼り付けます。抽出ツールはページと最大25個のスタイルシートを取得します。
スタイルシートを解析
hex、rgb、hsl、hwb、lab、lch、oklab、oklch、color()、148種類の名前付きカラーのすべての色構文を読み取ります。CSS変数はその値に解決されます。
色に役割を付与
CSSプロパティによって、各色の役割（背景、文字、枠線、塗り、影）が決まります。ページ上の要素に一致するルールは3倍で数えます。
パレットをコピー
ブランドカラーを先頭に、アクセント、背景色、文字色の順に並びます。パレットはCSS、Tailwind、デザイントークンとしてエクスポートできます。
抽出ツールはサイトのブランドカラーをどのように見つけますか？
ブランドカラーは、ボタン、リンク、ブランドを示す名前のCSS変数に現れる、最も使用頻度の高い彩度のある色です。
- 彩度。 OKLCHのクロマが0.05以上の色だけが、ブランドカラーやアクセントカラーの候補になります。グレーとグレーに近い色はニュートラルとして扱います。
- 配置。
.btn、button、a、.ctaなどのセレクターに含まれる色は重みが増します。 - 命名。
--primary、--brand、--accentなどの変数は重みが増します。 - theme-color。 CSSの色と一致する
<meta name="theme-color">の値は、強いブランドのシグナルになります。
| 役割 | CSSプロパティ |
|---|---|
| 背景 | background、background-color、グラデーション |
| 文字 | color、text-decoration-color、caret-color |
| 枠線 | border、outline、column-rule |
| 塗り | fill、stroke、stop-color、accent-color |
| 影 | box-shadow、text-shadow（一覧には表示し、メインパレットからは除外） |
使われている色と未使用のCSSをどのように区別しますか？
抽出ツールは、セレクターがページのHTML内の要素に一致するCSSルールに3倍の重みを与えます。CSSフレームワークにはページで使われない色が多く含まれており、セレクターの一致判定によって、それらの色が実際のデザインの色より上位になることを防ぎます。
:hoverと:focusの色は操作中にしか表示されないため、半分の重みで数えます。@media printのルールは無視します。- 不透明度35%未満の色は、オーバーレイやティントとみなして除外します。
- ΔE_OKの差が0.02未満の色は1つのスウォッチに統合され、そのバリエーションが一覧表示されます。
抽出ツールはダークモードの色も見つけますか？
はい。@media (prefers-color-scheme: dark)内のルールと、.darkや[data-theme="dark"]などのセレクター配下のルールから、独立したダークモードのパレットを作ります。
抽出ツールがダークモード用のルールを解決するときは、CSS変数のダークモード用の値がライトモード用の値を置き換えます。そのため、ダークモードのパレットには、訪問者がダークモードで見る色が表示されます。
Webサイト配色抽出ツールで読み取れない色はどれですか？
Webサイト配色抽出ツールはサーバーが送信するコードを読み取るため、次の3種類の色は取得できません。
- 実行時のスタイル。 CSS-in-JSライブラリは、ブラウザでページが読み込まれた後にスタイルを挿入します。
- 画像内の色。 写真、ラスター形式のロゴ、動画の中の色はピクセルであり、CSSではありません。サイトのロゴとアイコンの色は、抽出ツールが別途読み取ります。
- 保護されたサイト。 ボット対策が施されたサイトは、自動リクエストを拒否します。
これらの場合は、ページのHTMLまたはCSSをコード入力欄に貼り付けるか、スクリーンショットを撮ってカラーパレット抽出ツールにドロップしてください。ガイドWebサイトの使用色を調べる方法（英語）では、ブラウザのDevToolsを使う方法も解説しています。
Webサイト配色抽出ツールを使うのはどんな人ですか？
デザイナー
リニューアル前にクライアントの現在のブランドカラーを確認したり、参考サイトの配色を研究したりします。
開発者
サイトのカラートークンと変数名を復元し、テーマを再構築します。
マーケター
ランディングページ、広告、メールの色をメインのWebサイトの色に合わせます。
アクセシビリティ担当者
「コントラスト」タブで、サイトの文字色と背景色の組み合わせをWCAGのコントラスト基準で確認します。
Webサイト配色抽出ツールのよくある質問
サイトの一部の色が表示されないのはなぜですか？
実行時にJavaScriptで適用される色、画像内の色、ログインが必要なページの色は、サーバーが送信するHTMLとCSSに含まれないためです。
ボットをブロックするサイトから色を抽出できますか？
はい、代替手段で抽出できます。ブラウザでサイトを開いてHTMLやスタイルシートをコード入力欄に貼り付けるか、スクリーンショットを画像抽出ツールにアップロードしてください。
抽出ツールは確認したWebサイトを保存しますか？
いいえ。サーバーはリクエストに応じてページとスタイルシートを取得し、コピーは保持しません。色の解析はブラウザ内で行われます。
色の横にあるパーセンテージは何を意味しますか？
パーセンテージは、ページ内での重み付けされたCSS使用量に占めるその色の割合です。コード内でその色が使われる頻度を示すもので、画面上でその色が占める面積を示すものではありません。
トップページ以外のページも確認できますか？
はい。公開ページの完全なURLを入力してください。例：example.com/pricing