#A0431F
#D07A4C
#F1DCC2
#FBF6EF
#5A0F2DRosewood
#9E2A2BCranberry
#D4A373Latte
#F5EBDDEggshell
Cranberry Bog is a 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.
Color codes click any value to copy
| Swatch | 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
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 SecondaryCard title
Card title
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.
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
#8D061D
#6D3D00
#755705
#9A5A3F
#694600
#972A3B
#A44500
#F497CA
#C39B00
#D86A0F
#D4432B
#955F00
#713F21
#BB5F2F
#FF954F
#FFF9F4
#875543
#B7876F
#E9DECF
#F9F6F2
#712640
#BB4643
#F2C08F
#FFF9F1
#4A232F
#834642
#C3A88F
#F1ECE4
#8F5300
#C2862F
#E7E0C1
#FBF6EF
#77545E
#B47E81
#FBCCA8
#F6EDE1
#59403C
#A56B3B
#FFC578
#FFFAED
#9A3B3B
#C08261
#E2C799
#F2ECBE
#6A040F
#DC2F02
#F48C06
#FFBA08
#432818
#99582A
#BB9457
#FFE6A7
#7A4A2E
#B06A3B
#E7A977
#F9E4D0
#94691E
#B26B7A
#F67664
#FF8725
#644400
#C5701B
#B69A00
#C6CF8F
#FE9AED
#C77D96
#923E00
#8F101F
#F28AF2
#FC8100
#80284F
#940014
#FF9F67
#DE97A1
#CF8300
#A94134
#3E2723
#8D5524
#E3A857
#FFF3D6
#664910
#A25500
#9B8D00
#FF9075
#E47716
#FF6459
#E8A800
#FFA1BE
#5D2521
#A74242
#E76E5F
#FFD7C9