Brown Sugar

#ab764e

Muted caramel-brown base for earthy yellow layouts

Save
Share

About Brown Sugar

Brown Sugar sits heavier than Café au Lait but doesn't have 's metallic edge, it's a saturated, assertive brown that reads warm without feeling like it's performing. There's caramel depth here, almost a burnt-orange undertone creeping in at the edges, and it lands with real presence on screen.

Use it in food and beverage packaging, hospitality dashboards, and editorial layouts where you need a background that feels grounded and intentional. It works as a card container, a button state, a sidebar, anywhere you want brown that actually holds weight without the luxury posturing brings. Against cream it reads rich and familiar. Against warm white it's nearly invisible, so layer it carefully.

Test it at scale first. It's saturated enough that full-bleed applications will dominate the layout, which might be exactly what you want, or it might bury your hierarchy. Pair it with off-white and warm grays and you're solid. Cool neutrals? It'll warm everything around it, so know whether that's working for you or fighting your palette.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

Code snippets

Copy this color into your project.

Contrast checker

WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.

On White #ffffff

Aa
3.87:1FailAA Large

On Gray 100 #f5f5f5

Aa
3.55:1FailAA Large

On Gray 900 #18181b

Aa
4.58:1AAAAA Large

On Black #000000

Aa
5.43:1AAAAA Large

Variations

Shades

Darker variations, created by mixing toward black.

Tints

Lighter variations, created by mixing toward white.

Tones

Muted variations, created by reducing saturation.

Hues

Hue rotations around the color wheel.

Temperatures

Warm and cool shifts of this color.

Color harmonies

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

Create a gradient with Brown Sugar

Open the generator with this color pre-loaded.

Start creating