Featured

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 - 500

#382bf0

Primary - 600

#3425bb

Primary - 700

#2d1e89

Primary - 800

#24185a

Primary - 900

#18102f

CSS variables

variables.css

  // 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

_variables.scss

  // SCSS PRIMARY COLORS

  $primary-500: #382bf0;
  $primary-600: #3425bb;
  $primary-700: #2d1e89;
  $primary-800: #24185a;
  $primary-900: #18102f;
  

        

Examples

buttons.css / _buttons.scss

  // 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.

  • Connect profile
  • Remove ads
  • Create and save unlimited gradients and palettes
  • Gradient wallpaper generator
  • Access to all tools
  • Android and Flutter gradient code
  • Image palette PRO layouts