Gold
Prestige, success, and luxury — gold instantly elevates a visual identity.
50
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,
);