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: #daebf7;
  --brand-200: #aecee5;
  --brand-300: #7caece;
  --brand-400: #3f8cb5;
  --brand-500: #007ba7;
  --brand-600: #005c80;
  --brand-700: #00425f;
  --brand-800: #002a41;
  --brand-900: #001526;
  --brand-950: #000518;
}

brand: {
  50: '#ffffff',
  100: '#daebf7',
  200: '#aecee5',
  300: '#7caece',
  400: '#3f8cb5',
  500: '#007ba7',
  600: '#005c80',
  700: '#00425f',
  800: '#002a41',
  900: '#001526',
  950: '#000518',
},