Khaki
#FBED50
YellowColor Codes
All color formats for development
HEX
#FBED50RGB
rgb(251, 237, 80)HSL
hsl(55, 96%, 65%)OKLCH
oklch(0.93 0.17 104.2)CMYK
cmyk(0%, 6%, 68%, 2%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#FBEA30
2#FAE70F
3#E3D105
4#C3B304
5#A29503
6#827703
7#615A02
8#413C01
9#201E01
Tints
Lighter variations
1#FCEF62
2#FCF173
3#FDF385
4#FDF496
5#FDF6A8
6#FEF8B9
7#FEFACB
8#FEFBDC
9#FFFDEE
Tones
Muted variations
1#F3E659
2#EADF61
3#E2D86A
4#D9D172
5#D1C97B
6#C8C283
7#BFBB8C
8#B7B495
9#AEAD9D
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFFD #FFFDF0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEFB #FEFBDC | Light backgroundsTable row hoverSkeleton loading |
| 200 | FEF8 #FEF8BE | Secondary backgroundsInput backgroundsDividers |
| 300 | FDF3 #FDF38C | BordersInactive statesPlaceholder text |
| 400 | FBED #FBED50 | Disabled statesSecondary iconsMuted text |
| 500 | FAE8 #FAE81E | Primary brand colorCTAsActive elementsLinks |
| 600 | DCCA #DCCA04 | Hover statesFocus ringsPrimary buttons hover |
| 700 | AFA1 #AFA104 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7D73 #7D7303 | Text on light backgroundsHeadingsStrong borders |
| 900 | 5049 #504902 | Primary textHigh emphasis contentDark headings |
| 950 | 322E #322E01 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--khaki-50: #FFFDF0;
--khaki-100: #FEFBDC;
--khaki-200: #FEF8BE;
--khaki-300: #FDF38C;
--khaki-400: #FBED50;
--khaki-500: #FAE81E;
--khaki-600: #DCCA04;
--khaki-700: #AFA104;
--khaki-800: #7D7303;
--khaki-900: #504902;
--khaki-950: #322E01;
}