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: #e4def4;
  --brand-200: #beb2dd;
  --brand-300: #9284bf;
  --brand-400: #62549d;
  --brand-500: #483d8b;
  --brand-600: #362e6e;
  --brand-700: #272055;
  --brand-800: #19143e;
  --brand-900: #0f042a;
  --brand-950: #07001d;
}

brand: {
  50: '#ffffff',
  100: '#e4def4',
  200: '#beb2dd',
  300: '#9284bf',
  400: '#62549d',
  500: '#483d8b',
  600: '#362e6e',
  700: '#272055',
  800: '#19143e',
  900: '#0f042a',
  950: '#07001d',
},