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: #fdf9f5;
  --brand-200: #f8f2e9;
  --brand-300: #f3eadd;
  --brand-400: #ece1d0;
  --brand-500: #e9dcc9;
  --brand-600: #aaa090;
  --brand-700: #756d61;
  --brand-800: #464037;
  --brand-900: #1e1912;
  --brand-950: #060000;
}

brand: {
  50: '#ffffff',
  100: '#fdf9f5',
  200: '#f8f2e9',
  300: '#f3eadd',
  400: '#ece1d0',
  500: '#e9dcc9',
  600: '#aaa090',
  700: '#756d61',
  800: '#464037',
  900: '#1e1912',
  950: '#060000',
},