ToolSnippet

CSS & Code Hex Color Extractor

Extract all HEX, RGB, RGBA, and HSL color codes from CSS, HTML, and JavaScript with live color swatch previews.

About This Tool

The CSS & Code Hex Color Extractor scans raw CSS styles, Tailwind classes, SVG code, or JavaScript objects, extracts every color value, dedupes them, and provides interactive color swatches with 1-click copy.

Key Features

Extracts 3, 6, and 8-digit HEX (#fff, #1a2b3c, #1a2b3c80)
Extracts `rgb(...)`, `rgba(...)`, `hsl(...)`, and `hsla(...)` functions
Renders live color preview swatches with click-to-copy
Exports unique color palette as CSS variables or JSON array

How to Use This Tool

  1. Paste any CSS stylesheet, SVG file, or code snippet.
  2. Instantly view all unique extracted colors rendered as preview cards.
  3. Click any color code to copy to your clipboard.

Why Use This Tool

  • Quickly extract brand color palettes from client stylesheets.
  • Audit and consolidate inconsistent hex shades across your design system.

Pro Tips

  • Paste an entire SVG icon or illustration to extract its complete vector color palette.

Frequently Asked Questions

Does this extractor detect Tailwind arbitrary color values?

Yes, it parses colors inside arbitrary Tailwind utility classes like `bg-[#4f46e5]` and `text-[rgba(0,0,0,0.5)]`.

Can I export the extracted palette as CSS custom properties?

Yes, you can copy all extracted colors formatted as `:root { --color-1: #...; }` variables.

Related Tools

Base64 to Image Decoder & Downloader

Convert Base64 data strings into viewable and downloadable PNG, JPEG, SVG, or WEBP images.

WCAG Color Contrast Checker

Check color contrast compliance for text and UI elements against WCAG 2.1 AA and AAA accessibility standards.

Color Shades & Tint Generator

Generate a full 50-950 Tailwind/CSS palette of tints and shades from any base color.