What are the hex codes in the Bold Cocoa & Sky Blue palette?

The Bold Cocoa & Sky Blue color palette consists of Gunmetal #0E3B4A, Cocoa #906235, Sky Blue #8FD5D2, Smoke #EAF7F5.

How should I use the Bold Cocoa & Sky Blue palette on a website?

Use Smoke #EAF7F5 as the background, Gunmetal #0E3B4A for text, Cocoa #906235 for buttons and links, and Sky Blue #8FD5D2 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Gunmetal on Smoke at 10.97:1.

Which colors in Bold Cocoa & Sky Blue have enough contrast for text?

The highest-contrast pair is #0E3B4A on #EAF7F5 with a ratio of 10.97:1, which passes WCAG AA for normal text.

#0E3B4AGunmetal

#906235Cocoa

#8FD5D2Sky Blue

#EAF7F5Smoke

Bold Cocoa & Sky Blue color palette

Muted White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Gunmetal	`#0E3B4A`	`rgb(14, 59, 74)`	`hsl(195, 68%, 17%)`	`oklch(33.0% 0.054 225)`
Cocoa	`#906235`	`rgb(144, 98, 53)`	`hsl(30, 46%, 39%)`	`oklch(53.6% 0.085 64)`
Sky Blue	`#8FD5D2`	`rgb(143, 213, 210)`	`hsl(177, 45%, 70%)`	`oklch(82.6% 0.070 192)`
Smoke	`#EAF7F5`	`rgb(234, 247, 245)`	`hsl(171, 45%, 94%)`	`oklch(96.6% 0.014 186)`

Why it works and how to use it

Bold Cocoa & Sky Blue is a complementary color palette tagged muted, white. Gunmetal and Smoke sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. Neither washed out nor loud, it adapts to most contexts. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Cocoa takes the lead while the rest support. Lightness runs from 17% to 94%. Well suited to websites, presentations and branding.

Background: Smoke (#EAF7F5) is the lightest color, so it belongs on large surfaces.
Text: Gunmetal (#0E3B4A) on #EAF7F5 gives 10.97:1, passing WCAG AAA.
Primary: Cocoa (#906235) is the most saturated mid-tone; use it for buttons and links (4.8:1 against the background, fine for UI elements).
Accent: Sky Blue (#8FD5D2) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Gunmetal on Smoke at 10.97:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Bold Cocoa & Sky Blue

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

#0E3B4A

#906235

#8FD5D2

#EAF7F5

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
`#0E3B4A` on `#EAF7F5`	Aa	10.97:1	AAA
`#0E3B4A` on `#8FD5D2`	Aa	7.24:1	AAA
`#906235` on `#EAF7F5`	Aa	4.8:1	AA
`#906235` on `#8FD5D2`	Aa	3.17:1	AA large only
`#0E3B4A` on `#906235`	Aa	2.29:1	Fail
`#8FD5D2` on `#EAF7F5`	Aa	1.52:1	Fail

Similar palettes 24 more in this mood