Real Brown

A grounded and somber earthy brown

Select a Color

This dusty, desaturated brown projects a somber, grounded character. Because #563d2d is quite dark and matte, it works best as a steady, supporting background rather than a main focus. Pair it with soft cream or muted gold to cut the gloom. Since white text offers high contrast against this hex code, it remains readable for UI elements when used in dark mode designs.

About Real Brown

Dry riverbank mud in late November

What does real brown mean?

This brown commonly calls to mind soil, timber, and leather, so it often signals sturdiness and everyday use. Its low lightness and minimal saturation give it a heavy, matte presence that settles into a scene instead of standing out.

Where you see real brown

saddle leather
coffee grounds
potting soil
walnut wood
tree bark
pinecones

What it works for

It works well as a grounding tone for earthy palettes, textured backgrounds, and rustic or vintage designs.

What colors go with real brown?

Sage Green #9caf88The muted green softens this brown's darkness while keeping the whole palette earthy.Cream #fffdd0A pale neutral brightens the deep brown and makes text and details easier to see.Dusty Rose #b56f76The grayed pink adds warmth that keeps this brown from reading too flat.Slate Blue #6a5acdThe cool blue gives contrast in temperature while matching this brown's low saturation.

Questions about Real Brown

What is the hex code for Real Brown?

Real Brown is #563d2d. In RGB that is rgb(86, 61, 45), in HSL hsl(23, 31%, 26%) and in CMYK 0%, 29%, 48%, 66%.

Is #563d2d effective for user interface design?

Yes, it works exceptionally well as a dark background for modern, low-glare interfaces. Because it is desaturated, it provides a stable canvas that allows white or light-toned text to pop clearly, ensuring your design remains accessible and comfortable to read in dark mode environments.

Is Real Brown readable on white or black?

Real Brown has a 9.99:1 contrast ratio on white and 2.10:1 on black. WCAG asks for 4.5:1 for body text and 3:1 for large text, so on white it works for body text and on black it is too faint for text. Try other pairs in the contrast checker.