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: #ecd7e6;
  --brand-200: #caa4c0;
  --brand-300: #a16e95;
  --brand-400: #753568;
  --brand-500: #5d1451;
  --brand-600: #4a0e40;
  --brand-700: #3a0832;
  --brand-800: #2c0425;
  --brand-900: #210019;
  --brand-950: #190011;
}

brand: {
  50: '#ffffff',
  100: '#ecd7e6',
  200: '#caa4c0',
  300: '#a16e95',
  400: '#753568',
  500: '#5d1451',
  600: '#4a0e40',
  700: '#3a0832',
  800: '#2c0425',
  900: '#210019',
  950: '#190011',
},