CSS & SCSS color variables generator FEATURED
Color palette
#ffffff
Primary - a0
#eeede2
Primary - a10
#dedbc6
Primary - a20
#cdc9aa
Primary - a30
#bdb78f
Primary - a40
#aca674
Primary - a50
#87825c
Primary - a60
#646045
Primary - a70
#43402f
Primary - a80
#24231b
Primary - a90
#000000
Primary - a100
Tip: Press SPACE to generate a random color palette
Click a color block to copy to your clipboard.
Effortless variables for CSS & SCSS
Streamline your styling workflow and build consistent design systems by programmatically generating a full spectrum of color variables from a single primary color. Get perfectly formatted code for both CSS Custom Properties and SCSS instantly.
How does it work?
Simply choose your primary color using the color picker. Our engine instantly generates a complete, ready-to-use variable system. You'll get a list of shades(darker versions) and tints (lighter versions) neatly formatted in both CSS and SCSS syntax. Just copy the code block and paste it into your project files to have a robust color palette at ease.