What are the hex codes in the Bold Vanilla & Baby Blue palette?

The Bold Vanilla & Baby Blue color palette consists of Vanilla #D9ED92, Baby Blue #73D2FF, Cadet #52B69A, Steel Blue #168AAD.

How should I use the Bold Vanilla & Baby Blue palette on a website?

Use Vanilla #D9ED92 as the background, Steel Blue #168AAD for text, Baby Blue #73D2FF for buttons and links, and Cadet #52B69A for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Bold Vanilla & Baby Blue have enough contrast for text?

The highest-contrast pair is #D9ED92 on #168AAD with a ratio of 3.13:1, which passes WCAG AA for large text only.

#D9ED92Vanilla

#73D2FFBaby Blue

#52B69ACadet

#168AADSteel Blue

Bold Vanilla & Baby Blue color palette

Cold Blue Teal

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Vanilla	`#D9ED92`	`rgb(217, 237, 146)`	`hsl(73, 72%, 75%)`	`oklch(91.1% 0.117 119)`
Baby Blue	`#73D2FF`	`rgb(115, 210, 255)`	`hsl(199, 100%, 73%)`	`oklch(82.2% 0.110 231)`
Cadet	`#52B69A`	`rgb(82, 182, 154)`	`hsl(163, 41%, 52%)`	`oklch(70.9% 0.103 172)`
Steel Blue	`#168AAD`	`rgb(22, 138, 173)`	`hsl(194, 77%, 38%)`	`oklch(59.0% 0.107 225)`

Why it works and how to use it

Bold Vanilla & Baby Blue is a vivid split color palette tagged cold, blue, teal. A split scheme: Vanilla plays against Steel Blue across roughly 126° of hue. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is cool.

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

Background: Vanilla (#D9ED92) is the lightest color, so it belongs on large surfaces.
Text: Steel Blue (#168AAD) on #D9ED92 gives 3.13:1, enough for large headings only.
Primary: Baby Blue (#73D2FF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cadet (#52B69A) 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 Bold Vanilla & 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

#D9ED92

#73D2FF

#52B69A

#168AAD

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
`#D9ED92` on `#168AAD`	Aa	3.13:1	AA large only
`#73D2FF` on `#168AAD`	Aa	2.35:1	Fail
`#D9ED92` on `#52B69A`	Aa	1.93:1	Fail
`#52B69A` on `#168AAD`	Aa	1.62:1	Fail
`#73D2FF` on `#52B69A`	Aa	1.46:1	Fail
`#D9ED92` on `#73D2FF`	Aa	1.33:1	Fail

:root {
  --vanilla: #D9ED92;
  --baby-blue: #73D2FF;
  --cadet: #52B69A;
  --steel-blue: #168AAD;
}

$vanilla: #D9ED92;
$baby-blue: #73D2FF;
$cadet: #52B69A;
$steel-blue: #168AAD;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'vanilla': '#D9ED92',
        'baby-blue': '#73D2FF',
        'cadet': '#52B69A',
        'steel-blue': '#168AAD',
      },
    },
  },
};

{
  "name": "Bold Vanilla & Baby Blue",
  "colors": [
    "#D9ED92",
    "#73D2FF",
    "#52B69A",
    "#168AAD"
  ]
}

background: linear-gradient(135deg, #D9ED92, #73D2FF, #52B69A, #168AAD);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-06-24 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood