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: #dffae4;
  --brand-200: #bcefc7;
  --brand-300: #95e1a8;
  --brand-400: #6ad188;
  --brand-500: #50c878;
  --brand-600: #2d9453;
  --brand-700: #0b6834;
  --brand-800: #004018;
  --brand-900: #001f00;
  --brand-950: #000e00;
}

brand: {
  50: '#ffffff',
  100: '#dffae4',
  200: '#bcefc7',
  300: '#95e1a8',
  400: '#6ad188',
  500: '#50c878',
  600: '#2d9453',
  700: '#0b6834',
  800: '#004018',
  900: '#001f00',
  950: '#000e00',
},