What are the hex codes in the Cranberry Bog palette?

The Cranberry Bog color palette consists of Rosewood #5A0F2D, Cranberry #9E2A2B, Latte #D4A373, Eggshell #F5EBDD.

How should I use the Cranberry Bog palette on a website?

Use Eggshell #F5EBDD as the background, Rosewood #5A0F2D for text, Cranberry #9E2A2B for buttons and links, and Latte #D4A373 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Rosewood on Eggshell at 11.56:1.

Which colors in Cranberry Bog have enough contrast for text?

The highest-contrast pair is #5A0F2D on #F5EBDD with a ratio of 11.56:1, which passes WCAG AA for normal text.

#5A0F2DRosewood

#9E2A2BCranberry

#D4A373Latte

#F5EBDDEggshell

Cranberry Bog color palette

Autumn Warm Brown Red White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Rosewood	`#5A0F2D`	`rgb(90, 15, 45)`	`hsl(336, 71%, 21%)`	`oklch(31.4% 0.109 2)`
Cranberry	`#9E2A2B`	`rgb(158, 42, 43)`	`hsl(359, 58%, 39%)`	`oklch(46.8% 0.152 25)`
Latte	`#D4A373`	`rgb(212, 163, 115)`	`hsl(30, 53%, 64%)`	`oklch(75.0% 0.086 65)`
Eggshell	`#F5EBDD`	`rgb(245, 235, 221)`	`hsl(35, 55%, 91%)`	`oklch(94.4% 0.022 77)`

Why it works and how to use it

Cranberry Bog is an analogous color palette tagged autumn, warm, brown. Analogous neighbors on the wheel (Rosewood, Cranberry, Latte) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

The palette holds together thanks to its analogous hue relationship and a strong light-to-dark ladder (91% down to 21% lightness). A natural fit for websites, presentations and branding.

Background: Eggshell (#F5EBDD) is the lightest color, so it belongs on large surfaces.
Text: Rosewood (#5A0F2D) on #F5EBDD gives 11.56:1, passing WCAG AAA.
Primary: Cranberry (#9E2A2B) is the most saturated mid-tone; use it for buttons and links (6.32:1 against the background, fine for UI elements).
Accent: Latte (#D4A373) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Rosewood on Eggshell at 11.56:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Cranberry Bog

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#5A0F2D

#9E2A2B

#D4A373

#F5EBDD

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#5A0F2D` on `#F5EBDD`	Aa	11.56:1	AAA
`#9E2A2B` on `#F5EBDD`	Aa	6.32:1	AA
`#5A0F2D` on `#D4A373`	Aa	6.03:1	AA
`#9E2A2B` on `#D4A373`	Aa	3.29:1	AA large only
`#D4A373` on `#F5EBDD`	Aa	1.92:1	Fail
`#5A0F2D` on `#9E2A2B`	Aa	1.83:1	Fail

Similar palettes 24 more in this mood