Shades of Wheat

Discover the warm, earthy beauty of wheat-inspired colors. Explore their HEX, RGB, and HSL values and find perfect pairings for your website or UI design projects.

Wheat Color Swatches

Wheat
HEX: #F5DEB3
RGB: 245, 222, 179

Light Wheat
HEX: #FDF5E6
RGB: 253, 245, 230

Pale Wheat
HEX: #FAEBD7
RGB: 250, 235, 215

Toasted Wheat
HEX: #DEB887
RGB: 222, 184, 135

Golden Grain
HEX: #D2B48C
RGB: 210, 180, 140

Sandy Wheat
HEX: #EDC9AF
RGB: 237, 201, 175

Soft Wheat
HEX: #E8D0A9
RGB: 232, 208, 169

Creamed Wheat
HEX: #F3E5AB
RGB: 243, 229, 171

Golden Wheat
HEX: #F0DC82
RGB: 240, 220, 130

Wheat Husk
HEX: #E6BE8A
RGB: 230, 190, 138

Color Combinations

Wheat + Forest Green

Wheat + Sky Blue

Wheat + Dusty Rose

Wheat + Charcoal Gray

Wheat + Slate Gray

Wheat + Saddle Brown

Wheat + Silver

Wheat + Indigo

Wheat Palette CSS

--wheat-100: #fff8f0;
--wheat-200: #fbe3c8;
--wheat-300: #f5deba;
--wheat-400: #e1c69c;
--wheat-500: #d4b78a;

Where to Use Wheat Colors

Backgrounds: Soft and easy on the eyes, perfect for calming pages or eco-themed content.
Cards & Containers: Use as background for feature boxes or callouts with contrasting dark text.
Buttons & Accents: Pair with dark green, charcoal, or ocean blue for clean contrast.

Did You Know?

The color wheat is one of the 147 named HTML colors supported in all major browsers.
It's widely used in minimal, vintage, and nature-themed websites.
Wheat tones are excellent for backgrounds and content blocks in UX/UI design.
Wheat's first known use as a color name in English was in 1711.

Try More Natural Shades

If you enjoy wheat, you might also like these gentle tones:

Beige — HEX: #f5f5dc
Tan — HEX: #d2b48c
Linen — HEX: #faf0e6
Antique White — HEX: #faebd7

✖

💖 Support This Tool