#F2F4F5
#C9CED3
#8A949B
#3B4247
#6B7B8CSlate
#98A6B5Dusty Blue
#C8D1DAFog
#EEF2F5Frost
Coastal Fog color palette
Coastal Fog is a muted light, neutral-based color palette tagged winter, monochrome, gray. Frost is the only saturated color here, so it does all the talking against a neutral base. Every color is softened, so it works well as a background system for text-heavy layouts. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Slate | #6B7B8C | rgb(107, 123, 140) | hsl(211, 13%, 48%) | oklch(57.6% 0.032 250) | |
| Dusty Blue | #98A6B5 | rgb(152, 166, 181) | hsl(211, 16%, 65%) | oklch(71.9% 0.027 250) | |
| Fog | #C8D1DA | rgb(200, 209, 218) | hsl(210, 20%, 82%) | oklch(85.6% 0.016 248) | |
| Frost | #EEF2F5 | rgb(238, 242, 245) | hsl(206, 26%, 95%) | oklch(95.9% 0.006 240) |
Why it works and how to use it
It works because the lightness range is wide (48% to 95%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Frost (#EEF2F5) is the lightest color, so it belongs on large surfaces.
- Text: Slate (#6B7B8C) on #EEF2F5 gives 3.86:1, enough for large headings only.
- Primary: Fog (#C8D1DA) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Dusty Blue (#98A6B5) 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 Coastal Fog
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
#6B7B8C
#98A6B5
#C8D1DA
#EEF2F5
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#6B7B8C on #EEF2F5 | Aa | 3.86:1 | AA large only |
#6B7B8C on #C8D1DA | Aa | 2.81:1 | Fail |
#98A6B5 on #EEF2F5 | Aa | 2.21:1 | Fail |
#6B7B8C on #98A6B5 | Aa | 1.75:1 | Fail |
#98A6B5 on #C8D1DA | Aa | 1.61:1 | Fail |
#C8D1DA on #EEF2F5 | Aa | 1.37:1 | Fail |
Similar palettes 24 more in this mood
#F8FAFB
#DDE2E8
#A6B0B7
#4B5257
#2C3E50
#7F8C8D
#BDC3C7
#ECF0F1
#3B3F47
#8C93A0
#D5DAE3
#F7F8FA
#FDF7ED
#C61C26
#E5D3BA
#313235
#444444
#876857
#E15848
#FEF9F4
#2B2B2B
#6B4E3D
#C0392B
#F4EFEA
#663537
#955558
#E2DAD5
#F5F2F1
#405365
#99A7A8
#D6DCE0
#F7FBFC
#5A5A5A
#98857A
#DF8C7F
#F1EEEB
#1E3A2F
#3E6B55
#DCE7E1
#FBFCFB
#1B4965
#5FA8D3
#A8E0DE
#E4F1FF
#D1DBF0
#7B9CA4
#7B71A9
#507C99
#13505B
#0C7489
#8FD3E0
#F0FAFB
#574276
#595D6D
#9E819B
#EBA3B8
#8FCD9A
#D32636
#FBBFCC
#FDF9F3
#F7FBFF
#D7E6F2
#7FA7C9
#243B53
#F4EFE7
#F0BAC5
#EE353E
#91C58A
#425355
#588DAD
#9081B1
#A8AEBB
#466947
#7E8D97
#73B9C2
#BAD2CB
#4B615B
#87A489
#91ADC0
#DEF1F4
#FCD1E4
#F4EEE3
#83DEB0
#F5A69F
#F7F5F1
#D01C35
#3C7E42
#BFE5F9
#D12935
#3C8253
#B1DDF4
#F3EFEA