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 - 500
#382bf0
Primary - 600
#3425bb
Primary - 700
#2d1e89
Primary - 800
#24185a
Primary - 900
#18102f
CSS variables
// CSS PRIMARY COLORS
--color-primary-500: #382bf0;
--color-primary-600: #3425bb;
--color-primary-700: #2d1e89;
--color-primary-800: #24185a;
--color-primary-900: #18102f;
SCSS variables
// SCSS PRIMARY COLORS
$primary-500: #382bf0;
$primary-600: #3425bb;
$primary-700: #2d1e89;
$primary-800: #24185a;
$primary-900: #18102f;
Examples
// CSS
color: var(--color-primary-500);
background-color: var(--color-primary-900);
// SCSS
color: $primary-500;
background-color: $primary-900;
Click the code to copy or press CTRL + C
This is a PRO feature. ⭐
Remove ads, get your Connect profile, and unlock more features by upgrading to Colorffy PRO.
Featured tools