Khaki
#F7E891
YellowColor Codes
All color formats for development
HEX
#F7E891RGB
rgb(247, 232, 145)HSL
hsl(51, 86%, 77%)OKLCH
oklch(0.924 0.109 99.7)CMYK
cmyk(0%, 6%, 41%, 3%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#F4E06D
2#F1D849
3#EFD024
4#DBBD10
5#B79D0E
6#927E0B
7#6E5E08
8#493F05
9#251F03
Tints
Lighter variations
1#F8EA9D
2#F8ECA8
3#F9EFB3
4#FAF1BE
5#FBF3C8
6#FCF6D3
7#FDF8DE
8#FDFAE9
9#FEFDF4
Tones
Muted variations
1#F2E497
2#EDE19C
3#E8DDA1
4#E3DAA6
5#DED6AB
6#D9D2B0
7#D3CFB5
8#CECBBA
9#C9C8BF
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEFC #FEFCF1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FDF8 #FDF8DE | Light backgroundsTable row hoverSkeleton loading |
| 200 | FAF2 #FAF2C1 | Secondary backgroundsInput backgroundsDividers |
| 300 | F7E8 #F7E892 | BordersInactive statesPlaceholder text |
| 400 | F3DB #F3DB59 | Disabled statesSecondary iconsMuted text |
| 500 | EFD1 #EFD12A | Primary brand colorCTAsActive elementsLinks |
| 600 | D1B4 #D1B410 | Hover statesFocus ringsPrimary buttons hover |
| 700 | A68F #A68F0C | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7766 #776609 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4C41 #4C4106 | Primary textHigh emphasis contentDark headings |
| 950 | 2F29 #2F2904 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--khaki-50: #FEFCF1;
--khaki-100: #FDF8DE;
--khaki-200: #FAF2C1;
--khaki-300: #F7E892;
--khaki-400: #F3DB59;
--khaki-500: #EFD12A;
--khaki-600: #D1B410;
--khaki-700: #A68F0C;
--khaki-800: #776609;
--khaki-900: #4C4106;
--khaki-950: #2F2904;
}