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: #fedcfd;
  --brand-200: #eeb0f0;
  --brand-300: #d87fdc;
  --brand-400: #bc46c5;
  --brand-500: #ac1db8;
  --brand-600: #85078f;
  --brand-700: #64006d;
  --brand-800: #46004e;
  --brand-900: #2c0031;
  --brand-950: #210021;
}

brand: {
  50: '#ffffff',
  100: '#fedcfd',
  200: '#eeb0f0',
  300: '#d87fdc',
  400: '#bc46c5',
  500: '#ac1db8',
  600: '#85078f',
  700: '#64006d',
  800: '#46004e',
  900: '#2c0031',
  950: '#210021',
},