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: #fefefd;
  --brand-200: #fdfdfb;
  --brand-300: #fcfbf9;
  --brand-400: #fbfaf7;
  --brand-500: #faf9f6;
  --brand-600: #b5b4b2;
  --brand-700: #7b7b79;
  --brand-800: #484846;
  --brand-900: #1c1c1b;
  --brand-950: #010000;
}

brand: {
  50: '#ffffff',
  100: '#fefefd',
  200: '#fdfdfb',
  300: '#fcfbf9',
  400: '#fbfaf7',
  500: '#faf9f6',
  600: '#b5b4b2',
  700: '#7b7b79',
  800: '#484846',
  900: '#1c1c1b',
  950: '#010000',
},