Coastal Color Palette
Sea salt white, sand and driftwood with seafoam, ocean blue and navy. A coastal palette feels fresh and relaxed, like a beach house with the windows open.
Click any color to copy its HEX code.
Coastal color codes
| Name | HEX | RGB | HSL | |
|---|---|---|---|---|
| Sea Salt | #F4F1EA | 244, 241, 234 | 42°, 31%, 94% | |
| Sandbar | #E6D3B3 | 230, 211, 179 | 38°, 50%, 80% | |
| Driftwood | #C9B79C | 201, 183, 156 | 36°, 29%, 70% | |
| Seafoam | #A8D5C8 | 168, 213, 200 | 163°, 35%, 75% | |
| Ocean | #3E8EA6 | 62, 142, 166 | 194°, 46%, 45% | |
| Navy | #1F3A5F | 31, 58, 95 | 215°, 51%, 25% |
How to use this palette
A simple way to use 6 colors without chaos is the 60-30-10 rule: about 60% of the space in the lightest shade, 30% in a supporting color and 10% in the accent. For this palette that is Sea Salt (#F4F1EA) as the base, Sandbar (#E6D3B3) as the supporting color and Ocean (#3E8EA6) as the accent, with Navy (#1F3A5F) for text and fine details.
Coastal
A quick preview of the palette with base, text and accent colors.
Ocean SandbarWhere it works
Readable text color pairs
These combinations reach a contrast ratio of at least 4.5:1, the WCAG AA level for normal text, so they are safe for text on websites, posters and invitations.
- Navy on Sea Salt#1F3A5F on #F4F1EA · 10.2:1
- Navy on Sandbar#1F3A5F on #E6D3B3 · 7.8:1
- Navy on Seafoam#1F3A5F on #A8D5C8 · 7.1:1
- Navy on Driftwood#1F3A5F on #C9B79C · 5.9:1
CSS variables
:root {
--sea-salt: #F4F1EA;
--sandbar: #E6D3B3;
--driftwood: #C9B79C;
--seafoam: #A8D5C8;
--ocean: #3E8EA6;
--navy: #1F3A5F;
}