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: #f8dff7;
  --brand-200: #e5b7e4;
  --brand-300: #cc8bcc;
  --brand-400: #ae5cb1;
  --brand-500: #9e43a2;
  --brand-600: #7a2e7d;
  --brand-700: #5a1c5e;
  --brand-800: #3e0c41;
  --brand-900: #260027;
  --brand-950: #1b001a;
}

brand: {
  50: '#ffffff',
  100: '#f8dff7',
  200: '#e5b7e4',
  300: '#cc8bcc',
  400: '#ae5cb1',
  500: '#9e43a2',
  600: '#7a2e7d',
  700: '#5a1c5e',
  800: '#3e0c41',
  900: '#260027',
  950: '#1b001a',
},