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: #e9fdf4;
  --brand-200: #d2f8e6;
  --brand-300: #b9f1d8;
  --brand-400: #9ee8c9;
  --brand-500: #90e4c1;
  --brand-600: #62a78b;
  --brand-700: #3b745d;
  --brand-800: #184635;
  --brand-900: #001f12;
  --brand-950: #000a00;
}

brand: {
  50: '#ffffff',
  100: '#e9fdf4',
  200: '#d2f8e6',
  300: '#b9f1d8',
  400: '#9ee8c9',
  500: '#90e4c1',
  600: '#62a78b',
  700: '#3b745d',
  800: '#184635',
  900: '#001f12',
  950: '#000a00',
},