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: #e7e1dd;
  --brand-200: #c3b9b1;
  --brand-300: #9c8d83;
  --brand-400: #716054;
  --brand-500: #5c4a3d;
  --brand-600: #47382d;
  --brand-700: #34281f;
  --brand-800: #241a13;
  --brand-900: #160a00;
  --brand-950: #0a0000;
}

brand: {
  50: '#ffffff',
  100: '#e7e1dd',
  200: '#c3b9b1',
  300: '#9c8d83',
  400: '#716054',
  500: '#5c4a3d',
  600: '#47382d',
  700: '#34281f',
  800: '#241a13',
  900: '#160a00',
  950: '#0a0000',
},