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: #ffdef7;
  --brand-200: #ffb5e7;
  --brand-300: #ff85d3;
  --brand-400: #ff48bd;
  --brand-500: #fe01b1;
  --brand-600: #c40086;
  --brand-700: #930061;
  --brand-800: #660041;
  --brand-900: #3e0023;
  --brand-950: #2b0014;
}

brand: {
  50: '#ffffff',
  100: '#ffdef7',
  200: '#ffb5e7',
  300: '#ff85d3',
  400: '#ff48bd',
  500: '#fe01b1',
  600: '#c40086',
  700: '#930061',
  800: '#660041',
  900: '#3e0023',
  950: '#2b0014',
},