How do I find every color used in a CSS file?

Open the Stylesheet tab and paste your CSS, drop a .css file on the editor or click Open file. Every color is listed on the right with how often it is used and on which lines. Click a color to highlight all its uses in the editor and jump between them.

Which CSS color formats are supported?

All of them: HEX with 3, 4, 6 or 8 digits, rgb() and rgba(), hsl() and hsla(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 ...), color(srgb ...) and all 148 named colors. Both the classic comma syntax and the modern space syntax with a slash for opacity are read.

What is OKLCH and should I use it?

OKLCH describes a color by lightness, chroma (how colorful) and hue, and it is built so that equal steps look equal to the eye. That makes it great for building shades and keeping text contrast predictable. All modern browsers support it, and it can also describe colors outside the classic sRGB range.

CSS Color Scheme Editor - Edit and Analyze CSS Colors Online

style.css

Paste your CSS here
or drop a .css file on this box.

Every color is underlined in its own color. Click one in the list to highlight all its uses.

Any CSS color

Type or paste any color - HEX, rgb(), hsl(), oklch(), a name...

Aa-on white

Aa-on black

HEX -

RGB -

HSL -

HWB -

LAB -

LCH -

OKLAB -

OKLCH -

Display P3 -

Name -

Use this color in the Color Wheel, the Contrast Checker or the Gradient Generator.

Colors 0

No colors yet - paste some CSS and they show up here.

---

:root {}

Use in stylesheet adds the block at the top and swaps each color for its var(). Values that already sit in a custom property are left alone.

Uppercase HEXOff - writes #3399cc OFF

style.cssPaste some CSS to start

How to edit the colors of a CSS file

Add your CSS. Paste a stylesheet into the editor, drop a .css file on it or click Open file.

Review the colors. Every color is listed with its uses and line numbers. Click one to highlight it in the code.

Edit the color scheme. Replace a color everywhere, group near-duplicates, convert all colors to one format or turn them into CSS variables.

Copy or download. Copy the edited CSS or download it as a .css file.

Want the file smaller when you are done? Run it through Minify JS/CSS before you upload it.

CSS color formats at a glance

Format	Example	Good for
HEX	`#3399cc`	Short, works everywhere. 8 digits add opacity.
RGB	`rgb(51, 153, 204)`	Red, green and blue from 0 to 255.
HSL	`hsl(200, 60%, 50%)`	Tweaking by hand - hue, saturation, lightness.
HWB	`hwb(200 20% 20%)`	Mixing a hue with white and black.
LAB / LCH	`lch(59.19% 39.14 244.33)`	Print and design work, based on human vision.
OKLCH	`oklch(64.75% 0.1187 235.02)`	Even shades and design tokens in modern CSS.
Display P3	`color(display-p3 0.3205 0.5918 0.7818)`	Extra-vivid colors on newer phones and Macs.
Name	`steelblue`	Quick prototypes - there are 148 of them.

All of these describe the same kind of thing, so the tool can turn any of them into any other.

Tips for a clean color scheme

Count your blues. Most stylesheets have three or four shades that were meant to be one. Group similar colors, then Replace all.

Name your colors. CSS variables let you change a brand color in one place. Start from a palette made with the AI Color Palette or the Color Wheel.

Check readability. Body text needs a contrast of at least 4.5:1. Test your pairs with the Contrast Checker.

Match your images. Grab colors straight from a logo or photo with the Image Color Picker, or recolor an image with the Image Color Replacer.

Pick one format. Mixing HEX, rgb() and names makes colors hard to search. Convert all colors gives you one style in a click.

Frequently Asked Questions

Open the Stylesheet tab and paste your CSS, drop a .css file on the editor or click Open file. Every color is listed with how often it is used and on which lines.

Click a color to highlight all its uses in the editor and jump between them. Only want to read a big file? The CSS Viewer is made for that.

Click the color in the list, type the new color in the Replace box (or pick it with the swatch) and click Replace all.

By default every value keeps its own format and opacity, so rgba(51, 153, 204, 0.5) stays an rgba value at 50%. Undo puts everything back.

All of them: HEX with 3, 4, 6 or 8 digits, rgb() / rgba(), hsl() / hsla(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 ...) and all 148 named colors.

Both the classic comma syntax and the modern space syntax with a slash for opacity are read.

Yes. Open CSS variables under the color list. The tool names every color, for example --color-steelblue, and shows the :root block to copy.

Use variables in stylesheet adds that block to the top of your CSS and swaps every color value for its var(). Need a fresh palette first? Try the AI Color Palette.

Because their codes differ slightly, like #3399cc and #3498db. Stylesheets collect these near-duplicates over time.

Set Group similar colors to Close or Similar and they share one swatch, so one Replace all cleans them up.

OKLCH describes a color by lightness, chroma (how colorful) and hue, and equal steps look equal to the eye. That makes it great for shades and for predictable text contrast.

All modern browsers support it. Explore hues visually on the Color Wheel.

Type the color in the Color tab. You get its contrast ratio as text on white and on black, with the WCAG AA and AAA result.

For any other pair of colors, open the Contrast Checker.

No. Reading, editing and converting all happen in your browser, and nothing is sent to our server.

Your last stylesheet is kept in this browser only, so it is still there when you come back. See our Privacy Policy.

How to edit the colors of a CSS file

CSS color formats at a glance

Tips for a clean color scheme

Frequently Asked Questions

Guides & Tutorials