#5C8D89
#A7D7C5
#F4F9F4
#F2C57C
#DCFBFFFrost
#78B9B2Dusty Blue
#5A6164Storm
#EEA083Dusty Rose
Lagoon Dusty Rose & Frost is a complementary color palette tagged modern, white, gray. 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 |
|---|---|---|---|---|---|
| Frost | #DCFBFF | rgb(220, 251, 255) | hsl(187, 100%, 93%) | oklch(96.7% 0.033 206) | |
| Dusty Blue | #78B9B2 | rgb(120, 185, 178) | hsl(174, 32%, 60%) | oklch(74.0% 0.067 187) | |
| Storm | #5A6164 | rgb(90, 97, 100) | hsl(198, 5%, 37%) | oklch(48.8% 0.010 225) | |
| Dusty Rose | #EEA083 | rgb(238, 160, 131) | hsl(16, 76%, 72%) | oklch(77.6% 0.102 41) |
Why it works and how to use it
With 3 chromatic colors, Dusty Rose takes the lead while the rest support. Lightness runs from 37% to 93%. Well suited to websites, presentations and branding.
- Background: Frost (#DCFBFF) is the lightest color, so it belongs on large surfaces.
- Text: Storm (#5A6164) on #DCFBFF gives 5.79:1, passing WCAG AA.
- Primary: Dusty Rose (#EEA083) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Dusty Blue (#78B9B2) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Frost on Storm at 5.79:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Lagoon Dusty Rose & Frost
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
#DCFBFF
#78B9B2
#5A6164
#EEA083
Color-blind check: under protanopia, Dusty Blue and Dusty Rose become hard to tell apart, so do not rely on that pair alone to carry meaning.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#DCFBFF on #5A6164 | Aa | 5.79:1 | AA |
#5A6164 on #EEA083 | Aa | 3:1 | AA large only |
#78B9B2 on #5A6164 | Aa | 2.82:1 | Fail |
#DCFBFF on #78B9B2 | Aa | 2.06:1 | Fail |
#DCFBFF on #EEA083 | Aa | 1.93:1 | Fail |
#78B9B2 on #EEA083 | Aa | 1.07:1 | Fail |
Similar palettes 24 more in this mood
#FFF8F0
#FFD2CB
#FF819E
#1B3240
#FDFDFF
#FFDFBC
#B9B9B9
#222222
#F8FFFF
#5CB7B8
#FFABBA
#919191
#655B57
#F36893
#C3A7A5
#FFF1E6
#142532
#528494
#DE9D89
#FAF4E9
#FFF8F0
#FFD6A5
#FF8C42
#2B2D42
#F7F2EA
#E6DCCB
#CBBBA0
#6B6155
#FFF9F4
#FFE0C7
#F28C38
#2A2320
#FFAF7F
#E0961F
#E3FFFF
#818181
#F0EEEA
#5A5A5A
#FFCEB7
#B88DCD
#3C3C3C
#747474
#FFB2AA
#EEEEEE
#FFF8F0
#FFD6A5
#00BFFC
#2B2D42
#685F58
#9B907E
#CBD8B6
#EEEFE8
#BF6664
#293548
#F4F9F2
#E6D59B
#484848
#FFC8AE
#BCABFF
#EEEEEE
#67615D
#D4C0B5
#FFD4C1
#FFF8F5
#E0FFFC
#A9D9C7
#7F847F
#F0C37A
#88A7F2
#D9C08A
#8A8B6A
#F2EEDF
#FFA476
#282828
#8335CA
#FAFAFA
#222831
#575D65
#00ADB5
#EEEEEE
#FCF8F4
#F0DAC0
#DE9F7B
#2D2E3A
#79ABA7
#BBEBD9
#F7FCF7
#FFE6C0
#DB956B
#E6BC89
#588B8D
#F8F8F8