CSS / SCSS color variables generator
Generate your custom color variables with our easy-to-use CSS and SCSS Variables Generator to easily create and manage your CSS and SCSS custom variables.
Tonal 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.
Code
--color-primary-a0: #ffffff;
--color-primary-a10: #eeede2;
--color-primary-a20: #dedbc6;
--color-primary-a30: #cdc9aa;
--color-primary-a40: #bdb78f;
--color-primary-a50: #aca674;
--color-primary-a60: #87825c;
--color-primary-a70: #646045;
--color-primary-a80: #43402f;
--color-primary-a90: #24231b;
--color-primary-a100: #000000;
/** Examples */
.bg-primary {
color: var(--color-primary-a50);
background-color: var(--color-primary-a10);
}PWA prompt