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: #f0ecea;
  --brand-200: #dad3d0;
  --brand-300: #c0b7b2;
  --brand-400: #a59994;
  --brand-500: #978a84;
  --brand-600: #706561;
  --brand-700: #4f4743;
  --brand-800: #322b28;
  --brand-900: #18120f;
  --brand-950: #060000;
}

brand: {
  50: '#ffffff',
  100: '#f0ecea',
  200: '#dad3d0',
  300: '#c0b7b2',
  400: '#a59994',
  500: '#978a84',
  600: '#706561',
  700: '#4f4743',
  800: '#322b28',
  900: '#18120f',
  950: '#060000',
},