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

The Azure Cocoa & Baby Blue color palette consists of Lavender #DEE8FF, Baby Blue #8ECEFF, Ink #002026, Cocoa #936800.

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

Use Lavender #DEE8FF as the background, Ink #002026 for text, Baby Blue #8ECEFF for buttons and links, and Cocoa #936800 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Lavender on Ink at 13.84:1.

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

The highest-contrast pair is #DEE8FF on #002026 with a ratio of 13.84:1, which passes WCAG AA for normal text.

#DEE8FFLavender

#8ECEFFBaby Blue

#002026Ink

#936800Cocoa

Azure Cocoa & Baby Blue color palette

Modern Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Lavender	`#DEE8FF`	`rgb(222, 232, 255)`	`hsl(222, 100%, 94%)`	`oklch(93.0% 0.033 267)`
Baby Blue	`#8ECEFF`	`rgb(142, 206, 255)`	`hsl(206, 100%, 78%)`	`oklch(82.6% 0.095 242)`
Ink	`#002026`	`rgb(0, 32, 38)`	`hsl(189, 100%, 7%)`	`oklch(22.4% 0.039 212)`
Cocoa	`#936800`	`rgb(147, 104, 0)`	`hsl(42, 100%, 29%)`	`oklch(54.8% 0.113 80)`

Why it works and how to use it

Azure Cocoa & Baby Blue is a vivid complementary color palette tagged modern, blue. Near-complementary hues (about 180° 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 7% to 94%. Well suited to websites, presentations and branding.

Background: Lavender (#DEE8FF) is the lightest color, so it belongs on large surfaces.
Text: Ink (#002026) on #DEE8FF gives 13.84:1, passing WCAG AAA.
Primary: Baby Blue (#8ECEFF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cocoa (#936800) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Lavender on Ink at 13.84:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Azure Cocoa & Baby 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

#DEE8FF

#8ECEFF

#002026

#936800

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
`#DEE8FF` on `#002026`	Aa	13.84:1	AAA
`#8ECEFF` on `#002026`	Aa	10.06:1	AAA
`#DEE8FF` on `#936800`	Aa	4.05:1	AA large only
`#002026` on `#936800`	Aa	3.42:1	AA large only
`#8ECEFF` on `#936800`	Aa	2.94:1	Fail
`#DEE8FF` on `#8ECEFF`	Aa	1.38:1	Fail

Similar palettes 24 more in this mood