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: #f8ffff;
  --brand-200: #f1ffff;
  --brand-300: #ebffff;
  --brand-400: #e4ffff;
  --brand-500: #e0ffff;
  --brand-600: #a0b9b9;
  --brand-700: #6a7f7f;
  --brand-800: #3b4b4b;
  --brand-900: #121e1e;
  --brand-950: #000303;
}

brand: {
  50: '#ffffff',
  100: '#f8ffff',
  200: '#f1ffff',
  300: '#ebffff',
  400: '#e4ffff',
  500: '#e0ffff',
  600: '#a0b9b9',
  700: '#6a7f7f',
  800: '#3b4b4b',
  900: '#121e1e',
  950: '#000303',
},