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: #e9d8ff;
  --brand-200: #c4a6f2;
  --brand-300: #9670dc;
  --brand-400: #5f38c0;
  --brand-500: #3a18b1;
  --brand-600: #2b108f;
  --brand-700: #1f0871;
  --brand-800: #130456;
  --brand-900: #0e003e;
  --brand-950: #10002d;
}

brand: {
  50: '#ffffff',
  100: '#e9d8ff',
  200: '#c4a6f2',
  300: '#9670dc',
  400: '#5f38c0',
  500: '#3a18b1',
  600: '#2b108f',
  700: '#1f0871',
  800: '#130456',
  900: '#0e003e',
  950: '#10002d',
},