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: #ffe7cf;
  --brand-200: #fcc99c;
  --brand-300: #eca968;
  --brand-400: #d58730;
  --brand-500: #c87606;
  --brand-600: #975500;
  --brand-700: #6e3a00;
  --brand-800: #4a2100;
  --brand-900: #2f0800;
  --brand-950: #230000;
}

brand: {
  50: '#ffffff',
  100: '#ffe7cf',
  200: '#fcc99c',
  300: '#eca968',
  400: '#d58730',
  500: '#c87606',
  600: '#975500',
  700: '#6e3a00',
  800: '#4a2100',
  900: '#2f0800',
  950: '#230000',
},