Skip to content
Toolden

TOOLDENDEVELOPERON-DEVICE

Color Palette from CSS: Extract All Colors

Extract every color from your CSS or HTML, normalized with usage counts. All processing happens in your browser.

0 chars

Extraction happens automatically as you type. Hex (#abc, #abcdef, #abcdef00), rgb(), rgba(), hsl(), hsla() and named colors are supported.

Paste CSS on the left. Every color, hex, rgb, hsl and named, shows here with usage counts.

Click a swatch to copy its hex value. Counts show how often each color appears in your CSS.

HOW TO USE

  1. 1Paste your CSS or HTML into the box on the left.
  2. 2Extraction runs live while you type. No button press needed.
  3. 3Swatches on the right show the hex value, how many times it was used and the original notation.
  4. 4Click any swatch to copy its hex code.

EXAMPLE

INPUT

.btn { background: linear-gradient(90deg, #667eea, #764ba2); color: gray; }

OUTPUT

#667eea (1x), #764ba2 (1x), #808080 (1x). Normalized from hex, hex and named color.

FAQ

Which color notations are supported?
Hex, rgb/rgba, hsl/hsla and named CSS colors. All are normalized to a canonical hex value with usage counts.
Does it upload my CSS?
No. All processing happens in your browser.
Does it extract colors from images?
No. This tool parses CSS and HTML text. Use the image color picker for extracting colors from photos.
Are the color values ready to use?
Yes. Hex values are normalized and ready to paste straight into CSS or design tools.

RELATED TOOLS

Color Palette Generator↗CSS Gradient Generator↗Color Picker from Image↗