Khaki
#EAE362
YellowColor Codes
All color formats for development
HEX
#EAE362RGB
rgb(234, 227, 98)HSL
hsl(57, 76%, 65%)OKLCH
oklch(0.897 0.149 106.1)CMYK
cmyk(0%, 3%, 58%, 8%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#E6DE45
2#E2D828
3#CCC31C
4#AFA718
5#928C14
6#757010
7#58540C
8#3A3808
9#1D1C04
Tints
Lighter variations
1#ECE672
2#EEE881
3#F0EB91
4#F2EEA1
5#F4F1B0
6#F6F4C0
7#F9F7D0
8#FBF9E0
9#FDFCEF
Tones
Muted variations
1#E3DD69
2#DCD76F
3#D5D076
4#CECA7D
5#C8C484
6#C1BE8B
7#BAB891
8#B3B298
9#ADAC9F
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FDFD #FDFDF2 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FBF9 #FBF9E0 | Light backgroundsTable row hoverSkeleton loading |
| 200 | F7F5 #F7F5C5 | Secondary backgroundsInput backgroundsDividers |
| 300 | F1EC #F1EC98 | BordersInactive statesPlaceholder text |
| 400 | EAE3 #EAE362 | Disabled statesSecondary iconsMuted text |
| 500 | E3DB #E3DB35 | Primary brand colorCTAsActive elementsLinks |
| 600 | C5BD #C5BD1B | Hover statesFocus ringsPrimary buttons hover |
| 700 | 9D96 #9D9615 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 706B #706B0F | Text on light backgroundsHeadingsStrong borders |
| 900 | 4845 #48450A | Primary textHigh emphasis contentDark headings |
| 950 | 2D2B #2D2B06 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--khaki-50: #FDFDF2;
--khaki-100: #FBF9E0;
--khaki-200: #F7F5C5;
--khaki-300: #F1EC98;
--khaki-400: #EAE362;
--khaki-500: #E3DB35;
--khaki-600: #C5BD1B;
--khaki-700: #9D9615;
--khaki-800: #706B0F;
--khaki-900: #48450A;
--khaki-950: #2D2B06;
}