Khaki
#EEC75D
OrangeColor Codes
All color formats for development
HEX
#EEC75DRGB
rgb(238, 199, 93)HSL
hsl(44, 81%, 65%)OKLCH
oklch(0.843 0.131 89.1)CMYK
cmyk(0%, 16%, 61%, 7%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#EBBD3F
2#E8B321
3#D2A016
4#B48913
5#967210
6#785B0D
7#5A4509
8#3C2E06
9#1E1703
Tints
Lighter variations
1#F0CD6E
2#F1D37E
3#F3D88E
4#F5DE9E
5#F7E3AE
6#F8E9BE
7#FAEECF
8#FCF4DF
9#FDF9EF
Tones
Muted variations
1#E7C465
2#E0C16C
3#D8BD73
4#D1BA7A
5#CAB782
6#C3B389
7#BBB090
8#B4AC97
9#ADA99F
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 | F9EA #F9EAC3 | Secondary backgroundsInput backgroundsDividers |
| 300 | F4DB #F4DB95 | BordersInactive statesPlaceholder text |
| 400 | EEC7 #EEC75D | Disabled statesSecondary iconsMuted text |
| 500 | E9B8 #E9B82F | Primary brand colorCTAsActive elementsLinks |
| 600 | CB9B #CB9B15 | Hover statesFocus ringsPrimary buttons hover |
| 700 | A27B #A27B11 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7358 #73580C | Text on light backgroundsHeadingsStrong borders |
| 900 | 4A38 #4A3808 | 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: #F9EAC3;
--khaki-300: #F4DB95;
--khaki-400: #EEC75D;
--khaki-500: #E9B82F;
--khaki-600: #CB9B15;
--khaki-700: #A27B11;
--khaki-800: #73580C;
--khaki-900: #4A3808;
--khaki-950: #2E2305;
}