Khaki
#FDEC4E
YellowColor Codes
All color formats for development
HEX
#FDEC4ERGB
rgb(253, 236, 78)HSL
hsl(54, 98%, 65%)OKLCH
oklch(0.93 0.171 103.1)CMYK
cmyk(0%, 7%, 69%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#FDE82D
2#FDE50D
3#E6CF02
4#C5B102
5#A49402
6#837601
7#625901
8#423B01
9#211E00
Tints
Lighter variations
1#FDEE60
2#FEF072
3#FEF283
4#FEF395
5#FEF5A7
6#FEF7B8
7#FEF9CA
8#FFFBDC
9#FFFDED
Tones
Muted variations
1#F4E557
2#ECDE60
3#E3D769
4#DAD071
5#D1C97A
6#C9C283
7#C0BB8C
8#B7B494
9#AEAD9D
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFFD #FFFDF0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FFFB #FFFBDC | Light backgroundsTable row hoverSkeleton loading |
| 200 | FEF8 #FEF8BD | Secondary backgroundsInput backgroundsDividers |
| 300 | FEF2 #FEF28B | BordersInactive statesPlaceholder text |
| 400 | FDEC #FDEC4E | Disabled statesSecondary iconsMuted text |
| 500 | FDE6 #FDE61C | Primary brand colorCTAsActive elementsLinks |
| 600 | DEC8 #DEC802 | Hover statesFocus ringsPrimary buttons hover |
| 700 | B19F #B19F02 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7E72 #7E7201 | Text on light backgroundsHeadingsStrong borders |
| 900 | 5149 #514901 | Primary textHigh emphasis contentDark headings |
| 950 | 322D #322D01 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--khaki-50: #FFFDF0;
--khaki-100: #FFFBDC;
--khaki-200: #FEF8BD;
--khaki-300: #FEF28B;
--khaki-400: #FDEC4E;
--khaki-500: #FDE61C;
--khaki-600: #DEC802;
--khaki-700: #B19F02;
--khaki-800: #7E7201;
--khaki-900: #514901;
--khaki-950: #322D01;
}