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: #f6e2ed;
  --brand-200: #e2bed3;
  --brand-300: #c996b4;
  --brand-400: #ac6d94;
  --brand-500: #9d5783;
  --brand-600: #783f63;
  --brand-700: #592a48;
  --brand-800: #3c172f;
  --brand-900: #24041a;
  --brand-950: #18000c;
}

brand: {
  50: '#ffffff',
  100: '#f6e2ed',
  200: '#e2bed3',
  300: '#c996b4',
  400: '#ac6d94',
  500: '#9d5783',
  600: '#783f63',
  700: '#592a48',
  800: '#3c172f',
  900: '#24041a',
  950: '#18000c',
},