Khaki gradient background
This khaki gradient blends CSS khaki, a pale sandy yellow, into the olive-toned dark khaki. It's an outdoorsy, safari-style backdrop for travel posts, menus and vintage designs.
Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.
At a glance
- Black text on darkkhaki (#bdb76b)
- 10.1:1, which passes the 4.5:1 WCAG AA minimum for normal-size text
- Source: w3.org, checked 2026-11
Want a page that already looks finished?
A free Liite page comes with 15 themes, from soft sunset tones to plain black and white, plus gradient and pattern wallpapers of your own. Pick one, add your links, and your page is live at liite.co/yourname.
Khaki gradient background: what to know
This page starts the background generator for this case. For every option and how to use it, see the background generator.
CSS khaki versus khaki fabric
CSS khaki (#f0e68c) is paler and yellower than most khaki trousers. For a browner, fabric-style khaki, change the first stop to tan (#d2b48c) and keep dark khaki at the end. Dark text works over the whole gradient; white text doesn't, because both stops are light.
Questions
What is the hex code for khaki?
In CSS, khaki is #f0e68c and darkkhaki is #bdb76b. Brands and paint makers use their own khakis, often closer to tan.
Does khaki go with green?
Yes. Add an olive or dark green third stop for a military or outdoor look.