CSS Color Variable Generator

Home/Tools/Color Variable Generator

Generate CSS custom property color palettes in HEX, RGB, HSL, or raw formats for alpha support.

No sign-up neededRuns in your browserProduction-ready CSS

Colors

Settings

Variable prefix

Color format

Generate 100–900 shadesInclude dark mode overrides

Color Swatches

primary

#6366f1

secondary

#ec4899

accent

#f59e0b

success

#10b981

danger

#ef4444

#ffffff

text

#1d1d1f

Generated CSS

:root {
  --color-primary: #6366f1;
  --color-secondary: #ec4899;
  --color-accent: #f59e0b;
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-bg: #ffffff;
  --color-text: #1d1d1f;
}

Related Tools

CSS Variables Generator

Create and organize CSS custom properties for your design system.

Media Query Generator

Generate responsive media queries for all device sizes.

Z-Index Visualizer

Visualize and manage z-index stacking contexts.