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: #efe3ed;
  --brand-200: #d5bfd1;
  --brand-300: #b797b1;
  --brand-400: #956e8f;
  --brand-500: #84597e;
  --brand-600: #654160;
  --brand-700: #4a2d46;
  --brand-800: #321b2f;
  --brand-900: #1d071a;
  --brand-950: #11000d;
}

brand: {
  50: '#ffffff',
  100: '#efe3ed',
  200: '#d5bfd1',
  300: '#b797b1',
  400: '#956e8f',
  500: '#84597e',
  600: '#654160',
  700: '#4a2d46',
  800: '#321b2f',
  900: '#1d071a',
  950: '#11000d',
},