Olive
#716B0E
YellowColor Codes
All color formats for development
HEX
#716B0ERGB
rgb(113, 107, 14)HSL
hsl(56, 78%, 25%)OKLCH
oklch(0.517 0.105 105.5)CMYK
cmyk(0%, 5%, 88%, 56%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#66600D
2#5B550B
3#4F4B0A
4#444008
5#393507
6#2D2B06
7#222004
8#171503
9#0B0B01
Tints
Lighter variations
1#948B12
2#B6AB16
3#D8CB1B
4#E6DA33
5#EAE055
6#EEE677
7#F2EC99
8#F7F3BB
9#FBF9DD
Tones
Muted variations
1#6D6713
2#686218
3#635E1D
4#5E5A22
5#595527
6#54512C
7#4F4D31
8#4A4836
9#45443B
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FDFD #FDFDF1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FBF9 #FBF9DF | Light backgroundsTable row hoverSkeleton loading |
| 200 | F8F4 #F8F4C4 | Secondary backgroundsInput backgroundsDividers |
| 300 | F2EC #F2EC97 | BordersInactive statesPlaceholder text |
| 400 | EBE2 #EBE260 | Disabled statesSecondary iconsMuted text |
| 500 | E6DA #E6DA33 | Primary brand colorCTAsActive elementsLinks |
| 600 | C8BC #C8BC19 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 9F96 #9F9614 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 716B #716B0E | Text on light backgroundsHeadingsStrong borders |
| 900 | 4944 #494409 | Primary textHigh emphasis contentDark headings |
| 950 | 2D2B #2D2B06 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--olive-50: #FDFDF1;
--olive-100: #FBF9DF;
--olive-200: #F8F4C4;
--olive-300: #F2EC97;
--olive-400: #EBE260;
--olive-500: #E6DA33;
--olive-600: #C8BC19;
--olive-700: #9F9614;
--olive-800: #716B0E;
--olive-900: #494409;
--olive-950: #2D2B06;
}