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.

Color tones

Primary - a0

#ffffff

Primary - a10

#e1d3fe

Primary - a20

#c1a8fc

Primary - a30

#9e7ef9

Primary - a40

#7555f5

Primary - a50

#382bf0

Primary - a60

#3425bb

Primary - a70

#2d1e89

Primary - a80

#24185a

Primary - a90

#18102f

Code

css
        
          
/** CSS PRIMARY COLORS */
--color-primary-a0: #ffffff;
--color-primary-a10: #e1d3fe;
--color-primary-a20: #c1a8fc;
--color-primary-a30: #9e7ef9;
--color-primary-a40: #7555f5;
--color-primary-a50: #382bf0;
--color-primary-a60: #3425bb;
--color-primary-a70: #2d1e89;
--color-primary-a80: #24185a;
--color-primary-a90: #18102f;
/** EXAMPLES */
color: var(--color-primary-a50);
background-color: var(--color-primary-a90);

Click a code line to select it and press CTRL + C to copy it