Beach Color Palette
Pulled from a photo of a quiet beach: shell pink sand, hazy sky, soft sea blue and dark palm fronds. Softer and more grown-up than a typical beach palette.
Click any color to copy its HEX code.
Beach color codes
| Name | HEX | RGB | HSL | |
|---|---|---|---|---|
| Shell | #F0E1D8 | 240, 225, 216 | 23°, 44%, 89% | |
| Morning Haze | #CBC5CA | 203, 197, 202 | 310°, 5%, 78% | |
| Cloud Gray | #AFB4BE | 175, 180, 190 | 220°, 10%, 72% | |
| Sea Blue | #7F9FB5 | 127, 159, 181 | 204°, 27%, 60% | |
| Driftwood | #9C9073 | 156, 144, 115 | 42°, 17%, 53% | |
| Palm Frond | #454A30 | 69, 74, 48 | 72°, 21%, 24% |
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 Shell (#F0E1D8) as the base, Morning Haze (#CBC5CA) as the supporting color and Sea Blue (#7F9FB5) as the accent, with Palm Frond (#454A30) for text and fine details.
Beach
A quick preview of the palette with base, text and accent colors.
Sea Blue Morning HazeWhere 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.
- Palm Frond on Shell#454A30 on #F0E1D8 · 7.2:1
- Palm Frond on Morning Haze#454A30 on #CBC5CA · 5.4:1
CSS variables
:root {
--shell: #F0E1D8;
--morning-haze: #CBC5CA;
--cloud-gray: #AFB4BE;
--sea-blue: #7F9FB5;
--driftwood: #9C9073;
--palm-frond: #454A30;
}The photo behind the palette
