Wheat color (#F5DEB3)
Wheat is one of the 148 CSS named colors. Use the keyword wheat
anywhere CSS accepts a color, or its hex code #F5DEB3, which is rgb(245, 222, 179) in RGB.
It is a very light, moderately saturated warm color with a hue angle of 39° on the HSL color wheel and a perceived lightness of 91% in OKLCH. On a wheat background, black text gives the higher contrast at 15.98:1, which passes WCAG AA for normal text.
Wheat color codes
| CSS name | wheat |
|
|---|---|---|
| HEX | #F5DEB3 |
|
| HEX (8-digit) | #F5DEB3FF |
|
| RGB | rgb(245, 222, 179) |
|
| HSL | hsl(39, 77%, 83%) |
|
| HSV / HSB | hsv(39, 27%, 96%) |
|
| OKLCH | oklch(90.9% 0.0615 83) |
|
| CMYK | cmyk(0%, 9.4%, 26.9%, 3.9%) |
Contrast with white and black
WCAG 2 contrast ratios and APCA lightness contrast (Lc) for wheat used as text and as a background.
Tints and shades of wheat
Tints mix wheat with white; shades mix it with black, in 10% steps. Click a swatch to copy it, or build custom scales in the tint & shade generator.
Tints
Shades
Colors that go with wheat
Harmonies calculated on the HSL color wheel. Explore more in the color scheme generator.
Complementary
Analogous
Triadic
Split-Complementary
Wheat with color blindness
Approximately how wheat appears with each type of color vision deficiency. Test full designs with the color blindness simulator.
Using wheat in CSS
.element {
color: wheat;
background-color: #f5deb3;
border-color: rgb(245 222 179 / 50%);
outline-color: oklch(90.9% 0.0615 83);
}Similar named colors
See all shades of brown or browse every CSS color name.