Khaki
#EFC85D
OrangeColor Codes
All color formats for development
HEX
#EFC85DRGB
rgb(239, 200, 93)HSL
hsl(44, 82%, 65%)OKLCH
oklch(0.846 0.132 89.3)CMYK
cmyk(0%, 16%, 61%, 6%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#ECBE3E
2#E9B320
3#D3A015
4#B58A12
5#97730F
6#795C0C
7#5A4509
8#3C2E06
9#1E1703
Tints
Lighter variations
1#F1CD6D
2#F2D37D
3#F4D88D
4#F5DE9E
5#F7E3AE
6#F9E9BE
7#FAEECE
8#FCF4DF
9#FDF9EF
Tones
Muted variations
1#E8C464
2#E0C16B
3#D9BE73
4#D2BA7A
5#CAB781
6#C3B388
7#BCB090
8#B4AD97
9#ADA99E
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEFA #FEFAF1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FCF4 #FCF4DF | Light backgroundsTable row hoverSkeleton loading |
| 200 | F9EB #F9EBC3 | Secondary backgroundsInput backgroundsDividers |
| 300 | F4DB #F4DB94 | BordersInactive statesPlaceholder text |
| 400 | EFC8 #EFC85D | Disabled statesSecondary iconsMuted text |
| 500 | EAB8 #EAB82E | Primary brand colorCTAsActive elementsLinks |
| 600 | CC9B #CC9B14 | Hover statesFocus ringsPrimary buttons hover |
| 700 | A27B #A27B10 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7458 #74580B | Text on light backgroundsHeadingsStrong borders |
| 900 | 4A38 #4A3807 | Primary textHigh emphasis contentDark headings |
| 950 | 2E23 #2E2305 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--khaki-50: #FEFAF1;
--khaki-100: #FCF4DF;
--khaki-200: #F9EBC3;
--khaki-300: #F4DB94;
--khaki-400: #EFC85D;
--khaki-500: #EAB82E;
--khaki-600: #CC9B14;
--khaki-700: #A27B10;
--khaki-800: #74580B;
--khaki-900: #4A3807;
--khaki-950: #2E2305;
}