NEW

CSS / SCSS color variables generator

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

variables.css

  // CSS PRIMARY COLORS
  --color-primary: #382bf0;
  --color-primary-600: #2213ee;
  --color-primary-700: #190ec1;
  --color-primary-800: #130a91;
  --color-primary-900: #0d0762;

        

SCSS variables

_variables.scss

  // SCSS PRIMARY COLORS
  $primary: #382bf0;
  $primary-600: #2213ee;
  $primary-700: #190ec1;
  $primary-800: #130a91;
  $primary-900: #0d0762;
      
        

Examples

buttons.css / _buttons.scss

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

  • 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