#3D405B
#81B29A
#F2CC8F
#F4F1DE
#3F777CTeal
#76B7BDDusty Blue
#EFE2C7Pearl
#FFFAF0Ivory
Dusty Blue & Teal Bloom is a complementary color palette tagged vintage, muted, cold. Near-complementary hues (about 145° 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 |
|---|---|---|---|---|---|
| Teal | #3F777C | rgb(63, 119, 124) | hsl(185, 33%, 37%) | oklch(53.3% 0.060 203) | |
| Dusty Blue | #76B7BD | rgb(118, 183, 189) | hsl(185, 35%, 60%) | oklch(73.8% 0.067 203) | |
| Pearl | #EFE2C7 | rgb(239, 226, 199) | hsl(40, 56%, 86%) | oklch(91.6% 0.038 85) | |
| Ivory | #FFFAF0 | rgb(255, 250, 240) | hsl(40, 100%, 97%) | oklch(98.6% 0.014 85) |
Why it works and how to use it
With 3 chromatic colors, Pearl takes the lead while the rest support. Lightness runs from 37% to 97%. Well suited to websites, presentations and branding.
- Background: Ivory (#FFFAF0) is the lightest color, so it belongs on large surfaces.
- Text: Teal (#3F777C) on #FFFAF0 gives 4.87:1, passing WCAG AA.
- Primary: Pearl (#EFE2C7) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Dusty Blue (#76B7BD) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Teal on Ivory at 4.87:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Dusty Blue & Teal Bloom
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
#3F777C
#76B7BD
#EFE2C7
#FFFAF0
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#3F777C on #FFFAF0 | Aa | 4.87:1 | AA |
#3F777C on #EFE2C7 | Aa | 3.95:1 | AA large only |
#3F777C on #76B7BD | Aa | 2.24:1 | Fail |
#76B7BD on #FFFAF0 | Aa | 2.18:1 | Fail |
#76B7BD on #EFE2C7 | Aa | 1.76:1 | Fail |
#EFE2C7 on #FFFAF0 | Aa | 1.23:1 | Fail |
Similar palettes 24 more in this mood
#245E63
#5A9AA0
#D7CBB0
#F5F0E6
#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#4B3832
#854442
#BE9B7B
#FFF4E6
#B76E79
#E8A0A6
#F4C8C8
#FDF2F0
#4A5D7E
#7F92B0
#D8D2C4
#F1EDE4
#6B6F4A
#9C9E74
#D9CFAF
#F3EEE2
#7A5C4A
#B08F73
#E3CDB0
#F8F1E6
#9E6B73
#C99CA2
#E9D5D3
#F7F2EF
#585881
#4F748D
#B69ED1
#8FB2F0
#C898D0
#7DA693
#636144
#664C73
#026579
#229393
#70BEA6
#9DC2DE
#5D6038
#9D7E6C
#7590C2
#82B0E6
#393A55
#6C708D
#B9ABB7
#FFF9F5
#BBA77C
#CFC2A5
#898A78
#F0EEE6
#7F835D
#B8BA8F
#EFE5C4
#FFFAEE
#624E47
#9E5A58
#D8B493
#FFF9F2
#5C2A2E
#8E4A50
#C99095
#F5E9E9
#784346
#AC656A
#E1A6AB
#FFF8F8
#116A7B
#CDC2AE
#ECE5C7
#C2DEDC
#F7F1F1
#E5CFCF
#C48B8B
#4A3535
#22223B
#595D79
#9A8C98
#F2E9E4
#A88577
#E4C1AB
#FFEFD7
#719080
#7071CC
#00918B
#4E91D5
#4EBBDB