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: #d4e3d5;
  --brand-200: #a0bba2;
  --brand-300: #688e6d;
  --brand-400: #2e5f38;
  --brand-500: #0a481e;
  --brand-600: #043815;
  --brand-700: #022a0c;
  --brand-800: #001e00;
  --brand-900: #001200;
  --brand-950: #000800;
}

brand: {
  50: '#ffffff',
  100: '#d4e3d5',
  200: '#a0bba2',
  300: '#688e6d',
  400: '#2e5f38',
  500: '#0a481e',
  600: '#043815',
  700: '#022a0c',
  800: '#001e00',
  900: '#001200',
  950: '#000800',
},