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: #e6d3dd;
  --brand-200: #bd9cae;
  --brand-300: #8d617a;
  --brand-400: #5a2446;
  --brand-500: #3f012c;
  --brand-600: #340224;
  --brand-700: #2b011d;
  --brand-800: #240017;
  --brand-900: #1d0010;
  --brand-950: #17000a;
}

brand: {
  50: '#ffffff',
  100: '#e6d3dd',
  200: '#bd9cae',
  300: '#8d617a',
  400: '#5a2446',
  500: '#3f012c',
  600: '#340224',
  700: '#2b011d',
  800: '#240017',
  900: '#1d0010',
  950: '#17000a',
},