What are the hex codes in the Snowy Baby Blue & Cerulean palette?

The Snowy Baby Blue & Cerulean color palette consists of Cerulean #416E90, Blue Gray #6194C0, Sky Blue #9CBCD9, Baby Blue #96D7FF.

How should I use the Snowy Baby Blue & Cerulean palette on a website?

Use Baby Blue #96D7FF as the background, Cerulean #416E90 for text, Sky Blue #9CBCD9 for buttons and links, and Blue Gray #6194C0 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Snowy Baby Blue & Cerulean have enough contrast for text?

The highest-contrast pair is #416E90 on #96D7FF with a ratio of 3.49:1, which passes WCAG AA for large text only.

#416E90Cerulean

#6194C0Blue Gray

#9CBCD9Sky Blue

#96D7FFBaby Blue

Snowy Baby Blue & Cerulean color palette

Winter Muted Cold Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Cerulean	`#416E90`	`rgb(65, 110, 144)`	`hsl(206, 38%, 41%)`	`oklch(52.0% 0.073 243)`
Blue Gray	`#6194C0`	`rgb(97, 148, 192)`	`hsl(208, 43%, 57%)`	`oklch(64.8% 0.086 246)`
Sky Blue	`#9CBCD9`	`rgb(156, 188, 217)`	`hsl(209, 45%, 73%)`	`oklch(78.1% 0.054 246)`
Baby Blue	`#96D7FF`	`rgb(150, 215, 255)`	`hsl(203, 100%, 79%)`	`oklch(85.0% 0.086 236)`

Why it works and how to use it

Snowy Baby Blue & Cerulean is a monochromatic color palette tagged winter, muted, cold. All four colors sit within 6° of hue, so the scheme reads as one color explored across light and dark. Neither washed out nor loud, it adapts to most contexts. The overall temperature is cool.

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

Background: Baby Blue (#96D7FF) is the lightest color, so it belongs on large surfaces.
Text: Cerulean (#416E90) on #96D7FF gives 3.49:1, enough for large headings only.
Primary: Sky Blue (#9CBCD9) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Blue Gray (#6194C0) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

BrandFeaturesPricingBlogGet started

Design faster with Snowy Baby Blue & Cerulean

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

#416E90

#6194C0

#9CBCD9

#96D7FF

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
`#416E90` on `#96D7FF`	Aa	3.49:1	AA large only
`#416E90` on `#9CBCD9`	Aa	2.75:1	Fail
`#6194C0` on `#96D7FF`	Aa	2.07:1	Fail
`#416E90` on `#6194C0`	Aa	1.69:1	Fail
`#6194C0` on `#9CBCD9`	Aa	1.63:1	Fail
`#9CBCD9` on `#96D7FF`	Aa	1.27:1	Fail

:root {
  --cerulean: #416E90;
  --blue-gray: #6194C0;
  --sky-blue: #9CBCD9;
  --baby-blue: #96D7FF;
}

$cerulean: #416E90;
$blue-gray: #6194C0;
$sky-blue: #9CBCD9;
$baby-blue: #96D7FF;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'cerulean': '#416E90',
        'blue-gray': '#6194C0',
        'sky-blue': '#9CBCD9',
        'baby-blue': '#96D7FF',
      },
    },
  },
};

{
  "name": "Snowy Baby Blue & Cerulean",
  "colors": [
    "#416E90",
    "#6194C0",
    "#9CBCD9",
    "#96D7FF"
  ]
}

background: linear-gradient(135deg, #416E90, #6194C0, #9CBCD9, #96D7FF);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-09-08 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood