Extracting hex color codes from text

One-click search and extract all hexadecimal color codes from the text

How to Use the Hex Color Code Extractor

Paste CSS, HTML, design notes, or any text that contains hex colours. The tool finds codes like #0F5C8C and #abc, then lists them for copy or download. Processing runs in your browser.

  1. Paste your text into the input box (stylesheets, HTML snippets, or design notes).
  2. Choose options
    • Remove duplicate colors — keep each colour once.
    • Standardize format (uppercase) — normalize to uppercase hex.
    • Include short form colors (#abc) — also match 3-digit hex.
    • Expand short form to 6-digit (#abc → #AABBCC) — turn #abc into #AABBCC when short form is enabled.
    • Show color previews — display swatches next to values.
  3. Click “Extract Color Codes”.
  4. Copy, download, or review the extracted list and previews.

Hex color extractor example

Common Use Cases

  • CSS / theme audits: Pull every hex colour from a stylesheet or design token file.
  • Brand consistency: Collect colours used across HTML templates or email markup.
  • Design handoff: Extract colours from notes or exported CSS before rebuilding a UI kit.
  • Cleanup: Find leftover or duplicate colours before consolidating a palette.

What Formats Are Detected?

  • 6-digit hex: #0F5C8C, #ff5733 (with or without # depending on context in text)
  • 3-digit short form: #abc, #F00 (when “Include short form” is enabled)
  • Expanded short form: #abc → #AABBCC when expand is enabled

RGB/HSL functions are not converted here — this tool only extracts hexadecimal colour codes.

Example: Before and After

With “Include short form”, “Expand short form”, “Remove duplicates”, and “Standardize format” enabled:

Input CSSExtracted colours
.btn {
  color: #ff0000;
  background: #abc;
  border-color: #FF0000;
  outline: #0F5C8C;
}
#FF0000
#AABBCC
#0F5C8C

#ff0000 and #FF0000 collapse to one uppercase value. Short #abc expands to #AABBCC.

Frequently Asked Questions (FAQ)

Does the tool upload my CSS or HTML?

No. Extraction runs locally in your browser. Your text is not sent to our servers.

Why is a short colour like #abc missing?

Enable Include short form colors. Optionally enable Expand short form to list the 6-digit equivalent.

Can it extract rgb() or hsl() values?

Not on this page. Use a dedicated colour converter if you need RGB ↔ Hex conversion (for example Hex to RGB / RGB to Hex).

Is the hash (#) required?

Most matched colours include #. Enable standardize/uppercase to keep a consistent list for design systems.

Privacy

All matching happens on your device with JavaScript. We do not store the text you paste or the colours you extract.