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: #ecddde;
  --brand-200: #ccb2b3;
  --brand-300: #a68285;
  --brand-400: #7d5256;
  --brand-500: #673a3f;
  --brand-600: #502b2f;
  --brand-700: #3d1f22;
  --brand-800: #2b1316;
  --brand-900: #1d0305;
  --brand-950: #140000;
}

brand: {
  50: '#ffffff',
  100: '#ecddde',
  200: '#ccb2b3',
  300: '#a68285',
  400: '#7d5256',
  500: '#673a3f',
  600: '#502b2f',
  700: '#3d1f22',
  800: '#2b1316',
  900: '#1d0305',
  950: '#140000',
},