Color to CSS Variables

Generate CSS variables, shades and tokens from any color.

Base Color

Shade Scale (50 → 900)

eff0fe

100

e0e0fc

200

c1c2f9

300

a1a3f7

400

8285f4

500

6366f1

600

4f52c1

700

3b3d91

800

282960

900

141430

HEX

#6366F1

RGB

rgb(99, 102, 241)

HSL

hsl(239, 84%, 67%)

Generated CSS

:root {
  --color-50: #eff0fe;
  --color-100: #e0e0fc;
  --color-200: #c1c2f9;
  --color-300: #a1a3f7;
  --color-400: #8285f4;
  --color-500: #6366f1;
  --color-600: #4f52c1;
  --color-700: #3b3d91;
  --color-800: #282960;
  --color-900: #141430;
  --color: #6366f1;
}

How it works

Pick a base color.
The tool generates CSS custom properties, tints, shades, and tokens from it.
Preview the scale of shades.
Copy the CSS variables into your stylesheet.

What people use it for

Building a color scale for a design system.
Generating tints and shades from a brand color.
Producing ready-to-paste CSS custom properties.

Good to know

Shades are generated algorithmically; a designer may still tweak individual steps for perceptual evenness.
It produces color tokens. Layout and spacing tokens are out of scope.

Frequently asked questions

What does it generate from one color?

A set of CSS custom properties plus tints and shades (a color scale), ready to drop into a stylesheet as design tokens.

Are the shades perceptually even?

They follow a consistent lightness algorithm, which is a strong starting point; fine-tune individual steps if your brand needs exact values.

Is anything uploaded?

No. Everything is generated locally in your browser.

Related tools