Extract Colors from Code

Why extract a color palette from code?

The colors on an existing website are often much easier to see than to collect.

Perhaps you inherited a website with several stylesheets. Or a client likes the colors on an older site but no longer has the original palette. Perhaps you are reviewing a design system that slowly grew from a few intentional values into a long list of almost-identical grays, blues and overlays.

You could search through the code one value at a time.

Or you could open a page source with View Source or Ctrl + U, copy the relevant HTML or CSS, and drop it into Qolorio Color Extractor.

Qolorio turns the literal color values it finds into one clear inventory. It groups matching colors even when they were written differently, shows where they came from, and lets you select the palette that is actually worth keeping.

This is a quick way to understand an existing color system before you decide whether to change it.

It does not change your files. It gives you a clear inventory to work from.

Start with what is already there

The extractor is useful whenever colors already exist in code, text or files.

Paste a CSS file, a copied HTML page, a JSON theme export, JavaScript, a configuration file or an unstructured snippet. You can also add several files at once.

Qolorio recognizes HEX, RGB, HSL, HWB, Lab, LCH, OKLab, OKLCH, CSS color names and several other common notations. It does not treat #EB586B, #eb586b and an equivalent RGB value as three different palette colors. They are shown as one resolved color, with the original ways of writing it still available to inspect.

That means the palette reflects the colors, not accidental differences in spelling or format.

See where a color is being used

Each color keeps its source name, use count and line references.

When the surrounding code makes it clear, Qolorio also adds a careful usage signal: text, surface, border, icon, shadow, action or a named status state. These signals are clues from the source, not claimed design roles. A color used for background is likely a surface color; that does not mean it has the same meaning everywhere in the finished interface.

This distinction is important.

The tool can help you find a color and its likely context. It does not pretend to understand every component, inherited style or decision behind a full website.

Find things worth reviewing

The first few findings focus on the clearest places to look: very similar colors, crowded gray scales, repeated opacity variants, many one-off values, existing variables and direct low-contrast text/background pairs written in the same CSS rule.

These are review signals, not automatic fixes.

Two close blues might be an unnecessary drift. They might also be a deliberate hover state. Three transparent black overlays may be messy, or they may be carefully tuned for different surfaces. Qolorio shows the values beside each other, gives you the source locations and explains why they are worth checking. You keep the final judgement.

If you add a previous version as well, the tool can show which colors were added and removed. This is useful for checking color drift after a redesign or component update. It is not a quality score.

Choose the palette you want to take forward

The extracted palette is the complete record of what Qolorio found.

The selected palette is your working palette.

Select the values that belong together: the brand colors, the neutral steps, the useful accents and the colors you know need to remain. Leave out old experiments, near duplicates or values that only belong to one isolated asset when they are not part of the system you want to document.

This is why Qolorio does not reduce the palette automatically. A color used ten times is not always more important than a less common brand color. The tool makes the evidence visible; you decide which colors carry the project forward.

Continue with the selected palette in Studio

Choose Use selected palette in Studio to transfer 2 to 20 solid colors into a new Color Studio project in the same browser.

In Studio, assign colors to semantic roles, check the core foreground and background pairs, and preview how the system works in different design contexts.

If you already have an active Studio project, Qolorio asks for confirmation before replacing it. The handover stays in your browser; no palette is sent to Qolorio.

Everything stays in your browser

Your code, pasted text and uploaded files are analysed locally in your browser.

Nothing is uploaded to Qolorio. Nothing is sent to us. And nothing in the supplied source is changed, rewritten or patched.

The downloaded input file is there only to help you trace pasted-text line numbers later. It is created by your own browser from the sources you supplied.

Export a clear reference

Export the complete inventory when you need an audit, or export the selected palette when you need a cleaner reference.

Use Studio when you want to test the selected palette in an interface. Use the exports here when you need to share the palette, document it or bring its values into code.

Create an SVG palette, PNG brandboard or PDF brandbook for discussion and review. Download plain values, JSON or a starter tokens.css file when you need the color values in code.

The generated tokens use color-family names and numbers rather than assumed interface roles. That keeps the export honest. A developer can later decide whether one dark value should become a body-text token, an outline token, an icon token or several separate semantic variables.

When you want to inspect one color in another format, use the Qolorio Color Converter. When you are ready to test palette relationships in a larger system, continue with Color Studio. For a direct foreground/background check, use the Color Contrast Checker.

The palette was already in the code. Now you can see it clearly.