#3D405B
#81B29A
#96DEFF
#F4F1DE
#97D7FFBaby Blue
#76A1BDDusty Blue
#4A4233Taupe
#F1E7DBEggshell
Baby Blue & Taupe Mood is a complementary color palette tagged muted, cold, blue. Near-complementary hues (about 171° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Baby Blue | #97D7FF | rgb(151, 215, 255) | hsl(203, 100%, 80%) | oklch(85.0% 0.086 237) | |
| Dusty Blue | #76A1BD | rgb(118, 161, 189) | hsl(204, 35%, 60%) | oklch(68.8% 0.062 237) | |
| Taupe | #4A4233 | rgb(74, 66, 51) | hsl(39, 18%, 25%) | oklch(38.3% 0.027 83) | |
| Eggshell | #F1E7DB | rgb(241, 231, 219) | hsl(33, 44%, 90%) | oklch(93.3% 0.019 73) |
Why it works and how to use it
The palette holds together thanks to its complementary hue relationship and a strong light-to-dark ladder (90% down to 25% lightness). A natural fit for websites, presentations and branding.
- Background: Eggshell (#F1E7DB) is the lightest color, so it belongs on large surfaces.
- Text: Taupe (#4A4233) on #F1E7DB gives 8.12:1, passing WCAG AAA.
- Primary: Baby Blue (#97D7FF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Dusty Blue (#76A1BD) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Taupe on Eggshell at 8.12:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Baby Blue & Taupe Mood
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
#97D7FF
#76A1BD
#4A4233
#F1E7DB
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#4A4233 on #F1E7DB | Aa | 8.12:1 | AAA |
#97D7FF on #4A4233 | Aa | 6.36:1 | AA |
#76A1BD on #4A4233 | Aa | 3.59:1 | AA large only |
#76A1BD on #F1E7DB | Aa | 2.26:1 | Fail |
#97D7FF on #76A1BD | Aa | 1.77:1 | Fail |
#97D7FF on #F1E7DB | Aa | 1.28:1 | Fail |
Similar palettes 24 more in this mood
#2E2B59
#525088
#A09FC8
#DDDCE6
#18213B
#526195
#7393C1
#ECFFFB
#3D3B6B
#6D6CA6
#B9B8E3
#F2F1FB
#4F4E7F
#7E7EB9
#D1D0FC
#FAF9FF
#585881
#4F748D
#B69ED1
#8FB2F0
#304D7C
#4F78A9
#89B3D6
#E9F1F7
#2E3A66
#5C6BA6
#5EC4BE
#F5EFE4
#436291
#6B88B0
#7CA5D5
#C3D8FF
#878DBE
#CBB8C4
#DEC3F6
#FFDBE0
#416E90
#6194C0
#9CBCD9
#96D7FF
#AABBF3
#D4B9CE
#DFCBFF
#CEE8FC
#5D6038
#9D7E6C
#7590C2
#82B0E6
#DBE1FF
#A1D0FC
#EAAFDB
#B9A0D5
#4B8B92
#6EA79C
#8DA7C3
#9ED2E8
#5B83A4
#89A7BD
#9DC3ED
#DFEEFF
#D2A9C7
#90C7F5
#D8C5EE
#EDF0FF
#44546C
#7D93BE
#B0C1F4
#D7F4FF
#E1F2FF
#A4DCFF
#74AAA9
#3B4651
#5BA4CF
#A8D5F2
#F2E8D5
#4A4238
#F4E1FF
#ABCEF2
#B6B3CD
#657299
#777B83
#8E8FB7
#A9AFB2
#A5D0F4
#497697
#6DADC0
#B0DAE2
#D8ECF1
#4E7E80
#9FD7FD
#F2F7FF
#30372E