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

The Baby Blue & Cocoa Sky color palette consists of Taupe #4A3222, Cocoa #8B5E3C, Baby Blue #72D1FF, Ivory #FFF8EC.

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

Use Ivory #FFF8EC as the background, Taupe #4A3222 for text, Baby Blue #72D1FF for buttons and links, and Cocoa #8B5E3C for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Taupe on Ivory at 11.23:1.

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

The highest-contrast pair is #4A3222 on #FFF8EC with a ratio of 11.23:1, which passes WCAG AA for normal text.

#4A3222Taupe

#8B5E3CCocoa

#72D1FFBaby Blue

#FFF8ECIvory

Baby Blue & Cocoa Sky color palette

Modern Brown Blue White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Taupe	`#4A3222`	`rgb(74, 50, 34)`	`hsl(24, 37%, 21%)`	`oklch(34.1% 0.044 54)`
Cocoa	`#8B5E3C`	`rgb(139, 94, 60)`	`hsl(26, 40%, 39%)`	`oklch(52.2% 0.076 57)`
Baby Blue	`#72D1FF`	`rgb(114, 209, 255)`	`hsl(200, 100%, 72%)`	`oklch(82.0% 0.111 231)`
Ivory	`#FFF8EC`	`rgb(255, 248, 236)`	`hsl(38, 100%, 96%)`	`oklch(98.1% 0.018 81)`

Why it works and how to use it

Baby Blue & Cocoa Sky is a vivid complementary color palette tagged modern, brown, blue. Near-complementary hues (about 176° 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 3 chromatic colors, Baby Blue takes the lead while the rest support. Lightness runs from 21% to 96%. Well suited to websites, presentations and branding.

Background: Ivory (#FFF8EC) is the lightest color, so it belongs on large surfaces.
Text: Taupe (#4A3222) on #FFF8EC gives 11.23:1, passing WCAG AAA.
Primary: Baby Blue (#72D1FF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cocoa (#8B5E3C) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Taupe on Ivory at 11.23:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Baby Blue & Cocoa Sky

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

#4A3222

#8B5E3C

#72D1FF

#FFF8EC

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
`#4A3222` on `#FFF8EC`	Aa	11.23:1	AAA
`#4A3222` on `#72D1FF`	Aa	6.94:1	AA
`#8B5E3C` on `#FFF8EC`	Aa	5.28:1	AA
`#8B5E3C` on `#72D1FF`	Aa	3.26:1	AA large only
`#4A3222` on `#8B5E3C`	Aa	2.13:1	Fail
`#72D1FF` on `#FFF8EC`	Aa	1.62:1	Fail

Similar palettes 24 more in this mood