Khaki Color

CSS khaki #F0E68C — a pale yellow, quite different from khaki fabric.

Khaki

#F0E68C

HEX: #F0E68C
RGB: rgb(240, 230, 140)
HSL: hsl(54, 76.9%, 74.5%)
HSV: hsv(54, 41.7%, 94.1%)
CMYKapproximation: cmyk(0%, 4%, 42%, 6%)
CSS name: khaki

Open khaki in the color picker to adjust it or copy other formats.

About khaki

#F0E68C is the CSS named color khaki. It is a light, soft yellow — much paler than the dusty brownish tone of khaki trousers and uniforms. The word comes from the Hindi/Urdu for “dust-colored”.

For the fabric color, a value around #C3B091 is commonly used. CSS darkkhaki (#BDB76B) is closer to it than khaki but greener. This page uses the CSS value as its canonical code and shows the fabric tone as a variant.

#F0E68C is the value of the CSS named color khaki, defined in the CSS Color specification and identical in every browser.

Other colors called khaki

Fabric khaki #C3B091The dusty tone of khaki clothing.
Dark khaki (CSS) #BDB76BA darker, olive-leaning CSS khaki.

Khaki shades and tints

Shades mix khaki with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with khaki

Color harmonies based on the hue of #F0E68C: its complement on the opposite side of the color wheel, its analogous neighbours and its triadic partners.

Khaki contrast and readability

On a khaki background, black text reads best (16.40:1). Here is how khaki works as a text color:

#F0E68C on white

1.28:1

Normal text sample

Large text

AA normal text (4.5:1)Fail
AA large text (3:1)Fail
AAA normal text (7:1)Fail
AAA large text (4.5:1)Fail

#F0E68C on black

16.40:1

Normal text sample

Large text

AA normal text (4.5:1)Pass
AA large text (3:1)Pass
AAA normal text (7:1)Pass
AAA large text (4.5:1)Pass

CSS khaki works as a warm, light background. For military, outdoor or workwear-inspired designs, use the darker fabric khaki instead.

Using khaki in CSS and HTML

CSS custom property

:root {
  --color-khaki: #F0E68C;
}

.highlight {
  background-color: var(--color-khaki);
}

Background and text color

.banner {
  background-color: khaki;
  color: #000000;
}

.label {
  color: #F0E68C;
  border: 2px solid rgb(240, 230, 140);
}

Inline style in HTML

<p style="background-color: #F0E68C; color: #000000;">
  Khaki background
</p>