Generate your CSS or SCSS color variables, and use this css and scss color variables generator for your website's design system, texts, or backgrounds.
CSS variables
// CSS PRIMARY COLORS
--color-primary: #382bf0;
--color-primary-600: #2213ee;
--color-primary-700: #190ec1;
--color-primary-800: #130a91;
--color-primary-900: #0d0762;
SCSS variables
// SCSS PRIMARY COLORS
$primary: #382bf0;
$primary-600: #2213ee;
$primary-700: #190ec1;
$primary-800: #130a91;
$primary-900: #0d0762;
Examples
// CSS
color: var(--color-primary);
background-color: var(--color-primary-900);
// SCSS
color: $primary;
background-color: $primary-900;
Color tones
Default
#382bf0
600
#2213ee
700
#190ec1
800
#130a91
900
#0d0762
This is a PRO feature. ⭐
Remove ads, get your Connect profile, and unlock more features by upgrading to Colorffy PRO.
Featured tools