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: #ecdcf8;
  --brand-200: #cdafe3;
  --brand-300: #a77fc8;
  --brand-400: #7d4daa;
  --brand-500: #663399;
  --brand-600: #4e2479;
  --brand-700: #3a185d;
  --brand-800: #280d44;
  --brand-900: #1a002e;
  --brand-950: #130020;
}

brand: {
  50: '#ffffff',
  100: '#ecdcf8',
  200: '#cdafe3',
  300: '#a77fc8',
  400: '#7d4daa',
  500: '#663399',
  600: '#4e2479',
  700: '#3a185d',
  800: '#280d44',
  900: '#1a002e',
  950: '#130020',
},