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: #ffdada;
  --brand-200: #f5abae;
  --brand-300: #dd787f;
  --brand-400: #bd3d50;
  --brand-500: #ab1239;
  --brand-600: #860229;
  --brand-700: #66001b;
  --brand-800: #4a000d;
  --brand-900: #320000;
  --brand-950: #280000;
}

brand: {
  50: '#ffffff',
  100: '#ffdada',
  200: '#f5abae',
  300: '#dd787f',
  400: '#bd3d50',
  500: '#ab1239',
  600: '#860229',
  700: '#66001b',
  800: '#4a000d',
  900: '#320000',
  950: '#280000',
},