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

4a4db5

700

323379

800

191a3c

900

000000

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: #4a4db5;
  --color-700: #323379;
  --color-800: #191a3c;
  --color-900: #000000;
  --color: #6366f1;
}

Related tools