CSS Variables Generator - Custom Properties
Generate CSS variables (custom properties) for your color palettes.
:root {
--primary: #6366f1;
--secondary: #ec4899;
--accent: #f59e0b;
--background: #ffffff;
--foreground: #1f2937;
}Supported formats
How it works
Add your colors to the palette
Name each variable according to your convention
Choose output format (HEX, RGB, HSL)
Copy the generated CSS code
Privacy guaranteed
100% local generation. No data sent.
Create CSS variables for your web projects
CSS variables (custom properties) revolutionize color management in your projects. Define your colors once in :root and reuse them everywhere with var(--variable-name). Our generator creates the code instantly. Export your palette as CSS custom properties (variables --color-primary, --color-accent...) for a maintainable design system and simplified light / dark theming. Instantly convert between HEX, RGB, HSL, HSV and CMYK, adjust hue, saturation and lightness with real-time preview and check WCAG AA/AAA contrast for sRGB-compliant accessibility.
Modern and clean syntax
The generated code follows best practices: declaration in :root, semantic names, comments for each color group. Ready to copy-paste into your CSS file.
CSS variables for dark mode
Easily implement dark mode using CSS variables. Define your light colors in :root, then redefine only the values in a dark selector. Theme switching becomes trivial.
Design tokens for teams
CSS variables form the foundation of modern design tokens. Share a variables file with the whole team (designers and developers) to ensure color consistency across all projects.
Export in different color formats
Generate your variables in HEX (#FF5733), RGB (rgb(255, 87, 51)) or HSL (hsl(14, 100%, 60%)). HSL format is particularly powerful for creating tint variations with calc().
Free generator for developers
Our tool is designed for front-end developers. Fast interface, clean code, one-click copy. Create your design systems without friction.
CSS variables and dynamic theming
CSS custom properties (--my-color) allow changing the entire theme of a site with a single line of JavaScript. Essential for dark/light modes, user themes and white-labels.