CSS Variables Generator
Generate CSS custom properties (variables) from any color. Create consistent design tokens for your projects with automatic palette generation.
Color Palette
Generated Variables
--color-primary-100
#E0E0FC
--color-primary-200
#C1C2F9
--color-primary-300
#A1A3F7
--color-primary-400
#8285F4
--color-primary-500
#6366F1
--color-primary-600
#4F52C1
--color-primary-700
#3B3D91
--color-primary-800
#282960
--color-primary-900
#141430
:root {
--color-primary-100: #E0E0FC;
--color-primary-200: #C1C2F9;
--color-primary-300: #A1A3F7;
--color-primary-400: #8285F4;
--color-primary-500: #6366F1;
--color-primary-600: #4F52C1;
--color-primary-700: #3B3D91;
--color-primary-800: #282960;
--color-primary-900: #141430;
}How to Use
- Enter your base color or use the color picker
- Set a name for your variable (e.g., "primary", "brand")
- Toggle palette generation for 100-900 shade variants
- Preview the generated variables and colors
- Copy individual variables or export the full code
Example Output
:root {
--color-primary-100: #E0E7FF;
--color-primary-500: #6366F1;
--color-primary-900: #312E81;
}Frequently Asked Questions
What are CSS custom properties (variables)? ▼
CSS custom properties (also called CSS variables) let you define reusable values that can be referenced throughout your stylesheets. They start with -- and are defined in :root for global access.
Why use CSS variables for colors? ▼
CSS variables make it easy to maintain consistent colors, update themes dynamically, and implement features like dark mode. Change one variable, and all usages update automatically.
What are the shade numbers (100-900)? ▼
The numbering follows common design system conventions. 500 is the base color, lower numbers (100-400) are lighter tints, and higher numbers (600-900) are darker shades.
Can I use these with Tailwind CSS? ▼
Yes! Export the CSS variables and reference them in your Tailwind config using CSS variable syntax: `colors: { primary: "var(--color-primary)" }`.
What is the difference between CSS and SCSS output? ▼
CSS output uses native custom properties (:root { --color: value; }). SCSS output uses Sass variables ($color: value;) which compile at build time rather than runtime.