Khaki
#FAE352
YellowColor Codes
All color formats for development
HEX
#FAE352RGB
rgb(250, 227, 82)HSL
hsl(52, 94%, 65%)OKLCH
oklch(0.909 0.161 100.2)CMYK
cmyk(0%, 9%, 67%, 2%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#F9DE32
2#F8D912
3#E1C407
4#C1A806
5#A18C05
6#817004
7#605403
8#403802
9#201C01
Tints
Lighter variations
1#FAE663
2#FBE974
3#FBEC86
4#FCEE97
5#FCF1A8
6#FDF4BA
7#FDF7CB
8#FEF9DC
9#FEFCEE
Tones
Muted variations
1#F1DD5A
2#E9D763
3#E0D16B
4#D8CB73
5#D0C57C
6#C7BE84
7#BFB88D
8#B7B295
9#AEAC9D
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFFD #FFFDF0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEF9 #FEF9DC | Light backgroundsTable row hoverSkeleton loading |
| 200 | FDF5 #FDF5BF | Secondary backgroundsInput backgroundsDividers |
| 300 | FBED #FBED8D | BordersInactive statesPlaceholder text |
| 400 | FAE3 #FAE352 | Disabled statesSecondary iconsMuted text |
| 500 | F8DB #F8DB20 | Primary brand colorCTAsActive elementsLinks |
| 600 | DABE #DABE07 | Hover statesFocus ringsPrimary buttons hover |
| 700 | AD97 #AD9705 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7C6C #7C6C04 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4F45 #4F4502 | Primary textHigh emphasis contentDark headings |
| 950 | 312B #312B02 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--khaki-50: #FFFDF0;
--khaki-100: #FEF9DC;
--khaki-200: #FDF5BF;
--khaki-300: #FBED8D;
--khaki-400: #FAE352;
--khaki-500: #F8DB20;
--khaki-600: #DABE07;
--khaki-700: #AD9705;
--khaki-800: #7C6C04;
--khaki-900: #4F4502;
--khaki-950: #312B02;
}