Back to palettes

Palette

Mediterranean Sunset Vista

Vibrant blues of the sea meet warm oranges of the setting sun over a picturesque Mediterranean coastline.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mediterranean Sunset Vista 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 Mediterranean Sunset Vista.

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

Data visualization

#3A5B7F#6F9AC5#C1DFF0#F2B855#E07F4E

Palette guide

How to use Mediterranean Sunset Vista

Overview

The "Mediterranean Sunset Vista" palette captures the serene yet vibrant essence of a coastal evening. This harmonious blend features deep sea blues like #3A5B7F and lighter sky tones such as #6F9AC5 and #C1DFF0, perfectly complemented by the warm glow of a setting sun through shades like golden #F2B855 and rich burnt orange #E07F4E. Designers can leverage this palette to evoke feelings of tranquility, adventure, and natural beauty. It's ideal for projects aiming for a sophisticated yet inviting aesthetic, providing a balanced spectrum from cool depths to warm highlights for compelling visual narratives and user experiences, useful for both digital and print media.

Best used for

  • Travel agency websites or brochures
  • Coastal resort branding and interiors
  • Nature-themed mobile applications
  • Editorial designs for lifestyle magazines
  • Home decor product showcases
  • Outdoor adventure gear branding

Suggested color roles

primary

Use #3A5B7F (Deep Blue) as a grounding, sophisticated base for headers, navigation, or large background sections, establishing a strong, tranquil foundation.

secondary

Employ #6F9AC5 (Medium Blue) for subheadings, active states, or graphic elements, providing a gentle contrast and expanding the palette's cool appeal.

accent

Apply #F2B855 (Golden Orange) sparingly for call-to-action buttons, key highlights, or interactive elements to draw attention with its warm, energetic glow.

background

Utilize #C1DFF0 (Light Blue) as a soft, airy backdrop for main content areas, providing excellent readability and a sense of open space.

text

For primary body text, use #3A5B7F (Deep Blue) or a dark charcoal on light backgrounds like #C1DFF0. For headings on darker backgrounds, #C1DFF0 works well.

Accessibility notes

  • Ensure #3A5B7F or a dark charcoal has sufficient contrast against #C1DFF0 for body text readability (WCAG AA standard).
  • Test #F2B855 for contrast when used as text on #C1DFF0 or #6F9AC5; it might require a darker background for legibility.
  • Use #E07F4E carefully as text; pair with very light backgrounds like #C1DFF0 for better visibility and contrast.
  • Avoid using #F2B855 or #E07F4E on #6F9AC5 for critical information to prevent low contrast issues, especially for smaller fonts.

Recommended combinations

Ocean Horizon

Ideal for serene web headers, background gradients, or UI elements that require a calming, expansive feel, mimicking the sea and sky.

#3A5B7F · #6F9AC5 · #C1DFF0

Sunset Glow

Perfect for highlighting calls to action, festive banners, or vibrant editorial features, balanced by a deep anchor color.

#F2B855 · #E07F4E · #3A5B7F

Coastal Accent

Use for subtle illustrations, decorative borders, or interactive elements that need a touch of warmth against a cool base, creating visual interest.

#C1DFF0 · #E07F4E · #6F9AC5

CSS variables

:root {
  --mediterranean-sunset-vista-1: #3A5B7F;
  --mediterranean-sunset-vista-2: #6F9AC5;
  --mediterranean-sunset-vista-3: #C1DFF0;
  --mediterranean-sunset-vista-4: #F2B855;
  --mediterranean-sunset-vista-5: #E07F4E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mediterranean-sunset-vista": {
        1: "#3A5B7F",
        2: "#6F9AC5",
        3: "#C1DFF0",
        4: "#F2B855",
        5: "#E07F4E",
      }
    }
  }
}

Related searches

mediterranean travel color schemesunset coastal paletteblue orange branding colorswarm cool nature palettetravel website color ideas

Palette colors

Hex values

Color 1#3A5B7F
·
Color 2#6F9AC5
·
Color 3#C1DFF0
·
Color 4#F2B855
·
Color 5#E07F4E
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
5.1:1AA
3.9:1AA18
2.5:1Fail
2
2.4:1Fail
2.1:1Fail
1.7:1Fail
1:1Fail
3
5.1:1AA
2.1:1Fail
1.3:1Fail
2.1:1Fail
4
3.9:1AA18
1.7:1Fail
1.3:1Fail
1.6:1Fail
5
2.5:1Fail
1:1Fail
2.1:1Fail
1.6:1Fail

Similar palettes

More like Mediterranean Sunset Vista

View all warm
Amber Voyage
Autumn Orchard Sunset
Bohemian Sunset Bloom
Bohemian Sunset Glow
Boho Sunset Dream
Canyon Dusk Ember