coolpastel
Seafoam Coast Color Palette
Seafoam Coast is a cool and pastel color palette of 5 colors: Light Cyan (#e0fbfc), Powder Blue (#c2dfe3), Dark Gray (#9db4c0), Payne's Grey (#5c6b73) and Gunmetal (#253237). It leans on neutral tones rather than one strong hue.
The darkest color, Gunmetal, on the lightest, Light Cyan, gives a 12.18:1 contrast ratio — enough for body text at WCAG AAA. 4 pairs in this palette pass AA for normal text. Powder Blue (#c2dfe3) is its most saturated color and a natural choice for buttons and links.
Colors
- Light Cyan
- Powder Blue
- Dark Gray
- Payne's Grey
- Gunmetal
CSS Output
:root {
--seafoam-coast-1: #e0fbfc;
--seafoam-coast-2: #c2dfe3;
--seafoam-coast-3: #9db4c0;
--seafoam-coast-4: #5c6b73;
--seafoam-coast-5: #253237;
}Seafoam Coast on a Website
A quick preview on a landing page: the most colorful colors become the primary and accent, a light one the surface. For a more realistic look across many designs, open it in the Palette Visualizer below.
See it on real designs
This is a single preview. The Palette Visualizer shows the palette on 11 designs — dashboards, mobile apps, pricing and blog pages, posters and business cards — lets you change which color plays which role, switch to dark mode and check contrast.
Accessible Color Combinations
Pairs from this palette that work as text on a background, with their WCAG contrast ratio. AA needs 4.5:1 for body text; large text needs 3:1.
- Gunmetal on Light Cyan#253237 on #e0fbfc12.18:1AAA
- Gunmetal on Powder Blue#253237 on #c2dfe39.40:1AAA
- Gunmetal on Dark Gray#253237 on #9db4c06.11:1AA
- Payne's Grey on Light Cyan#5c6b73 on #e0fbfc5.09:1AA
- Payne's Grey on Powder Blue#5c6b73 on #c2dfe33.93:1AA Large