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

The Azure Baby Blue & Slate color palette consists of Charcoal #404C60, Slate #738DAB, Baby Blue #97C4F5, Frost #E7F0F9.

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

Use Frost #E7F0F9 as the background, Charcoal #404C60 for text, Baby Blue #97C4F5 for buttons and links, and Slate #738DAB for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Charcoal on Frost at 7.53:1.

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

The highest-contrast pair is #404C60 on #E7F0F9 with a ratio of 7.53:1, which passes WCAG AA for normal text.

#404C60Charcoal

#738DABSlate

#97C4F5Baby Blue

#E7F0F9Frost

Azure Baby Blue & Slate color palette

Cold Muted Minimal Gray Blue White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Charcoal	`#404C60`	`rgb(64, 76, 96)`	`hsl(218, 20%, 31%)`	`oklch(41.4% 0.037 261)`
Slate	`#738DAB`	`rgb(115, 141, 171)`	`hsl(212, 25%, 56%)`	`oklch(63.4% 0.054 252)`
Baby Blue	`#97C4F5`	`rgb(151, 196, 245)`	`hsl(211, 82%, 78%)`	`oklch(80.6% 0.085 251)`
Frost	`#E7F0F9`	`rgb(231, 240, 249)`	`hsl(210, 60%, 94%)`	`oklch(95.1% 0.015 248)`

Why it works and how to use it

Azure Baby Blue & Slate is a monochromatic color palette tagged cold, muted, minimal. A monochromatic set: the same hue family from Charcoal down to Frost. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.

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

Background: Frost (#E7F0F9) is the lightest color, so it belongs on large surfaces.
Text: Charcoal (#404C60) on #E7F0F9 gives 7.53:1, passing WCAG AAA.
Primary: Baby Blue (#97C4F5) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Slate (#738DAB) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Charcoal on Frost at 7.53:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Azure Baby Blue & Slate

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

#404C60

#738DAB

#97C4F5

#E7F0F9

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
`#404C60` on `#E7F0F9`	Aa	7.53:1	AAA
`#404C60` on `#97C4F5`	Aa	4.76:1	AA
`#738DAB` on `#E7F0F9`	Aa	2.98:1	Fail
`#404C60` on `#738DAB`	Aa	2.53:1	Fail
`#738DAB` on `#97C4F5`	Aa	1.88:1	Fail
`#97C4F5` on `#E7F0F9`	Aa	1.58:1	Fail

Similar palettes 24 more in this mood