Back to palettes

Palette

Sandy Beach Drift

Soft, sun-bleached beiges and creamy whites blend with the subtle blue of horizon, like a tranquil beach scene.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sandy Beach Drift reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Sandy Beach Drift.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#CDB79E#E3CBB3#F5E9D8#B0C4DE#F8F4F0

Palette guide

How to use Sandy Beach Drift

Overview

The Sandy Beach Drift palette offers a serene blend of sun-bleached beiges and a subtle horizon blue, evoking a truly tranquil beach scene. Key shades like the grounding #CDB79E (a warm medium beige) and the softer #E3CBB3 (a light sand tone) provide a comforting, inviting base for any design. Complemented by the creamy white of #F5E9D8 and the very light off-white #F8F4F0, this collection establishes a gentle, airy aesthetic. The single cool tone, #B0C4DE, introduces a touch of calm ocean breeze. Ideal for designs aiming for a natural, minimalist, and peaceful ambiance, it supports a sophisticated yet understated visual language for web, print, and branding.

Best used for

  • Spa and wellness websites
  • Coastal-themed interior design mockups
  • Wedding invitations and stationery
  • Nature photography portfolios
  • Eco-friendly brand packaging
  • Relaxing mobile app interfaces

Suggested color roles

primary

Use #CDB79E as a foundational element for larger sections, headers, or backgrounds where a warm, grounding presence is desired. It provides substance without being heavy.

secondary

Employ #E3CBB3 for supporting content blocks, secondary navigation, or as a lighter complement to the primary beige, maintaining a cohesive sandy texture.

accent

Introduce #B0C4DE as a subtle accent for calls to action, small icons, or subtle borders to add a touch of calm, horizon-like contrast without overpowering.

background

Leverage #F8F4F0 as the main background color for a clean, expansive, and airy feel. Its near-white quality provides excellent readability for darker text.

text

For optimal readability, use a dark neutral like charcoal or a deep brown (e.g., #333333 or #4A403A) against the lighter shades. Avoid light text on light backgrounds.

Accessibility notes

  • Ensure sufficient contrast when pairing any of the light beige/white tones with each other, especially for text.
  • Always test text legibility using a dark, high-contrast color (like black or dark grey) on #F8F4F0 or #F5E9D8.
  • Avoid using #B0C4DE for small text against #F8F4F0 or #F5E9D8 without checking WCAG contrast ratios.
  • Consider using a slightly darker shade of a palette color for text if a black/charcoal feels too stark, but verify contrast.

Recommended combinations

Tranquil Base

Ideal for main content areas: #F8F4F0 as background, #CDB79E for cards or sections, and #B0C4DE for subtle interactive elements.

#F8F4F0 · #CDB79E · #B0C4DE

Warm Gradation

Excellent for layered backgrounds or UI elements where a soft, monochromatic depth is desired, such as modals or sidebars.

#F5E9D8 · #E3CBB3 · #CDB79E

Horizon Highlight

Use #B0C4DE for a header or banner with #F8F4F0 for supporting text, and #E3CBB3 for a secondary accent or call-out.

#B0C4DE · #F8F4F0 · #E3CBB3

CSS variables

:root {
  --sandy-beach-drift-1: #CDB79E;
  --sandy-beach-drift-2: #E3CBB3;
  --sandy-beach-drift-3: #F5E9D8;
  --sandy-beach-drift-4: #B0C4DE;
  --sandy-beach-drift-5: #F8F4F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sandy-beach-drift": {
        1: "#CDB79E",
        2: "#E3CBB3",
        3: "#F5E9D8",
        4: "#B0C4DE",
        5: "#F8F4F0",
      }
    }
  }
}

Related searches

beach color schemesnatural neutral palettecalm website colorslight aesthetic designearth tone brand colors

Palette colors

Hex values

Color 1#CDB79E
·
Color 2#E3CBB3
·
Color 3#F5E9D8
·
Color 4#B0C4DE
·
Color 5#F8F4F0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
1.1:1Fail
1.8:1Fail
2
1.2:1Fail
1.3:1Fail
1.1:1Fail
1.4:1Fail
3
1.6:1Fail
1.3:1Fail
1.5:1Fail
1.1:1Fail
4
1.1:1Fail
1.1:1Fail
1.5:1Fail
1.6:1Fail
5
1.8:1Fail
1.4:1Fail
1.1:1Fail
1.6:1Fail

Similar palettes

More like Sandy Beach Drift

View all neutral
Coastal Dune Breeze
Coastal Dune Grass
Coastal Pebble Beach
Coastal Sands Aura
Coastal Shell Treasure
Desert Sand Horizon