Color Extractor

Extract and visualize all HEX, RGB and RGBA colors from CSS or any text

CSS / HTML / Text

11 Colors Found

#6366F1

rgb(99, 102, 241) · #6366F1

Copy

#8B5CF6

rgb(139, 92, 246) · #8B5CF6

Copy

#EC4899

rgb(236, 72, 153) · #EC4899

Copy

#0F172A

rgb(15, 23, 42) · #0F172A

Copy

#1E293B

rgb(30, 41, 59) · #1E293B

Copy

#CBD5E1

rgb(203, 213, 225) · #CBD5E1

Copy

#10B981

rgb(16, 185, 129) · #10B981

Copy

#F59E0B

rgb(245, 158, 11) · #F59E0B

Copy

#EF4444

rgb(239, 68, 68) · #EF4444

Copy

#FFFFFF

rgb(255, 255, 255) · #fff

Copy

#000000

rgb(0, 0, 0) · #0000004d

Copy

Palette preview

About the Color Code Extractor

This color code extractor scans pasted text or CSS and lists every hex and rgb() value it finds, deduplicated and shown as swatches with copyable hex codes.

A css color extractor answers the question that comes up whenever you inherit a stylesheet: which colours does this thing actually use? Paste the CSS and every hex and rgb() value in it is pulled out and listed once, however many times it appeared.

Real stylesheets accumulate colours. A file that should use six ends up with thirty, because someone matched a shade by eye instead of reusing the variable — and near-duplicates like #333333 and #323232 sit side by side for years without anyone noticing. Seeing the full deduplicated list is what makes that visible.

Both notations are recognised: #RGB, #RRGGBB and #RRGGBBAA hex, plus rgb() and rgba(). Everything is normalised to uppercase six-digit hex, so the same colour written two different ways collapses into a single entry. It runs in your browser, so unreleased design work is not uploaded anywhere.

How to use the Color Code Extractor

  1. Paste your CSS. Drop in a stylesheet, a token file, or any text containing colour values.
  2. Read the list. Every distinct colour is shown once, with a swatch.
  3. Spot the near-duplicates. Look for shades differing by a digit or two that should really be one value.
  4. Copy what you need. Take a hex code into your stylesheet or token file.

Color Code Extractor features

  • Finds hex codes written as #RGB, #RRGGBB or #RRGGBBAA
  • Finds rgb() and rgba() values
  • Duplicates collapsed, including the same colour written two ways
  • Swatch preview with the RGB components for each colour
  • Copy any value
  • Runs in your browser; nothing is uploaded

Frequently asked questions

Which colour notations does it recognise?

Hex in three, six and eight digit forms, and rgb() and rgba(). Eight-digit hex is matched but the alpha channel is dropped, since the output is a solid colour. hsl() values are not matched.

Can it pull the colours out of an image?

No. This reads colour values written as text, so a PNG, JPG or screenshot will not work — there is no image analysis here. Paste the CSS, SVG markup or token file instead.

Are named colours like tomato or rebeccapurple found?

No, only hex and rgb() values are matched. If you need to resolve a keyword to a hex value, the CSS color names page does that in both directions.

Why do near-identical colours matter?

Because they are almost always accidents. Two greys a digit apart were meant to be the same grey, and every extra one makes the palette harder to maintain and the interface subtly less consistent. Collapsing them is usually free.

Is my CSS uploaded?

No. The text is scanned in your browser and nothing is transmitted, which matters when the stylesheet belongs to unreleased work.