Wheat vs Brown

Wheat #F5DEB3 View details →

Brown #A52A2A View details →

What is the difference between Wheat and Brown?

A side-by-side study of Wheat (#F5DEB3) and Brown (#A52A2A) presents distinct choices for graphic layouts. In terms of color intensity, Wheat is visibly more vibrant and saturated. Under screen illumination, Wheat has a higher brightness and reflectivity. They have a close hue coordinate distance of 39°, representing a harmonized adjacent relationship.

Design recommendations for Wheat vs Brown

When choosing between Wheat and Brown for interface designs, consider their visual weight. Since Brown is darker, it serves as a solid base for structural layouts or heavy typography, while the lighter Wheat is ideal for backgrounds or high-visibility accents. Testing their contrast ratio is essential to meet WCAG accessibility guidelines.

✦ Readability & Contrast Testing

Visual test showing black and white text overlay readability on both colors.

Wheat Typography

Preview of dark and light text elements rendered over a solid Wheat background canvas.

White Text: 1.31:1 Black Text: 15.98:1

Brown Typography

Preview of dark and light text elements rendered over a solid Brown background canvas.

White Text: 7.08:1 Black Text: 2.96:1

⚙ Technical Specifications Comparison

Format / Value	Wheat	Brown	Delta / Difference
HEX Code	`#F5DEB3`	`#A52A2A`	-
RGB Channels	`rgb(245, 222, 179)`	`rgb(165, 42, 42)`	`R:-80 \| G:-180 \| B:-137`
HSL Values	`hsl(39°, 77%, 83%)`	`hsl(0°, 59%, 41%)`	`H:-39° \| S:-18% \| L:-42%`
CMYK (Print)	`cmyk(0%, 9%, 27%, 4%)`	`cmyk(0%, 75%, 75%, 35%)`	-

◉ Individual Color References

Wheat Reference Sheet HEX, RGB, HSL and print codes

Brown Reference Sheet HEX, RGB, HSL and print codes