Palette

Sundrenched Coastal Sand

Captures the warm glow of sun-kissed sand meeting the gentle, inviting blues of a summer ocean.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sundrenched Coastal Sand 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 Sundrenched Coastal Sand.

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

Data visualization

#F4A460#FAEBD7#FFEFD5#B0C4DE#87CEEB

Palette guide

How to use Sundrenched Coastal Sand

Overview

The "Sundrenched Coastal Sand" palette evokes the serene beauty of a summer beach, blending warm earthy tones with refreshing ocean blues. Designers can leverage #F4A460 for inviting calls-to-action or warm headers, reflecting sun-kissed sand. Complementary light sandy hues like #FAEBD7 and #FFEFD5 provide ideal soft backgrounds, ensuring a gentle, natural feel across web and print designs. The cool, calming presence of #B0C4DE (Light Steel Blue) and the vibrant touch of #87CEEB (Sky Blue) introduce a refreshing coastal breeze, perfect for navigation elements or subtle accents. This palette is ideal for creating designs that feel cozy, natural, and inviting, reminiscent of a relaxing seaside escape.

Best used for

Travel and hospitality websites (beach resorts, summer destinations)
Lifestyle blogs and e-commerce (home decor, natural products, swimwear)
Branding for spas, wellness centers, or sustainable businesses
Mobile apps with a calming, natural user interface
Editorial design for magazines focused on nature, travel, or relaxation
Event invitations for outdoor or summer-themed gatherings

Suggested color roles

primary

#F4A460 - Use this warm, inviting tone for main headings, prominent buttons, or key graphical elements where a touch of sun-kissed energy is desired. It draws attention without being overly bold.

secondary

#B0C4DE - This soft steel blue provides a calming contrast to the warmer tones. Ideal for secondary navigation, subheadings, or as a background for content blocks that need a gentle separation.

accent

#87CEEB - A vibrant sky blue that acts as a refreshing splash. Perfect for interactive elements like links, hover states, icons, or small decorative details to add a lively, oceanic touch.

background

#FFEFD5 - This very light, creamy hue serves as an excellent default background, offering a clean, airy canvas. It ensures good readability for dark text and harmonizes with all other palette colors.

text

#4A4A4A (or similar dark charcoal) - For optimal readability, especially on light backgrounds like #FFEFD5 or #FAEBD7. Avoid using light blues on light sands for main body text.

Accessibility notes

Ensure sufficient contrast when pairing #FAEBD7 or #FFEFD5 with lighter text colors; dark text is generally recommended.
Text in #87CEEB should be used sparingly and on sufficiently dark backgrounds or as an accent, as its lightness can hinder readability.
The combination of #F4A460 (primary) with a dark charcoal text will generally provide good contrast for headlines.
Always test color combinations using a contrast checker to meet WCAG guidelines, especially for interactive elements and body text.

Recommended combinations

Sun-Kissed Foundation

Ideal for hero sections or product cards: #FFEFD5 as background, #F4A460 for headings/buttons, and #87CEEB for subtle accents or links.

#F4A460 · #FFEFD5 · #87CEEB

Soft Coastal UI

Excellent for UI elements like sidebars or content panels; #FAEBD7 for the panel background, #B0C4DE for borders or dividers, and #F4A460 for interactive elements.

#FAEBD7 · #B0C4DE · #F4A460

Oceanic Serenity

Use #B0C4DE as a primary background, #87CEEB for emphasis on graphical elements, and #FAEBD7 for subtle texture or secondary content blocks.

#B0C4DE · #87CEEB · #FAEBD7

CSS variables

:root {
  --sundrenched-coastal-sand-1: #F4A460;
  --sundrenched-coastal-sand-2: #FAEBD7;
  --sundrenched-coastal-sand-3: #FFEFD5;
  --sundrenched-coastal-sand-4: #B0C4DE;
  --sundrenched-coastal-sand-5: #87CEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sundrenched-coastal-sand": {
        1: "#F4A460",
        2: "#FAEBD7",
        3: "#FFEFD5",
        4: "#B0C4DE",
        5: "#87CEEB",
      }
    }
  }
}

Hex values

Color 1#F4A460

Color 2#FAEBD7

Color 3#FFEFD5

Color 4#B0C4DE

Color 5#87CEEB

Accessibility

Contrast checker

1.7:1Fail

1.8:1Fail

1.1:1Fail

1.2:1Fail

1.7:1Fail

1:1Fail

1.5:1Fail

1.8:1Fail

1:1Fail

1.6:1Fail

1.5:1Fail

1.1:1Fail

1.5:1Fail

1.6:1Fail

1:1Fail

1.2:1Fail

1.5:1Fail

1:1Fail

Similar palettes

More like Sundrenched Coastal Sand

Sundrenched Coastal Sand

See it in context.

Ready when you are.

Built with Sundrenched Coastal Sand.

How to use Sundrenched Coastal Sand

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sun-Kissed Foundation

Soft Coastal UI

Oceanic Serenity

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sundrenched Coastal Sand