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: #feecdb;
  --brand-200: #f4d3b4;
  --brand-300: #e5b98c;
  --brand-400: #d19c63;
  --brand-500: #c68e4e;
  --brand-600: #946733;
  --brand-700: #6a471c;
  --brand-800: #452a06;
  --brand-900: #270f00;
  --brand-950: #1a0000;
}

brand: {
  50: '#ffffff',
  100: '#feecdb',
  200: '#f4d3b4',
  300: '#e5b98c',
  400: '#d19c63',
  500: '#c68e4e',
  600: '#946733',
  700: '#6a471c',
  800: '#452a06',
  900: '#270f00',
  950: '#1a0000',
},