How to extract hex color codes from text
The results table adds each match's format, source line, and nearby context to the extracted list. Paste text into the input area or load one supported file, then choose how the list should handle repeated values and letter case.
- Paste text into the input area.
- Select Upload to load one
.txt,.css,.html,.json, or.logfile. - Leave Unique only checked to keep the first case-insensitive occurrence, or clear it to keep every occurrence.
- Select Normalize case (lowercase) when the displayed matches should use lowercase letters.
- Review Output text and the results table, then select Copy or Download for the extracted color list.
Which CSS hex formats are recognized
The extractor finds #RGB, #RGBA, #RRGGBB, and #RRGGBBAA. It reads the input as text. A match is not checked against CSS rules, converted to RGB, or used for a contrast calculation.
Unique only keeps the first spelling when the same value appears again with different letter case:
.btn { background: #3A7BD5; }
.card { color: #FFF; }
legacy: #3a7bd5#3A7BD5
#FFFWhat Unique only and Normalize case (lowercase) change
- Unique only starts checked. It compares matches without regard to letter case and keeps the first occurrence. Clear it to retain every detected occurrence.
- Normalize case (lowercase) changes the letters in each displayed match to lowercase. The match keeps its 3-, 4-, 6-, or 8-digit length, so shorthand stays shorthand.
- The results table shows the retained match with its Format, Line, and shortened Context.
- Output text contains the color list. Copy and Download leave out the table's line and context details.
What the extractor ignores
The extractor skips a candidate when its # follows another # or a hexadecimal digit. It also skips a candidate when another hexadecimal digit follows it. This keeps a longer hexadecimal run from being split into a shorter color code.
If the input has no retained matches, the count shows 0 colors found. The results section stays hidden, and Copy and Download are disabled.
Examples with stylesheets and text files
- Paste a stylesheet to collect the colors used by a component, then copy the list into a review note.
- Check an HTML, JSON, or log excerpt for embedded color literals and use the Line and Context columns to locate each match.
- When a file contains uppercase and lowercase spellings of one value, use Unique only to keep the first occurrence and Normalize case (lowercase) to set the displayed casing.
When another text extractor fits better
Use Text Parsing & Data Extraction when the value you need is not a CSS hex color. Choose Custom Regex Extractor for a pattern you define yourself, Currency Extractor for monetary amounts marked by currency symbols or uppercase codes, or Coordinate Extractor when the input contains geographic coordinate formats.
Frequently asked questions
How do I extract hex color codes from CSS?
Paste the CSS into the input area, then review Output text and the results table. Select Normalize case (lowercase) when the copied list should use lowercase letters.
Does it find 3-digit and 8-digit hex colors?
It finds #RGB and #RRGGBBAA, along with #RGBA and #RRGGBB. It does not convert or expand the matched text.
What happens when the same hex color appears twice?
Unique only keeps the first case-insensitive occurrence and removes later duplicates. Clear it to keep each detected occurrence.
Can I upload a CSS file?
Select Upload and choose a .css file. Upload also accepts .txt, .html, .json, and .log files.
Can I copy the color list with line context?
Copy and Download export only the extracted color list from Output text. The results table keeps the Format, Line, and Context details, but the export does not include them.