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: #fff3d4;
  --brand-200: #fce2a7;
  --brand-300: #f2d07a;
  --brand-400: #e3be49;
  --brand-500: #dbb42c;
  --brand-600: #a2830b;
  --brand-700: #715a00;
  --brand-800: #473600;
  --brand-900: #281500;
  --brand-950: #190000;
}

brand: {
  50: '#ffffff',
  100: '#fff3d4',
  200: '#fce2a7',
  300: '#f2d07a',
  400: '#e3be49',
  500: '#dbb42c',
  600: '#a2830b',
  700: '#715a00',
  800: '#473600',
  900: '#281500',
  950: '#190000',
},