Sand & Sea

Beach neutrals meeting sea greens — sandy warmth on one side, light sea green and teal on the other. Travel and coastal hospitality material with built-in warm/cool balance.

Colors

Export color codes

Dune #f4a460

Driftwood #f5deb3

Lagoon #20b2aa

Deep Teal #008080

Shell #fff5ee

Accessibility snapshot

Each color's WCAG contrast ratio against white and black text — AA means it can carry normal-size text (≥4.5:1) on that background. Test your exact pairings in the contrast checker.

#f4a460 White text: 2.03:1 — Black text: 10.33:1 AA

#f5deb3 White text: 1.31:1 — Black text: 15.98:1 AA

#20b2aa White text: 2.62:1 — Black text: 8.01:1 AA

#008080 White text: 4.77:1 AA Black text: 4.4:1 —

#fff5ee White text: 1.07:1 — Black text: 19.55:1 AA

Color blindness safety

Every pair in this palette (10 pairs) checked with CIEDE2000 under normal vision plus the four strongest color vision deficiency types. A pair is flagged when it drops below ΔE 10 — the zone where colors get hard to tell apart at a glance.

#f5deb3 vs #fff5ee Achromatopsia ΔE 4.9 Hard to distinguish

#f4a460 vs #20b2aa Achromatopsia ΔE 6.3 Hard to distinguish

Swatches show the pair as that viewer would see it. Flagged pairs are fine decoratively — just don’t make them the only difference between two states. Explore any pair in the simulator.

In a real interface

Roles assigned by lightness: the lightest color as background, the darkest as text, the first two palette colors as primary and accent.

Sand & Sea

This is how the palette reads when its colors take on interface roles.

Primary action Secondary Badge

CSS variables

CSS

--color-1: #f4a460;
--color-2: #f5deb3;
--color-3: #20b2aa;
--color-4: #008080;
--color-5: #fff5ee;

Related tools

Colors

HEX to RGB Converter

Convert any HEX color code to its RGB and HSL equivalents, live, with copy-to-clipboard values.

Try it → Accessibility

Contrast Checker

Check the WCAG contrast ratio between any two colors, live, with AA/AAA pass-fail results.

Try it → Generators

Palette Generator

Generate complementary, analogous, triadic, split-complementary, tetradic, square, and monochromatic palettes from any base color.

Try it →

Make this palette your own

Turn it into a gradient with one click, or start fresh from any of its colors.

Build a gradient from these colors → Play Color Match