Color Code Extractor
Pull hex, RGB and HSL color codes out of text - free, with swatch preview.
What this tool does
Paste CSS, a design spec, or any text, and every hex, RGB, or HSL color code in it is found and listed with a live color swatch next to it, so you can see the actual color, not just read the code.
Finds hex codes (#3A7BD5, including 3/4/6/8-digit forms), rgb()/rgba() values, and hsl()/hsla() values in pasted text.
Renders a real color swatch next to each valid match by parsing it with the same color engine used by this site's color converter and picker tools.
Deduplicates and lets you copy or download the result as a CSV.
Renders an actual swatch for 3-digit and 6-digit hex codes and for comma-separated rgb()/rgba() and hsl()/hsla() values.
Still lists 4-digit and 8-digit hex codes (with alpha) and space-separated rgb()/hsl() syntax as text matches, even though the swatch preview can't decode those - it marks them with a dashed placeholder instead of guessing at a color.
How to use it
- Paste your CSS, design spec, or text.
- Review the color codes and their swatches.
- Copy or download the results.
Why use this extractor
Stylesheets, design notes and chats contain colour codes in several formats. Extracting them with a swatch preview makes palettes easy to gather.
Why we built it
We built the colour code extractor to show a swatch next to every match using the same parser as the colour converter. Convert codes with the colour converter and build schemes with the colour palette generator.
Who this tool is for
- Designers and developers collecting colours from CSS or text
- Students of web design
- Brand managers auditing palettes
When to use it
- Collecting a palette from CSS or a document.
- Auditing the colours used in a design.
- Checking that colour codes are valid.
- Converting a list to a palette.
Why a real swatch, not just matched text
A code without its actual color is only half the information.
A list of color codes without seeing the actual colors is only half useful - reading '#3A7BD5' doesn't tell most people at a glance whether that's a blue, a red, or a green. This tool parses every match with the same hex/RGB/HSL conversion logic already used across this site's color converter and picker, so each result shows its real rendered swatch alongside the code, making the list something you can actually scan visually.
Why some valid matches show a dashed placeholder instead of a swatch
Every code that fits the hex, rgb()/rgba() or hsl()/hsla() shape is found and listed, but rendering an actual swatch needs the color's channel values to be decoded first, and the decoder is narrower than the matching pattern.
The swatch renders for 3-digit and 6-digit hex codes, and for rgb()/rgba() and hsl()/hsla() values written with commas between the numbers - the syntax most CSS still uses. An 8-digit hex code with an alpha channel, and the newer space-separated syntax such as rgb(236 46 130), are matched and listed as text, but the decoder does not read alpha channels or the space-separated form, so those results get a dashed "no preview" box instead of a guessed color.
| Format | Listed as a match | Swatch rendered |
|---|---|---|
| #3A7BD5 (6-digit hex) | Yes | Yes |
| #3AF (3-digit hex) | Yes | Yes |
| #3A7BD5FF (8-digit hex, alpha) | Yes | No - dashed placeholder |
| rgb(236, 46, 130) (comma syntax) | Yes | Yes |
| rgb(236 46 130) (space syntax) | Yes | No - dashed placeholder |
A dashed placeholder does not mean the code is invalid. It means the value was matched and listed correctly, but its exact channel values weren't decoded for the preview - a deliberate choice over silently guessing or leaving an unmarked empty box.
What you give it, and what you get back
| Item | Details |
|---|---|
| Input | Any text containing colour codes. |
| Output | Hex, RGB and HSL values with colour swatches, de-duplicated. |
| Export | Copy or download as CSV. |
Issues you may run into
| What you see | Why it happens | What to do |
|---|---|---|
| Named colours are missing | Only hex, rgb and hsl are matched. | Convert names first. |
| A malformed code is ignored | Invalid values do not match. | Fix the code. |
| Duplicates in different formats | Formats are listed separately. | Convert to one format with the colour converter. |
Assumptions and limitations
- This finds codes matching a valid color format - an invalid or malformed code (like a hex value with a non-hex character) simply won't match, rather than being shown as an error.
- Named CSS colors (like 'cornflowerblue') aren't matched - only hex, rgb()/rgba() and hsl()/hsla() notations.
Frequently asked questions
How do I extract color codes from CSS online for free?
Paste your CSS or text and every hex, RGB and HSL color code found appears instantly with a swatch preview.
Does this show what the color actually looks like?
Yes - each valid match is rendered as a real color swatch, using the same parser as this site's color converter tools.
Does this catch named CSS colors like 'red' or 'cornflowerblue'?
No - only hex codes, rgb()/rgba(), and hsl()/hsla() notation are matched, not the named color keywords.
What hex formats are supported?
3-digit, 4-digit (with alpha), 6-digit, and 8-digit (with alpha) hex codes are all recognized.
Is my data uploaded anywhere?
No. Extraction happens entirely in your browser - nothing is sent to a server.
Why does one of my matches show a dashed box instead of a color?
The swatch preview understands 3-digit and 6-digit hex codes and comma-separated rgb()/rgba() and hsl()/hsla() values. An 8-digit hex code with an alpha channel, or the newer space-separated syntax like rgb(236 46 130), is still matched and listed as text, but the preview can't decode its exact values, so it shows a dashed "no preview" placeholder instead of guessing at a color.
Does this convert between hex, RGB and HSL?
No. It extracts and lists whatever format was written in the source text and shows a swatch for the formats it can parse; it does not rewrite a match into a different color format. Use this site's color converter for that.