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: #ffe9cf;
  --brand-200: #ffcf9c;
  --brand-300: #ffb369;
  --brand-400: #fb9531;
  --brand-500: #f28500;
  --brand-600: #b65f00;
  --brand-700: #843f00;
  --brand-800: #582200;
  --brand-900: #350600;
  --brand-950: #280000;
}

brand: {
  50: '#ffffff',
  100: '#ffe9cf',
  200: '#ffcf9c',
  300: '#ffb369',
  400: '#fb9531',
  500: '#f28500',
  600: '#b65f00',
  700: '#843f00',
  800: '#582200',
  900: '#350600',
  950: '#280000',
},