Back to palettes

Palette

Sun-Warmed Beach Sands

A serene blend of sun-warmed sands and clear summer skies, evoking a peaceful day at the beach.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sun-Warmed Beach Sands 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 Sun-Warmed Beach Sands.

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

Data visualization

#FDF7EA#F0E1D4#D9C3B6#87CEEB#6A9CE6

Palette guide

How to use Sun-Warmed Beach Sands

Overview

The "Sun-Warmed Beach Sands" palette beautifully marries the gentle warmth of sandy shores with the refreshing coolness of ocean blues. It features a spectrum of inviting neutrals, from the near-white #FDF7EA and soft beige #F0E1D4 to the comforting tan of #D9C3B6. These are exquisitely contrasted by two serene blues: a bright sky blue #87CEEB and a deeper, more saturated ocean blue #6A9CE6. This versatile palette is ideal for designs aiming to evoke tranquility, openness, and a relaxed, summery atmosphere, perfect for travel, wellness, or coastal-inspired projects.

Best used for

  • Coastal resort branding
  • Spa and wellness websites
  • Summer fashion collections
  • Travel agency promotions
  • Beach-themed event invitations
  • Home decor with a nautical touch

Suggested color roles

primary

Use #87CEEB for main headers or key graphical elements to convey freshness and serenity.

secondary

Apply #6A9CE6 for calls-to-action or important highlights, providing depth and a sense of calm.

accent

Reserve #D9C3B6 for subtle textures, borders, or navigation items, grounding the palette with warmth.

background

#FDF7EA provides a clean, airy background, enhancing the light and spacious feel.

text

A dark charcoal or deep navy works best for text on #FDF7EA, while #FDF7EA can be used for text on #6A9CE6.

Accessibility notes

  • #FDF7EA provides excellent contrast for dark text, ensuring high readability.
  • Text in #6A9CE6 on #FDF7EA will likely meet WCAG AA standards.
  • Be cautious when using #87CEEB for text on lighter backgrounds; it may require a very dark contrast.
  • Avoid pairing #F0E1D4 or #D9C3B6 directly with each other for text to background to prevent low contrast.

Recommended combinations

Ocean Breeze

Creates a light, refreshing feel for hero sections or brand identity, combining airy lightness with vibrant blues.

#FDF7EA · #87CEEB · #6A9CE6

Sandy Retreat

Ideal for content blocks or testimonials, offering a warm, inviting base with a calming blue accent.

#F0E1D4 · #D9C3B6 · #87CEEB

Deep Horizon

Effective for footers or strong visual elements, using the deep blue as a base for crisp, readable lighter text.

#6A9CE6 · #FDF7EA · #D9C3B6

CSS variables

:root {
  --sun-warmed-beach-sands-1: #FDF7EA;
  --sun-warmed-beach-sands-2: #F0E1D4;
  --sun-warmed-beach-sands-3: #D9C3B6;
  --sun-warmed-beach-sands-4: #87CEEB;
  --sun-warmed-beach-sands-5: #6A9CE6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sun-warmed-beach-sands": {
        1: "#FDF7EA",
        2: "#F0E1D4",
        3: "#D9C3B6",
        4: "#87CEEB",
        5: "#6A9CE6",
      }
    }
  }
}

Related searches

beach color schemewarm sand cool blue palettecoastal design colorssummer serene paletteocean inspired neutrals

Palette colors

Hex values

Color 1#FDF7EA
·
Color 2#F0E1D4
·
Color 3#D9C3B6
·
Color 4#87CEEB
·
Color 5#6A9CE6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
1.6:1Fail
2.6:1Fail
2
1.2:1Fail
1.3:1Fail
1.4:1Fail
2.2:1Fail
3
1.6:1Fail
1.3:1Fail
1:1Fail
1.7:1Fail
4
1.6:1Fail
1.4:1Fail
1:1Fail
1.6:1Fail
5
2.6:1Fail
2.2:1Fail
1.7:1Fail
1.6:1Fail

Similar palettes

More like Sun-Warmed Beach Sands

View all earth
Golden Aegean Sands
Aegean Coast Drift
Ancient Desert Sands
Ancient Desert Sands
Ancient Desert Sands
Arid Blossom Mirage