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: #dbffe9;
  --brand-200: #b4f9d2;
  --brand-300: #87f1b9;
  --brand-400: #4de7a0;
  --brand-500: #12e193;
  --brand-600: #00a667;
  --brand-700: #007442;
  --brand-800: #004721;
  --brand-900: #002200;
  --brand-950: #001100;
}

brand: {
  50: '#ffffff',
  100: '#dbffe9',
  200: '#b4f9d2',
  300: '#87f1b9',
  400: '#4de7a0',
  500: '#12e193',
  600: '#00a667',
  700: '#007442',
  800: '#004721',
  900: '#002200',
  950: '#001100',
},