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: #f9edd0;
  --brand-200: #ead59d;
  --brand-300: #d4ba6a;
  --brand-400: #ba9e31;
  --brand-500: #ab9004;
  --brand-600: #7f6a00;
  --brand-700: #5a4a00;
  --brand-800: #3a2d00;
  --brand-900: #241200;
  --brand-950: #160000;
}

brand: {
  50: '#ffffff',
  100: '#f9edd0',
  200: '#ead59d',
  300: '#d4ba6a',
  400: '#ba9e31',
  500: '#ab9004',
  600: '#7f6a00',
  700: '#5a4a00',
  800: '#3a2d00',
  900: '#241200',
  950: '#160000',
},