#0077B6
#00B4D8
#90E0EF
#CAF0F8
#D9ED92Vanilla
#73D2FFBaby Blue
#52B69ACadet
#168AADSteel Blue
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.
Color codes click any value to copy
| Swatch | 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
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 SecondaryCard title
Card title
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.
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 |
Similar palettes 24 more in this mood
#03045E
#0077B6
#00B4D8
#90E0EF
#03256C
#2541B2
#1768AC
#06BEE1
#0B132B
#3B487A
#5C7BA8
#6FFFE9
#40DADC
#00BBED
#09C393
#3A8FF6
#7071CC
#00918B
#4E91D5
#4EBBDB
#5AA2D9
#8BB1FF
#00CED9
#5ED8FF
#0086A6
#4D9184
#37A8F6
#00CCD6
#A630C1
#755EF5
#7ABCFF
#80E6FF
#00C184
#64D2FC
#A9D875
#3DEEEC
#7CEAE6
#35D7FF
#74BDFD
#788BF6
#90EBAA
#40B5B3
#4183B9
#F6F9EE
#023E8A
#0077B6
#00B4D8
#90E0EF
#D9ED92
#99D98C
#52B69A
#168AAD
#97C4FF
#00ACAF
#008EB6
#7251FE
#040F12
#00C7D1
#8EBBFF
#CAC6FF
#0C2277
#288BCC
#33C8EC
#D0F7FF
#96BAFE
#8F7CCD
#00939A
#005D7F
#E6C2FF
#52B69A
#168AAD
#F6F9EE
#A4DCFF
#60D7D5
#00AF8D
#00A4BF
#007D9B
#00B8BD
#90E3DD
#CAF1EF
#002232
#81AFEA
#26C3DA
#A3C6C2
#00D8D0
#66B0E7
#37A4BD
#6481DC
#00736B
#20A8BE
#66B6E9
#ABC7FF