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: #d8ebec;
  --brand-200: #a9ced1;
  --brand-300: #76adb2;
  --brand-400: #3b8a90;
  --brand-500: #08787f;
  --brand-600: #005a60;
  --brand-700: #004146;
  --brand-800: #002a2e;
  --brand-900: #001719;
  --brand-950: #00080b;
}

brand: {
  50: '#ffffff',
  100: '#d8ebec',
  200: '#a9ced1',
  300: '#76adb2',
  400: '#3b8a90',
  500: '#08787f',
  600: '#005a60',
  700: '#004146',
  800: '#002a2e',
  900: '#001719',
  950: '#00080b',
},