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: #f5efff;
  --brand-200: #e5daf8;
  --brand-300: #d3c2ee;
  --brand-400: #beaae2;
  --brand-500: #b39ddb;
  --brand-600: #8472a5;
  --brand-700: #5c4e77;
  --brand-800: #382e4d;
  --brand-900: #191129;
  --brand-950: #080017;
}

brand: {
  50: '#ffffff',
  100: '#f5efff',
  200: '#e5daf8',
  300: '#d3c2ee',
  400: '#beaae2',
  500: '#b39ddb',
  600: '#8472a5',
  700: '#5c4e77',
  800: '#382e4d',
  900: '#191129',
  950: '#080017',
},