Copper

Warm metallics and artisan craft — copper glows with handmade warmth and timeless appeal.

Shades 11

Base #b87333

RGB 184, 115, 51

100

200

300

400

500

600

700

800

All Copper Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --copper-50: #fdf7f0;
  --copper-100: #fae7d0;
  --copper-200: #f4cfa1;
  --copper-300: #ecaf6a;
  --copper-400: #d98d42;
  --copper-500: #b87333;
  --copper-600: #955c27;
  --copper-700: #70441c;
  --copper-800: #4e2f12;
  --copper-900: #2f1c0a;
  --copper-950: #170e05;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        copper: {
          50: '#fdf7f0',
          100: '#fae7d0',
          200: '#f4cfa1',
          300: '#ecaf6a',
          400: '#d98d42',
          500: '#b87333',
          600: '#955c27',
          700: '#70441c',
          800: '#4e2f12',
          900: '#2f1c0a',
          950: '#170e05',
        },
      },
    },
  },
};

SCSS Map

$copper-palette: (
  50: #fdf7f0,
  100: #fae7d0,
  200: #f4cfa1,
  300: #ecaf6a,
  400: #d98d42,
  500: #b87333,
  600: #955c27,
  700: #70441c,
  800: #4e2f12,
  900: #2f1c0a,
  950: #170e05,
);