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: #ffe2fd;
  --brand-200: #ffbef2;
  --brand-300: #f796e4;
  --brand-400: #e869d2;
  --brand-500: #df4ec8;
  --brand-600: #ab3298;
  --brand-700: #7e1970;
  --brand-800: #56004c;
  --brand-900: #32002b;
  --brand-950: #23001a;
}

brand: {
  50: '#ffffff',
  100: '#ffe2fd',
  200: '#ffbef2',
  300: '#f796e4',
  400: '#e869d2',
  500: '#df4ec8',
  600: '#ab3298',
  700: '#7e1970',
  800: '#56004c',
  900: '#32002b',
  950: '#23001a',
},