HueWiz / Colors / Khaki
#F0E68C

Khaki

Khaki is a rich, strongly saturated, light warm yellow (#F0E68C).

Build palettes with Khaki →

Using Khaki in your designs

At hue 54° with 77% saturation, khaki lands firmly in the yellow family — a warm color through and through. Colors in this range are commonly associated with optimism, caution and visibility, which makes khaki a natural fit for highlights, warning states and youthful, energetic branding.

Khaki is light enough that it pairs better with dark text than white: black type on khaki hits 16.40:1 — comfortably past the WCAG AA threshold — while white manages only 1.28:1. It shines as a section background, card fill or subtle highlight where a full-strength accent would shout.

For pairings, the complement of khaki sits at 234° — #8E98F0, close to cornflowerblue — and delivers the strongest possible hue contrast; use it sparingly, in roughly a 90/10 split, so the two don't fight. For calmer schemes, the analogous colors 30° to either side keep the same warm temperature, while the triadic pair gives you a balanced three-color palette. All of these are computed for khaki in the palettes below, with copy-ready codes.

Khaki color palettes

Every palette below is computed from khaki's position on the color wheel (hue 54°). Hover any swatch to see its code; click to copy.

Complementary

Analogous

Triadic

Split-complementary

Tetradic

Monochromatic

Tints and shades of Khaki

Tints mix khaki toward white; shades mix it toward black. Use the scale for hover states, borders and depth without leaving the hue.

Shades → base → tints

Contrast & accessibility

WCAG 2.1 requires 4.5:1 for normal text (AA) and 3:1 for large text. Here's how khaki performs, plus how it appears under the three main types of dichromatic color blindness (simulated approximation).

PairingRatioNormal textLarge text
White text on Khaki1.28:1FailFail
Black text on Khaki16.40:1AAAAAA
Protanopia#ECECA2
Deuteranopia#ECEDA7
Tritanopia#F0B3B7

Khaki in code

Copy-ready snippets. In CSS you can also use the keyword khaki directly.

:root {
  --khaki: #F0E68C;
  --khaki-rgb: 240, 230, 140;
  --khaki-tint: #F7F1C0;
  --khaki-shade: #847E4D;
}

.btn-khaki {
  background: var(--khaki);
  color: #000000;
}
// tailwind.config.js
colors: {
  'khaki': {
    DEFAULT: '#F0E68C',
    light: '#F7F1C0',
    dark: '#847E4D',
  },
}

Colors similar to Khaki

The closest CSS named colors by perceptual (Lab) distance.

← PreviousivoryNext →lavender
Copied