What is the hex code for wheat?

The hex code for wheat is #F5DEB3. The same color is rgb(245, 222, 179), hsl(39, 77%, 83%) and oklch(90.9% 0.061 83), and in CSS you can also write the keyword wheat directly.

Can you use white text on wheat?

White text on wheat has a contrast ratio of 1.31:1, which fails AA even for large text under WCAG 2.2. Black text reaches 15.98:1 and passes both AA and AAA. In APCA terms that is Lc −17.8 for white and Lc 88.1 for black.

What is the RGB value of wheat?

Wheat is rgb(245, 222, 179): red 245, green 222 and blue 179 on the 0 to 255 scale, or 96.1%, 87.1% and 70.2%. As a decimal integer it is 16113331.

CSS named color

Wheat #F5DEB3

Wheat (CSS keyword wheat) has the hex code #F5DEB3 and the RGB value rgb(245, 222, 179): a pale, muted beige.

Wheat#F5DEB3

Named after the color of ripe wheat: a light golden beige (#f5deb3). Common as a warm neutral background.

Color codes for Wheat

Color codes for Wheat
CSS keyword	wheat
HEX	#F5DEB3
RGB	rgb(245, 222, 179)
HSL	hsl(39, 77%, 83%)
HWB	hwb(39 70% 4%)
OKLCH	oklch(90.9% 0.061 83)
CMYK (naive, no ICC profile)	cmyk(0%, 9%, 27%, 4%)
Decimal	16,113,331
Hue family	Browns and tans

Contrast and accessibility

On wheat, black text has a contrast ratio of 15.98:1 and passes AAA at any text size; white text reaches 1.31:1.

WCAG 2.2 contrast ratios (success criteria 1.4.3 and 1.4.6: AA needs 4.5:1 for normal text and 3:1 for large text, AAA needs 7:1 and 4.5:1). APCA Lc is the lightness contrast from the APCA-W3 0.0.98G model proposed for WCAG 3; a higher absolute value is more readable, and Lc 75 is its suggested minimum for body text.

Contrast and accessibility
Pair	Ratio	AA	AA large	AAA	AAA large	APCA Lc
Black text on wheat	15.98:1	Pass	Pass	Pass	Pass	88.1
White text on wheat	1.31:1	Fail	Fail	Fail	Fail	−17.8
Wheat text on white	1.31:1	Fail	Fail	Fail	Fail	15.5
Wheat text on black	15.98:1	Pass	Pass	Pass	Pass	−88.2

Tints and shades

Each step mixes wheat with white (tints) or black (shades) in gamma-encoded sRGB, the same result as color-mix(in srgb, wheat, white 25%) in CSS.

Tints (mixed with white)

5%
#f6e0b7
15%
#f7e3be
25%
#f8e6c6
35%
#f9eace
45%
#faedd5
55%
#fbf0dd
65%
#fcf3e4
75%
#fdf7ec
85%
#fefaf4
95%
#fffdfb

Shades (mixed with black)

5%
#e9d3aa
15%
#d0bd98
25%
#b8a786
35%
#9f9074
45%
#877a62
55%
#6e6451
65%
#564e3f
75%
#3d382d
85%
#25211b
95%
#0c0b09

Color harmonies

Rotating the hue in OKLCH while keeping lightness and chroma, wheat's complementary color is #CCE2FF (close to lavender), its analogous colors are #FFD7BC and #E0E6B7, and its triadic partners are #B1EEF3 and #F6D4F9. For text on top, black gives the higher contrast.

Color harmonies
Harmony	Rotation	Color
Complementary	+180°	#cce2ff
Analogous	−30°, +30°	#ffd7bc#e0e6b7
Triadic	+120°, +240°	#b1eef3#f6d4f9
Split-complementary	+150°, +210°	#b9e9ff#e2daff

Computed in OKLCH: the hue is rotated by 180° (complementary), ±30° (analogous), ±120° (triadic) and 180° ±30° (split-complementary) while lightness and chroma stay fixed. Results that fall outside sRGB are brought back with the CSS Color 4 gamut mapping algorithm. Because this uses OKLCH, the values differ from tools that rotate hue in HSL, but every color keeps the same perceived lightness.

Warm or cool?

Wheat is a warm color: its hue is 39° on the HSL wheel, in the red, orange and yellow range (0° to about 70°, plus reds above 330°) that is conventionally called warm.

Nearest named and Tailwind colors

Distance is ΔE OK, the Euclidean distance in OKLab multiplied by 100. Values under about 2 are hard to tell apart side by side.

Nearest CSS named colors

Nearest CSS named colors
Color	HEX	ΔE OK
navajowhite	#ffdead	1.5
peachpuff	#ffdab9	2.1
moccasin	#ffe4b5	2.2

Nearest Tailwind v4 colors

Nearest Tailwind v4 colors
Color	HEX	ΔE OK
orange-200	#ffd6a7	2.2
orange-100	#ffedd4	5.1
amber-100	#fef3c6	5.5

Code snippets

CSS

.element {
  color: wheat;
  background-color: #f5deb3;
  border-color: rgb(245 222 179);
  outline-color: oklch(90.9% 0.061 83);
}

Tailwind CSS

<div class="bg-[#f5deb3] text-black">...</div>

/* or register it once in your CSS (Tailwind v4) */
@theme {
  --color-wheat: #f5deb3;
}
/* then use bg-wheat, text-wheat, border-wheat */

SwiftUI

import SwiftUI

extension Color {
  static let wheat = Color(red: 0.961, green: 0.871, blue: 0.702)
}

Jetpack Compose

import androidx.compose.ui.graphics.Color

val Wheat = Color(0xFFF5DEB3)

Flutter

import 'package:flutter/material.dart';

const wheat = Color(0xFFF5DEB3);

Android XML

<!-- res/values/colors.xml -->
<color name="wheat">#F5DEB3</color>

Frequently asked questions

What is the hex code for wheat?: The hex code for wheat is #F5DEB3. The same color is rgb(245, 222, 179), hsl(39, 77%, 83%) and oklch(90.9% 0.061 83), and in CSS you can also write the keyword wheat directly.
Is wheat a warm or cool color?: Wheat is a warm color: its hue is 39° on the HSL wheel, in the red, orange and yellow range (0° to about 70°, plus reds above 330°) that is conventionally called warm.
What colors go with wheat?: Rotating the hue in OKLCH while keeping lightness and chroma, wheat's complementary color is #CCE2FF (close to lavender), its analogous colors are #FFD7BC and #E0E6B7, and its triadic partners are #B1EEF3 and #F6D4F9. For text on top, black gives the higher contrast.
Can you use white text on wheat?: White text on wheat has a contrast ratio of 1.31:1, which fails AA even for large text under WCAG 2.2. Black text reaches 15.98:1 and passes both AA and AAA. In APCA terms that is Lc −17.8 for white and Lc 88.1 for black.
What is the RGB value of wheat?: Wheat is rgb(245, 222, 179): red 245, green 222 and blue 179 on the 0 to 255 scale, or 96.1%, 87.1% and 70.2%. As a decimal integer it is 16113331.

Last reviewed September 27, 2026 by Arielton Oberek.