Shade Generator

A perceptual 50–950 scale from any color. Interpolated in CIE-LAB so each step looks evenly spaced to the eye; step 500 is always your base color.

Click any step to copy its HEX.

:root {
  --brand-50: #ffffff;
  --brand-100: #f4e2f0;
  --brand-200: #debed8;
  --brand-300: #c395bb;
  --brand-400: #a46c9c;
  --brand-500: #94568c;
  --brand-600: #713e6b;
  --brand-700: #532a4e;
  --brand-800: #391835;
  --brand-900: #21041e;
  --brand-950: #160011;
}

brand: {
  50: '#ffffff',
  100: '#f4e2f0',
  200: '#debed8',
  300: '#c395bb',
  400: '#a46c9c',
  500: '#94568c',
  600: '#713e6b',
  700: '#532a4e',
  800: '#391835',
  900: '#21041e',
  950: '#160011',
},