Gold
#DECC02
YellowColor Codes
All color formats for development
HEX
#DECC02RGB
rgb(222, 204, 2)HSL
hsl(55, 98%, 44%)OKLCH
oklch(0.834 0.175 103.1)CMYK
cmyk(0%, 8%, 99%, 13%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#C8B702
2#B2A302
3#9C8F02
4#857A01
5#6F6601
6#595201
7#433D01
8#2C2900
9#161400
Tints
Lighter variations
1#FAE603
2#FDEA1D
3#FDED39
4#FDEF55
5#FEF272
6#FEF58E
7#FEF7AA
8#FEFAC6
9#FFFCE3
Tones
Muted variations
1#D3C30D
2#C8BA18
3#BDB023
4#B2A72E
5#A79E39
6#9C9544
7#918C4F
8#86835A
9#7B7965
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFFE #FFFEF0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FFFC #FFFCDC | Light backgroundsTable row hoverSkeleton loading |
| 200 | FEF9 #FEF9BD | Secondary backgroundsInput backgroundsDividers |
| 300 | FEF4 #FEF48B | BordersInactive statesPlaceholder text |
| 400 | FDEF #FDEF4E | Disabled statesSecondary iconsMuted text |
| 500 | FDEA #FDEA1C | Primary brand colorCTAsActive elementsLinks |
| 600 | DECC #DECC02 | Hover statesFocus ringsPrimary buttons hover |
| 700 | B1A2 #B1A202 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7E74 #7E7401 | Text on light backgroundsHeadingsStrong borders |
| 900 | 514A #514A01 | Primary textHigh emphasis contentDark headings |
| 950 | 322E #322E01 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--gold-50: #FFFEF0;
--gold-100: #FFFCDC;
--gold-200: #FEF9BD;
--gold-300: #FEF48B;
--gold-400: #FDEF4E;
--gold-500: #FDEA1C;
--gold-600: #DECC02;
--gold-700: #B1A202;
--gold-800: #7E7401;
--gold-900: #514A01;
--gold-950: #322E01;
}