Khaki
#FFDE8A
OrangeColor Codes
All color formats for development
HEX
#FFDE8ARGB
rgb(255, 222, 138)HSL
hsl(43, 100%, 77%)OKLCH
oklch(0.91 0.11 88.7)CMYK
cmyk(0%, 13%, 46%, 0%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#FFD362
2#FFC83B
3#FFBC14
4#ECA900
5#C48D00
6#9D7100
7#765400
8#4F3800
9#271C00
Tints
Lighter variations
1#FFE195
2#FFE4A1
3#FFE8AD
4#FFEBB9
5#FFEEC4
6#FFF2D0
7#FFF5DC
8#FFF8E8
9#FFFCF3
Tones
Muted variations
1#F9DB90
2#F3D995
3#EDD69B
4#E8D4A1
5#E2D1A7
6#DCCFAD
7#D6CCB3
8#D0C9B9
9#CAC7BE
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;
}