What input does it accept?

Any text containing hex codes — space-separated, comma-separated, or pasted from a stylesheet. Non-color text is ignored.

Does it support shorthand hex?

Yes. 3-digit hex like #abc is expanded to #AABBCC automatically.

Can I change the variable names?

Set a prefix to control the base name; numbers are added automatically. Edit the result for semantic names.

What is the Tailwind output?

A module.exports config with the colors placed under theme.extend.colors, ready to merge into tailwind.config.js.

Are my colors uploaded?

No. Everything is processed in your browser and nothing leaves your device.

Palette to CSS Variables

Paste colors

Variable name prefix

Output format

4 colors

Color preview

#1E293B

#0EA5E9

#10B981

#F43F5E

CSS variables

:root {
  --color-1: #1E293B;
  --color-2: #0EA5E9;
  --color-3: #10B981;
  --color-4: #F43F5E;
}

Related external sites

Some links are affiliate links.

Adobe ColorA free online tool for creating and exploring color palettes and themes. Use the color wheel to build harmonious schemes, or extract colors from an uploaded image. Palettes sync directly to Creative Cloud.CanvaA popular drag-and-drop design platform for creating social media posts, presentations, posters, and more. Offers a massive library of free and premium templates, photos, and graphics. No design experience needed to get started.

Paste a palette — or any text that contains hex color codes — and this tool pulls out the colors and writes them as CSS custom properties, SCSS variables, or a Tailwind color config. Duplicates are removed and each color is given a numbered name. Everything happens in your browser.

How to use

Paste hex colors (or text containing them) into the box.
Set a name prefix and choose CSS, SCSS or Tailwind output.
Copy the generated code into your stylesheet or config.

How it works

The tool scans your text for hex codes (3- or 6-digit, with or without #), normalizes them to uppercase 6-digit form, and drops duplicates while keeping the order they appear. Each color becomes a numbered variable using your prefix, then it is formatted for the output you picked: CSS :root custom properties, SCSS $variables, or a Tailwind theme.extend.colors object.

Features

Smart extraction

Finds hex codes inside any pasted text and ignores the rest.

Three formats

Output CSS custom properties, SCSS variables or a Tailwind config.

De-duplicated

Repeated colors are merged so each variable is unique.

Fully private

Colors are processed in your browser and never uploaded.

When to use it

Design handoff

Turn a palette from a design tool into code tokens fast.

Theming

Create a set of CSS variables for a site theme.

Tailwind projects

Drop brand colors straight into your Tailwind config.

Style guides

Document a color system with consistent variable names.

Notes

Both #RGB and #RRGGBB are accepted and normalized.
Colors keep the order they first appear; duplicates are removed.
Rename the variables after pasting if you prefer semantic names.
All processing runs on your device; nothing is uploaded.

FAQ

What input does it accept?: Any text containing hex codes — space-separated, comma-separated, or pasted from a stylesheet. Non-color text is ignored.
Does it support shorthand hex?: Yes. 3-digit hex like #abc is expanded to #AABBCC automatically.
Can I change the variable names?: Set a prefix to control the base name; numbers are added automatically. Edit the result for semantic names.
What is the Tailwind output?: A module.exports config with the colors placed under theme.extend.colors, ready to merge into tailwind.config.js.
Are my colors uploaded?: No. Everything is processed in your browser and nothing leaves your device.