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: #fefcec;
  --brand-200: #fbf7da;
  --brand-300: #f6f1c7;
  --brand-400: #f1ebb4;
  --brand-500: #eee8aa;
  --brand-600: #ada876;
  --brand-700: #77734b;
  --brand-800: #464425;
  --brand-900: #1e1b00;
  --brand-950: #060100;
}

brand: {
  50: '#ffffff',
  100: '#fefcec',
  200: '#fbf7da',
  300: '#f6f1c7',
  400: '#f1ebb4',
  500: '#eee8aa',
  600: '#ada876',
  700: '#77734b',
  800: '#464425',
  900: '#1e1b00',
  950: '#060100',
},