Khaki
#FFCC4D
OrangeColor Codes
All color formats for development
HEX
#FFCC4DRGB
rgb(255, 204, 77)HSL
hsl(43, 100%, 65%)OKLCH
oklch(0.868 0.151 86.4)CMYK
cmyk(0%, 20%, 70%, 0%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#FFC32B
2#FFBA0A
3#E8A600
4#C78F00
5#A67700
6#855F00
7#634700
8#423000
9#211800
Tints
Lighter variations
1#FFD15E
2#FFD770
3#FFDC82
4#FFE194
5#FFE6A6
6#FFEBB8
7#FFF0C9
8#FFF5DB
9#FFFAED
Tones
Muted variations
1#F6C955
2#EDC55E
3#E4C167
4#DBBD70
5#D2B979
6#C9B582
7#C1B18B
8#B8AD94
9#AFAA9D
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFFB #FFFBF0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FFF5 #FFF5DB | Light backgroundsTable row hoverSkeleton loading |
| 200 | FFEC #FFECBD | Secondary backgroundsInput backgroundsDividers |
| 300 | FFDE #FFDE8A | BordersInactive statesPlaceholder text |
| 400 | FFCC #FFCC4D | Disabled statesSecondary iconsMuted text |
| 500 | FFBE #FFBE1A | Primary brand colorCTAsActive elementsLinks |
| 600 | E0A1 #E0A100 | Hover statesFocus ringsPrimary buttons hover |
| 700 | B380 #B38000 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 805B #805B00 | Text on light backgroundsHeadingsStrong borders |
| 900 | 523A #523A00 | Primary textHigh emphasis contentDark headings |
| 950 | 3325 #332500 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--khaki-50: #FFFBF0;
--khaki-100: #FFF5DB;
--khaki-200: #FFECBD;
--khaki-300: #FFDE8A;
--khaki-400: #FFCC4D;
--khaki-500: #FFBE1A;
--khaki-600: #E0A100;
--khaki-700: #B38000;
--khaki-800: #805B00;
--khaki-900: #523A00;
--khaki-950: #332500;
}