CSS Color: Khaki
Named CSS color Khaki — #F0E68C in HEX, rgb(240, 230, 140) in RGB, hsl(54, 77%, 75%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Khaki | color: Khaki; |
| HEX | #F0E68C | color: #F0E68C; |
| RGB | rgb(240, 230, 140) | color: rgb(240, 230, 140); |
| HSL | hsl(54, 77%, 75%) | color: hsl(54, 77%, 75%); |
About Khaki
Khaki is a soft, muted yellow with earthy undertones. Its hex value `#F0E68C` sits at 54 degrees on the hue wheel with 77% saturation and 75% lightness, giving it a warm, sandy appearance that is far gentler than pure Yellow.
In web design, Khaki is excellent for warm background tones, subtle highlights, and earthy design themes. It works particularly well for note panels, soft callout boxes, and vintage or nature-inspired designs. Its subdued nature makes it easy to combine with other colors without visual conflict.
Accessibility note: Khaki against white achieves very low contrast (about 1.3:1) and should never be used for text on light backgrounds. Against dark backgrounds, however, it provides good contrast and a warm, readable alternative to white text.
Khaki bridges the gap between Yellow and Beige, offering warmth without the extreme brightness of Yellow. It pairs well with brown, olive, forest green, navy, and warm grays. In Tailwind CSS, `yellow-200` or `amber-200` are close matches.
FAQ
What is the hex code for Khaki?
The CSS named color Khaki has the hex code #F0E68C. You can use it in CSS as color: #F0E68C; or simply color: Khaki;.
What is Khaki in RGB?
In RGB notation, Khaki is rgb(240, 230, 140). Use it in CSS as color: rgb(240, 230, 140);.
What is Khaki in HSL?
In HSL notation, Khaki is hsl(54, 77%, 75%). Use it in CSS as color: hsl(54, 77%, 75%);.
What color category is Khaki?
Khaki belongs to the Yellow color family in the CSS named colors specification.
Can I use the name "Khaki" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Khaki; or background-color: Khaki; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert Khaki to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →