Color Palette Extractor (Text)
Scan any pasted text or code for hex codes, rgb()/rgba(), and hsl()/hsla() color values, and see them as a deduplicated list with swatch previews.
4 Colors Found
#3B82F6
#f00
rgba(255, 255, 255, 0.9)
hsl(217, 91%, 60%)
How to Use the Color Palette Extractor (Text)
Paste any text or code — a CSS file, a design spec document, or notes containing color references — and the tool scans it with regular expressions to find every color value pattern: hex codes (like #fff or #3B82F6, with or without alpha), rgb()/rgba() function calls, and hsl()/hsla() function calls. Every unique color found is shown as a deduplicated list with a small swatch preview.
Example
Pasting a CSS snippet containing background: #3B82F6;, color: rgba(255, 255, 255, 0.9);, and border: 1px solid hsl(217, 91%, 60%); extracts all three color values, each shown with a matching swatch.
Common Use Cases
- Pulling every color used in a CSS file into one quick reference list.
- Auditing a design spec document for the full set of colors it defines.
- Spotting inconsistent or near-duplicate color values scattered across a codebase.
FAQs
- Which color formats does it detect? Hex codes (3, 4, 6, or 8 digits, with the leading #),
rgb()andrgba()function calls, andhsl()andhsla()function calls — the most common formats used in CSS and design documents. - Are duplicate colors removed? Yes — if the same exact color value appears multiple times in the pasted text, it's only listed once in the results.
- Does it detect named CSS colors like "red" or "cornflowerblue"? No — this tool specifically looks for hex, rgb/rgba, and hsl/hsla patterns using regular expressions, not plain color name words. Use the CSS Color Name Finder tool to work with named colors.