What are the hex codes in the Rosewood & Spruce Breeze palette?

The Rosewood & Spruce Breeze color palette consists of Rosewood #5A0F2D, Spruce #006A57, Latte #D4A373, Eggshell #F5EBDD.

How should I use the Rosewood & Spruce Breeze palette on a website?

Use Eggshell #F5EBDD as the background, Rosewood #5A0F2D for text, Spruce #006A57 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 Rosewood & Spruce Breeze 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

#006A57Spruce

#D4A373Latte

#F5EBDDEggshell

Rosewood & Spruce Breeze color palette

Modern Brown 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)`
Spruce	`#006A57`	`rgb(0, 106, 87)`	`hsl(169, 100%, 21%)`	`oklch(46.8% 0.089 175)`
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

Rosewood & Spruce Breeze is a vivid complementary color palette tagged modern, brown, white. Near-complementary hues (about 167° apart) make this a high-contrast, attention-grabbing combination. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Spruce takes the lead while the rest support. Lightness runs from 21% to 91%. Well suited to 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: Spruce (#006A57) is the most saturated mid-tone; use it for buttons and links (5.57: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 Rosewood & Spruce Breeze

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

#006A57

#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
`#5A0F2D` on `#D4A373`	Aa	6.03:1	AA
`#006A57` on `#F5EBDD`	Aa	5.57:1	AA
`#006A57` on `#D4A373`	Aa	2.9:1	Fail
`#5A0F2D` on `#006A57`	Aa	2.08:1	Fail
`#D4A373` on `#F5EBDD`	Aa	1.92:1	Fail

Similar palettes 24 more in this mood