Skip to content
ToolQivo

Color to CSS Variables

Turn a palette into CSS custom properties, Tailwind tokens or Sass.

Color Tools Reviews Free · no sign-up

Your palette

Code 
The variables appear here

Quick Tool Overview

Color to CSS Variables turns a pasted palette into code: CSS custom properties, Tailwind v4 @theme tokens, Sass, Less, a JS object or W3C design tokens — with channel-split values for the opacity pattern and an optional dark mode block.

What it does
Turns a palette into variables or design tokens
You give it
A list of colours, optionally named
You get back
A ready-to-paste block in six formats
Best for
Starting a design system from a palette
Color Tools Free, unlimited use No sign-up Runs in your browser

About the Color to CSS Variables

Paste a palette and get it back as code. CSS custom properties on :root, Tailwind v4 @theme tokens, Sass variables, Less variables, a JavaScript object or W3C design tokens in JSON — the same colours, in whatever form your project consumes.

Names come from your input where you give them: a line reading "Primary: #4f46e5" becomes --color-primary. Unnamed colours are numbered, and every name is normalised to the kebab-case that CSS wants, so pasting straight out of a design tool works.

The channel-split option is the one to know about. Emitting a colour as its raw components — "79 70 229" rather than "#4f46e5" — lets you write rgb(var(--color-primary) / 50%) and get opacity variants from a single token, which is how Tailwind and most modern design systems handle alpha. A dark mode block can be generated alongside, with each colour flipped in lightness and the hue left alone.

Key features of the Color to CSS Variables

Six output formats

CSS custom properties, Tailwind @theme, Sass, Less, JavaScript and W3C design tokens from the same input.

Channel-split values

Emitting "79 70 229" lets you write rgb(var(--brand) / 50%) and get every opacity from one token.

Your names kept

A "Primary: #4f46e5" line becomes --color-primary, normalised to kebab-case automatically.

Dark mode generated

An optional block with each colour flipped in OKLCH lightness — a starting point rather than a finished theme.

Paste anything

Lines split on newlines, commas and semicolons, and anything that is not a colour is skipped rather than breaking the run.

How to use the Color to CSS Variables

  1. 1

    Paste your palette

    One colour per line. Add "Name: value" to keep your own names.

  2. 2

    Choose the output

    CSS custom properties, Tailwind @theme, Sass, Less, JS or design tokens.

  3. 3

    Pick the value format

    HEX, or raw channels for the rgb(var(--x) / 50%) pattern.

  4. 4

    Copy or download

    Take the block to your clipboard or save it as a file.

Frequently asked questions

Because a hex value cannot have opacity applied to it inside a variable. Storing "79 70 229" lets you write rgb(var(--color-primary) / 50%) and get every opacity variant from one token instead of defining a dozen.

Reviews of the Color to CSS Variables

What people who use the Color to CSS Variables think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Color to CSS Variables. It takes half a minute and no account.

Write the first review

More color tools