Gold

Prestige, success, and luxury — gold instantly elevates a visual identity.

Shades 11

Base #d4af37

RGB 212, 175, 55

100

200

300

400

500

600

700

800

All Gold Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --gold-50: #fffdf5;
  --gold-100: #fff7d6;
  --gold-200: #ffefad;
  --gold-300: #ffe27a;
  --gold-400: #f9cf45;
  --gold-500: #d4af37;
  --gold-600: #b89122;
  --gold-700: #8e6f1a;
  --gold-800: #6f5615;
  --gold-900: #4d3b0c;
  --gold-950: #261d04;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        gold: {
          50: '#fffdf5',
          100: '#fff7d6',
          200: '#ffefad',
          300: '#ffe27a',
          400: '#f9cf45',
          500: '#d4af37',
          600: '#b89122',
          700: '#8e6f1a',
          800: '#6f5615',
          900: '#4d3b0c',
          950: '#261d04',
        },
      },
    },
  },
};

SCSS Map

$gold-palette: (
  50: #fffdf5,
  100: #fff7d6,
  200: #ffefad,
  300: #ffe27a,
  400: #f9cf45,
  500: #d4af37,
  600: #b89122,
  700: #8e6f1a,
  800: #6f5615,
  900: #4d3b0c,
  950: #261d04,
);