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: #dcf1e6;
  --brand-200: #b4dcc8;
  --brand-300: #88c3a6;
  --brand-400: #58a784;
  --brand-500: #3d9973;
  --brand-600: #247253;
  --brand-700: #0d5138;
  --brand-800: #003320;
  --brand-900: #001b06;
  --brand-950: #000b00;
}

brand: {
  50: '#ffffff',
  100: '#dcf1e6',
  200: '#b4dcc8',
  300: '#88c3a6',
  400: '#58a784',
  500: '#3d9973',
  600: '#247253',
  700: '#0d5138',
  800: '#003320',
  900: '#001b06',
  950: '#000b00',
},