ウェブサイトからカラーパレット抽出
任意のウェブサイトのURLを入力すると、そのカラーパレットを抽出します。スタイルシートで使われているすべての色を使用頻度順に並べ、コードとしてコピーまたはエクスポートできます。
抽出されたパレット
ウェブサイトのアドレスを入力してカラーパレットを抽出してください。
読み取れるのは公開ウェブページのみで、色はページが配信するCSSから取得されます。画像やcanvasで描画するサイトは、見つかる色が少なくなる場合があります。無料、登録不要です。
ウェブサイトからカラーパレット抽出について
ウェブサイトからカラーパレット抽出ツールは、サイトが実際に使用している色を明らかにします。公開ウェブアドレスを入力すると、ページはこちら側で取得されます。ブラウザーはクロスオリジン制限のため他のサイトを直接読み取れないためです。その後、インラインスタイル、埋め込みスタイルブロック、リンクされたスタイルシートがスキャンされ、すべての色トークンが抽出されます。
HEX、rgb()、rgba()、hsl()、hsla()の値はすべて単一のHEX形式に正規化されてカウントされるため、パレットは各色がサイトのCSSに現れる頻度順に並んで返されます。この頻度順の並びこそが、ブランドの本当のメインカラーを、リストの下の方にある数十もの一度きりのボーダーやシャドウから区別するものです。
各スウォッチはワンクリックでコピーでき、エクスポートパネルは結果をCSS変数、SCSS、Tailwind設定、JSON、SVGスウォッチシート、またはプレーンなHEXリストに変換します。このツールは無料でレート制限があり、公開アドレスにのみアクセスし、抽出結果の短命なキャッシュ以外は何も保存しません。
ウェブサイトからカラーパレット抽出の使い方
- 公開ウェブサイトのアドレスをフィールドに貼り付けます（省略した場合は https:// が自動的に追加されます）。
- 「色を抽出」をクリックし、ページとそのスタイルシートが読み取られる間しばらく待ちます。
- パレットを確認します。色はサイトのCSSに現れる頻度順に並んでいます。
- 任意のスウォッチをクリックしてHEX値をコピーするか、「すべてコピー」でリスト全体をコピーします。
- エクスポートを開いて、パレットをCSS、SCSS、Tailwind、JSON、SVG、またはプレーンなHEXとして取得します。
よくある質問
このツールにアドレスを貼り付けて「色を抽出」をクリックします。ページのスタイルシートとインラインスタイルを読み取り、見つかったすべての色を頻度順に並べて表示するため、最もよく使われるブランドカラーが最初に表示されます。
スタイルシートには通常、ブランドカラーよりもはるかに多くの付随的な色（ボーダー、シャドウ、ホバー状態）が含まれています。各値が現れる頻度を数えることで、サイトを特徴づける色をリストの上位に押し上げます。
このツールはページが配信するCSSを読み取ります。画像、canvas、WebGLでデザインを描画するサイトや、読み込み後にJavaScriptで完全にスタイルを構築するサイトは、スタイルシートにほとんど色の値を公開しません。ログインやボット保護の壁の背後にあるページも読み取れません。
いいえ。受け付けられるのは公開ウェブアドレスのみです。プライベート、ローカル、または予約済みネットワークアドレスへのリクエストはセキュリティ対策としてブロックされ、標準のHTTPおよびHTTPSポートのみが許可されます。
はい、上限まで含まれます。ページからリンクされたスタイルシート（CDN上のものを含む）は同じ安全性チェックを通じて取得されるため、外部CSSファイルで定義された色もページ自体のスタイルと並んでカウントされます。
はい、完全に無料でアカウントは不要です。リクエストはサービスを誰でも利用できるようにするためレート制限されており、結果は短時間キャッシュされるため、同じURLを繰り返すと即座に返されます。
人気の検索
ウェブサイト カラーパレット 抽出
ウェブサイト カラーピッカー
ウェブサイトで使われている色を調べる
url から色を抽出
このサイトはどんな色を使っているか
サイト 配色 検索
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。