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: #e5deff;
  --brand-200: #bdb4fa;
  --brand-300: #8e87e9;
  --brand-400: #5259d3;
  --brand-500: #2242c7;
  --brand-600: #0f319e;
  --brand-700: #00227c;
  --brand-800: #00155c;
  --brand-900: #00043f;
  --brand-950: #00002c;
}

brand: {
  50: '#ffffff',
  100: '#e5deff',
  200: '#bdb4fa',
  300: '#8e87e9',
  400: '#5259d3',
  500: '#2242c7',
  600: '#0f319e',
  700: '#00227c',
  800: '#00155c',
  900: '#00043f',
  950: '#00002c',
},