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: #e3f5d5;
  --brand-200: #c1e3a8;
  --brand-300: #9ccf7a;
  --brand-400: #73b849;
  --brand-500: #5cac2d;
  --brand-600: #3c8014;
  --brand-700: #215a00;
  --brand-800: #0b3900;
  --brand-900: #001d00;
  --brand-950: #000c00;
}

brand: {
  50: '#ffffff',
  100: '#e3f5d5',
  200: '#c1e3a8',
  300: '#9ccf7a',
  400: '#73b849',
  500: '#5cac2d',
  600: '#3c8014',
  700: '#215a00',
  800: '#0b3900',
  900: '#001d00',
  950: '#000c00',
},