Khaki Color (#F0E68C)

A pale yellow background with a warmer tone than gray. CSS value: #F0E68C.

Color value

Use HEX, RGB, HSL or a CSS color name, without transparency.

Normalized color

CSS names:

Compare black and white text

This compares black and white text on the selected background. Check the result for your text size before choosing either one.

Color relationships

Tints toward white

Shades toward black

Five steps mix the sRGB channels toward white or black: 0%, 25%, 50%, 75% and 100%. Equal numeric steps may not look equally spaced.

Supported color inputs and errors →

Khaki hex and RGB values

The CSS keyword khaki gives you #F0E68C, or rgb(240, 230, 140).

Khaki offers a warm yellow background for a panel. Its CSS value is much lighter than many fabrics called khaki, so share the code alongside the name.

Compare black and white text

Text / backgroundRatioAA normalAA largeAAA normalAAA large
#000000 / #F0E68C16.40:1PassPassPassPass
#FFFFFF / #F0E68C1.28:1FailFailFailFail

Black text has the higher contrast on khaki: 16.40:1. The table compares both options against all four text thresholds, using the unrounded values for pass or fail.

Try khaki in a layout

The CSS sample below uses black text on #F0E68C. Preview a 16 px label and a 24 px heading to compare normal and large text. Swap the colors to try khaki as the text color; the ratio stays the same.

.sample {
  background: #F0E68C;
  color: #000000;
}

Copy the exact color

Use the converter to copy HEX, RGB or HSL. If you edit in HSL, the final value is rounded to eight-bit sRGB so the preview and exported color agree. For text over an image, gradient or translucent layer, check the finished design separately.

Sources and further reading