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: #ffdace;
  --brand-200: #f2ac96;
  --brand-300: #d77a5d;
  --brand-400: #b44325;
  --brand-500: #9f2305;
  --brand-600: #7d1500;
  --brand-700: #600800;
  --brand-800: #460000;
  --brand-900: #320000;
  --brand-950: #280000;
}

brand: {
  50: '#ffffff',
  100: '#ffdace',
  200: '#f2ac96',
  300: '#d77a5d',
  400: '#b44325',
  500: '#9f2305',
  600: '#7d1500',
  700: '#600800',
  800: '#460000',
  900: '#320000',
  950: '#280000',
},