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: #faeee2;
  --brand-200: #eed8c1;
  --brand-300: #dec09f;
  --brand-400: #cba77d;
  --brand-500: #c19a6b;
  --brand-600: #90704a;
  --brand-700: #664d2e;
  --brand-800: #412e16;
  --brand-900: #221200;
  --brand-950: #130000;
}

brand: {
  50: '#ffffff',
  100: '#faeee2',
  200: '#eed8c1',
  300: '#dec09f',
  400: '#cba77d',
  500: '#c19a6b',
  600: '#90704a',
  700: '#664d2e',
  800: '#412e16',
  900: '#221200',
  950: '#130000',
},