NEW

CSS generator

Generate your CSS or SCSS variables from a color, and use them on your website project.

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