Back to palettes

Palette

Sunlit Coastal Path

Soft greens and warm sandy tones evoke a peaceful coastal path, dappled with sunlight overlooking tranquil waters.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sunlit Coastal Path 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 Sunlit Coastal Path.

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

Data visualization

#6D8C83#A1C4BB#D7EDE8#F8FBFB#D2B992

Palette guide

How to use Sunlit Coastal Path

Overview

The Sunlit Coastal Path palette offers a serene blend of cool greens and warm sandy tones, perfect for designs aiming for tranquility and natural elegance. Featuring a calming deep teal like #6D8C83, a lighter seafoam green #A1C4BB, and a soft, airy almost-white #D7EDE8, this palette evokes a peaceful seaside stroll. The touch of warm sand with #D2B992 adds a grounding, inviting contrast. Ideal for brands seeking a sophisticated yet approachable natural aesthetic, it's particularly effective for creating spacious and light interfaces where a sense of calm is paramount. Developers will find these hex codes harmonious for gradients and subtle UI elements, especially when paired with #F8FBFB.

Best used for

  • Spa and wellness branding
  • Eco-friendly product packaging
  • Coastal home decor websites
  • Nature photography portfolios
  • Relaxation app interfaces
  • Luxury resort marketing materials

Suggested color roles

primary

Use #6D8C83, a deep, calming teal, as your core brand color for headings or primary calls to action, conveying stability and nature.

secondary

Apply #A1C4BB, a soft seafoam green, for secondary buttons, navigation elements, or background sections to maintain a fresh, airy feel.

accent

Introduce #D2B992, a warm sandy beige, as a subtle accent for highlights, icons, or important details to add warmth and contrast.

background

Employ #F8FBFB, a crisp near-white, for clean, expansive backgrounds, creating a sense of openness and allowing other colors to breathe.

text

For primary body text, use a dark charcoal or black on #F8FBFB or #D7EDE8. #6D8C83 can work for headings on lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast between #6D8C83 or #A1C4BB and #F8FBFB for text readability (WCAG AA).
  • Avoid placing #D2B992 text directly on #F8FBFB backgrounds without careful contrast checking.
  • Use a darker text color like charcoal or black for body text on #D7EDE8 to meet accessibility standards.
  • Test all icon and interactive element colors against their backgrounds for sufficient contrast ratios, especially involving #D2B992.

Recommended combinations

Coastal Calm

Ideal for light, airy backgrounds with subtle depth, perfect for hero sections or tranquil interfaces.

#F8FBFB · #D7EDE8 · #A1C4BB

Deep Sea Accent

Effective for strong headers or calls to action against a light canvas, with a warm, grounding highlight.

#6D8C83 · #F8FBFB · #D2B992

Path Overlay

Combine for natural, layered elements like data visualizations, subtle gradients, or section dividers.

#A1C4BB · #D2B992 · #6D8C83

CSS variables

:root {
  --sunlit-coastal-path-1: #6D8C83;
  --sunlit-coastal-path-2: #A1C4BB;
  --sunlit-coastal-path-3: #D7EDE8;
  --sunlit-coastal-path-4: #F8FBFB;
  --sunlit-coastal-path-5: #D2B992;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunlit-coastal-path": {
        1: "#6D8C83",
        2: "#A1C4BB",
        3: "#D7EDE8",
        4: "#F8FBFB",
        5: "#D2B992",
      }
    }
  }
}

Related searches

calm coastal color schemeseafoam green and beige palettetranquil nature colorspeaceful beach designsoft teal color inspiration

Palette colors

Hex values

Color 1#6D8C83
·
Color 2#A1C4BB
·
Color 3#D7EDE8
·
Color 4#F8FBFB
·
Color 5#D2B992
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3:1Fail
3.5:1AA18
1.9:1Fail
2
1.9:1Fail
1.5:1Fail
1.8:1Fail
1:1Fail
3
3:1Fail
1.5:1Fail
1.2:1Fail
1.5:1Fail
4
3.5:1AA18
1.8:1Fail
1.2:1Fail
1.8:1Fail
5
1.9:1Fail
1:1Fail
1.5:1Fail
1.8:1Fail

Similar palettes

More like Sunlit Coastal Path

View all cool
Seaside Cottage Charm
Aegean Isle Horizon
Azure Coast Dream
Azure Coast Serenity
Calm Coastal Retreat
Coastal Breeze