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: #dae7f4;
  --brand-200: #acc6de;
  --brand-300: #78a1c3;
  --brand-400: #3b7aa5;
  --brand-500: #016795;
  --brand-600: #004e73;
  --brand-700: #003857;
  --brand-800: #00243d;
  --brand-900: #001225;
  --brand-950: #000418;
}

brand: {
  50: '#ffffff',
  100: '#dae7f4',
  200: '#acc6de',
  300: '#78a1c3',
  400: '#3b7aa5',
  500: '#016795',
  600: '#004e73',
  700: '#003857',
  800: '#00243d',
  900: '#001225',
  950: '#000418',
},