カラーコード抽出
貼り付けたCSSやHTML等のテキストから、HEX・RGB・HSLのカラーコードを抽出して一覧にします。
入力例
結果
入力して「抽出」を押してください。
このツールでできること
カラーコード抽出にまつわる主な機能です。
- CSS・HTML等のテキストからHEX・RGB・HSLのカラーコードを抽出できます
- 同じ色をまとめ、出現回数・元の書き方を確認できます
- 並び順(出現回数の多い順・出現順)を選べます
- 重複を除いたカラーコードの一覧を1行1色でコピーできます
- 入力・表示はブラウザ内で処理し、サーバーへ送信しません
手順を見る
- CSSやHTML等のテキストを貼り付けます
- 「同じ色をまとめる」・並び順・出力書式を選びます既定でそのまま実行できます
- 「抽出」を押します
- 結果一覧を確認し、「一覧をコピー」でコピーします
こんなときに使えます
こんな場面でカラーコード抽出が役立ちます。
利用シーンを見る
- 自分・自社のサイトの配色を整理したいとき
- 似た色が何種類も使われていないか確認したいとき
- デザインの引き継ぎのために使用色を一覧化したいとき
- 抽出した色を濃淡生成・混色ツールの基準色に使いたいとき
カラーコード抽出の仕組み
詳しい解説を見る
対応している書式
HEX(#rgb・#rrggbbの3桁・6桁のみ)、rgb(R, G, B)、hsl(H, S%, L%) の3書式に対応しています。4桁・8桁HEX(アルファ付き)・rgba()・hsla()・名前付きの色(red等)・ 新しい色空間(oklch()等)・空白区切りのrgb()には対応していません。
誤検出について
CSSのIDセレクタ(#add・#fff等)と色を文字列だけで区別できない場合があり、拾い過ぎ・拾い漏れがあり得ます。 CSSとして構文解析する方式は採用していません。英数字・ハイフン・アンダースコアに隣接する3桁・6桁HEXは候補にしません (識別子の一部を誤って拾わないための設計です)。
CSS変数について
CSS変数の値として書かれた色(例: --main: #2f6f9f;)は抽出しますが、var(--main) という参照からは色を抽出しません。
「同じ色」の判定
正規化後のRGB整数値が一致するものを同じ色として扱います。#fffと#ffffffとrgb(255, 255, 255) はすべて同じ色としてまとめられます。
結果の正確さについて
この抽出は文字の並びにもとづく機械的な処理であり、すべての色を正確に抽出できるとは限りません。実際の結果は必ずご自身でご確認ください。
よくある質問
HEXの4桁・8桁(アルファ付き)は抽出できますか?
いいえ。対応しているのはHEXの3桁・6桁のみです。アルファ付きの4桁・8桁HEXは抽出しません。
`rgba()`・`hsla()`は対応していますか?
いいえ。対応しているのは`rgb()`・`hsl()`のみで、アルファ(透過度)付きの記法には対応していません。
CSSのIDセレクタを誤って拾うことはありますか?
あります。例えば`#add`のようなIDセレクタは、色として書かれているのか識別子として書かれているのかを文字列だけでは区別できません。英数字・ハイフン・アンダースコアに隣接する3桁・6桁HEXは候補にしないことで一部を除外していますが、完全ではありません。
同じ色の別の書き方はどう扱われますか?
正規化後のRGB整数値が一致するものを同じ色として扱い、「同じ色をまとめる」が有効なときは1つにまとめます。
入力した内容は外部に送信されますか?
いいえ。処理はすべてブラウザ内で完結しており、入力内容が外部やアクセス解析(GA4)へ送信されることはありません。