Bronze

Historic richness and craftsmanship — bronze adds warmth and heritage.

Shades 11

Base #cd7f32

RGB 205, 127, 50

100

200

300

400

500

600

700

800

All Bronze Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --bronze-50: #fff7ef;
  --bronze-100: #ffe8d1;
  --bronze-200: #ffd0a3;
  --bronze-300: #f8b26d;
  --bronze-400: #e69548;
  --bronze-500: #cd7f32;
  --bronze-600: #ad6724;
  --bronze-700: #874f1a;
  --bronze-800: #643913;
  --bronze-900: #42250c;
  --bronze-950: #211205;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        bronze: {
          50: '#fff7ef',
          100: '#ffe8d1',
          200: '#ffd0a3',
          300: '#f8b26d',
          400: '#e69548',
          500: '#cd7f32',
          600: '#ad6724',
          700: '#874f1a',
          800: '#643913',
          900: '#42250c',
          950: '#211205',
        },
      },
    },
  },
};

SCSS Map

$bronze-palette: (
  50: #fff7ef,
  100: #ffe8d1,
  200: #ffd0a3,
  300: #f8b26d,
  400: #e69548,
  500: #cd7f32,
  600: #ad6724,
  700: #874f1a,
  800: #643913,
  900: #42250c,
  950: #211205,
);