Olive
#4D4604
YellowColor Codes
All color formats for development
HEX
#4D4604RGB
rgb(77, 70, 4)HSL
hsl(54, 90%, 16%)OKLCH
oklch(0.389 0.079 102.7)CMYK
cmyk(0%, 9%, 95%, 70%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#463F04
2#3E3803
3#363103
4#2F2A02
5#272302
6#1F1C02
7#171501
8#100E01
9#080700
Tints
Lighter variations
1#766B06
2#9F9008
3#C8B50B
4#F0DA0D
5#F4E134
6#F6E75C
7#F9ED85
8#FBF3AE
9#FDF9D6
Tones
Muted variations
1#4A4308
2#46400B
3#433D0F
4#3F3A13
5#3B3716
6#37351A
7#34321E
8#302F21
9#2C2C25
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEFD #FEFDF0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FDFA #FDFADD | Light backgroundsTable row hoverSkeleton loading |
| 200 | FCF6 #FCF6C0 | Secondary backgroundsInput backgroundsDividers |
| 300 | F9EF #F9EF90 | BordersInactive statesPlaceholder text |
| 400 | F6E6 #F6E655 | Disabled statesSecondary iconsMuted text |
| 500 | F4DF #F4DF25 | Primary brand colorCTAsActive elementsLinks |
| 600 | D5C1 #D5C10B | Hover statesFocus ringsPrimary buttons hover |
| 700 | AA9A #AA9A09 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 796E #796E06 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4E46 #4E4604 | Primary textHigh emphasis contentDark headings |
| 950 | 302C #302C03 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--olive-50: #FEFDF0;
--olive-100: #FDFADD;
--olive-200: #FCF6C0;
--olive-300: #F9EF90;
--olive-400: #F6E655;
--olive-500: #F4DF25;
--olive-600: #D5C10B;
--olive-700: #AA9A09;
--olive-800: #796E06;
--olive-900: #4E4604;
--olive-950: #302C03;
}