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: #ebe3cf;
  --brand-200: #cbbd98;
  --brand-300: #a59360;
  --brand-400: #7a6927;
  --brand-500: #645403;
  --brand-600: #4c3f00;
  --brand-700: #382d00;
  --brand-800: #281d00;
  --brand-900: #1b0c00;
  --brand-950: #110000;
}

brand: {
  50: '#ffffff',
  100: '#ebe3cf',
  200: '#cbbd98',
  300: '#a59360',
  400: '#7a6927',
  500: '#645403',
  600: '#4c3f00',
  700: '#382d00',
  800: '#281d00',
  900: '#1b0c00',
  950: '#110000',
},