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: #e7eed4;
  --brand-200: #c8d6a4;
  --brand-300: #a5bb73;
  --brand-400: #7f9d40;
  --brand-500: #6b8e23;
  --brand-600: #4c6a0f;
  --brand-700: #334b00;
  --brand-800: #1e2f00;
  --brand-900: #0c1800;
  --brand-950: #000700;
}

brand: {
  50: '#ffffff',
  100: '#e7eed4',
  200: '#c8d6a4',
  300: '#a5bb73',
  400: '#7f9d40',
  500: '#6b8e23',
  600: '#4c6a0f',
  700: '#334b00',
  800: '#1e2f00',
  900: '#0c1800',
  950: '#000700',
},