Olive
#ADA205
YellowColor Codes
All color formats for development
HEX
#ADA205RGB
rgb(173, 162, 5)HSL
hsl(56, 94%, 35%)OKLCH
oklch(0.699 0.147 104.7)CMYK
cmyk(0%, 6%, 97%, 32%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#9C9205
2#8B8204
3#797104
4#686103
5#575103
6#454102
7#343102
8#232001
9#111001
Tints
Lighter variations
1#CDC006
2#EDDE07
3#F8E91E
4#F9ED3E
5#FAF05E
6#FBF37E
7#FCF69F
8#FDF9BF
9#FEFCDF
Tones
Muted variations
1#A59B0E
2#9C9316
3#948C1F
4#8C8527
5#837E2F
6#7B7638
7#726F40
8#6A6848
9#626151
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFFE #FFFEF0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEFC #FEFCDC | Light backgroundsTable row hoverSkeleton loading |
| 200 | FDF9 #FDF9BF | Secondary backgroundsInput backgroundsDividers |
| 300 | FBF4 #FBF48D | BordersInactive statesPlaceholder text |
| 400 | FAEE #FAEE52 | Disabled statesSecondary iconsMuted text |
| 500 | F8EA #F8EA20 | Primary brand colorCTAsActive elementsLinks |
| 600 | DACC #DACC07 | Hover statesFocus ringsPrimary buttons hover |
| 700 | ADA2 #ADA205 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7C74 #7C7404 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4F4A #4F4A02 | Primary textHigh emphasis contentDark headings |
| 950 | 312E #312E02 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--olive-50: #FFFEF0;
--olive-100: #FEFCDC;
--olive-200: #FDF9BF;
--olive-300: #FBF48D;
--olive-400: #FAEE52;
--olive-500: #F8EA20;
--olive-600: #DACC07;
--olive-700: #ADA205;
--olive-800: #7C7404;
--olive-900: #4F4A02;
--olive-950: #312E02;
}