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: #dce0e3;
  --brand-200: #b0b7bd;
  --brand-300: #7f8a92;
  --brand-400: #4e5c65;
  --brand-500: #36454f;
  --brand-600: #28353d;
  --brand-700: #1d272e;
  --brand-800: #121a20;
  --brand-900: #020c12;
  --brand-950: #000108;
}

brand: {
  50: '#ffffff',
  100: '#dce0e3',
  200: '#b0b7bd',
  300: '#7f8a92',
  400: '#4e5c65',
  500: '#36454f',
  600: '#28353d',
  700: '#1d272e',
  800: '#121a20',
  900: '#020c12',
  950: '#000108',
},