Khaki
#F6F192
YellowColor Codes
All color formats for development
HEX
#F6F192RGB
rgb(246, 241, 146)HSL
hsl(57, 85%, 77%)OKLCH
oklch(0.942 0.117 105.8)CMYK
cmyk(0%, 2%, 41%, 4%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#F3ED6E
2#F0E84A
3#EDE326
4#DAD012
5#B6AD0F
6#918B0C
7#6D6809
8#494506
9#242303
Tints
Lighter variations
1#F7F39D
2#F8F4A8
3#F9F5B3
4#FAF7BE
5#FBF8C9
6#FBF9D4
7#FCFBDE
8#FDFCE9
9#FEFEF4
Tones
Muted variations
1#F1ED97
2#ECE89C
3#E7E4A1
4#E2DFA6
5#DDDBAB
6#D8D6B0
7#D3D2B5
8#CECDBA
9#C9C9BF
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEFD #FEFDF1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FCFB #FCFBDE | Light backgroundsTable row hoverSkeleton loading |
| 200 | FAF7 #FAF7C2 | Secondary backgroundsInput backgroundsDividers |
| 300 | F6F1 #F6F192 | BordersInactive statesPlaceholder text |
| 400 | F2EA #F2EA5A | Disabled statesSecondary iconsMuted text |
| 500 | EEE4 #EEE42B | Primary brand colorCTAsActive elementsLinks |
| 600 | D0C6 #D0C611 | Hover statesFocus ringsPrimary buttons hover |
| 700 | A59E #A59E0D | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7671 #76710A | Text on light backgroundsHeadingsStrong borders |
| 900 | 4B48 #4B4806 | Primary textHigh emphasis contentDark headings |
| 950 | 2F2D #2F2D04 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--khaki-50: #FEFDF1;
--khaki-100: #FCFBDE;
--khaki-200: #FAF7C2;
--khaki-300: #F6F192;
--khaki-400: #F2EA5A;
--khaki-500: #EEE42B;
--khaki-600: #D0C611;
--khaki-700: #A59E0D;
--khaki-800: #76710A;
--khaki-900: #4B4806;
--khaki-950: #2F2D04;
}