Back to palettes

Palette

Sunlit Coastal Blues

Bright, airy blues reflecting the tranquil harmony of sun-drenched coastal waters.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6A9CC3#A1C3DE#D0E0EE#3B7C9D#1E5A7A

Palette guide

How to use Sunlit Coastal Blues

Overview

The Sunlit Coastal Blues palette offers a tranquil harmony of sun-drenched coastal waters, transitioning from deep ocean depths to the clear, bright sky. It features a calming mid-blue (#6A9CC3), a lighter, airy blue (#A1C3DE), and a pristine sky white (#D0E0EE). Deeper, more intense blues (#3B7C9D) and (#1E5A7A) provide grounding and stability, reminiscent of deeper ocean currents. This palette is ideal for designs that aim to convey serenity, freshness, and a sophisticated sense of calm, perfect for marine or wellness themes.

Best used for

  • Coastal resorts and travel agencies
  • Wellness and meditation apps
  • Marine and aquatic-themed products
  • Sustainable and eco-friendly brands
  • Clean, modern digital interfaces
  • Spa and relaxation environments

Suggested color roles

primary

Utilize #3B7C9D (Deep Teal Blue) for main headings, brand accents, or interactive elements, providing a stable and trustworthy feel.

secondary

Apply #6A9CC3 (Mid Blue) for supporting content blocks, backgrounds, or graphic elements, offering a pleasant, calming mid-tone.

accent

Incorporate #A1C3DE (Light Blue) for subtle highlights, delicate patterns, or to simulate soft light and airy expanses.

background

Employ #D0E0EE (Sky White) as a clean, expansive background, providing a pristine canvas that enhances the clarity of the blues.

text

Choose #1E5A7A (Deep Ocean Blue) for all body text, ensuring excellent readability and a cohesive, serene feel against lighter backgrounds, or use a deep charcoal.

Accessibility notes

  • Ensure #1E5A7A provides excellent contrast for text on #D0E0EE, #A1C3DE, and #6A9CC3 backgrounds.
  • Avoid using #A1C3DE for small body text; reserve it for larger headings or subtle graphic elements.
  • When pairing #3B7C9D with #6A9CC3, ensure sufficient contrast for text, especially in smaller sizes.
  • Always test contrast ratios for text and interactive elements to meet accessibility standards.

Recommended combinations

Ocean Depths

Ideal for creating depth and visual interest, mimicking the varying shades of deep water.

#3B7C9D · #1E5A7A · #6A9CC3

Sky & Water

Excellent for light, airy designs, evoking open skies and clear, shallow waters.

#D0E0EE · #A1C3DE · #6A9CC3

Coastal Contrast

Use for strong, serene contrast, highlighting key information against a pristine background.

#1E5A7A · #D0E0EE · #3B7C9D

CSS variables

:root {
  --sunlit-coastal-blues-2-1: #6A9CC3;
  --sunlit-coastal-blues-2-2: #A1C3DE;
  --sunlit-coastal-blues-2-3: #D0E0EE;
  --sunlit-coastal-blues-2-4: #3B7C9D;
  --sunlit-coastal-blues-2-5: #1E5A7A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunlit-coastal-blues-2": {
        1: "#6A9CC3",
        2: "#A1C3DE",
        3: "#D0E0EE",
        4: "#3B7C9D",
        5: "#1E5A7A",
      }
    }
  }
}

Related searches

coastal blue paletteocean serene colorslight blue water huestranquil sea palettemarine cool tones

Palette colors

Hex values

Color 1#6A9CC3
·
Color 2#A1C3DE
·
Color 3#D0E0EE
·
Color 4#3B7C9D
·
Color 5#1E5A7A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.2:1Fail
1.6:1Fail
2.6:1Fail
2
1.6:1Fail
1.4:1Fail
2.5:1Fail
4.1:1AA18
3
2.2:1Fail
1.4:1Fail
3.4:1AA18
5.6:1AA
4
1.6:1Fail
2.5:1Fail
3.4:1AA18
1.6:1Fail
5
2.6:1Fail
4.1:1AA18
5.6:1AA
1.6:1Fail

Similar palettes

More like Sunlit Coastal Blues

View all cool
Aegean Coast Whisper
Azure Coast Serenity
Coastal Breeze Mist
Coastal Horizon Haze
Coastal Seafoam Spray
Coastal Tide Shimmer