Back to palettes

Palette

Mediterranean Coastal Sun

Warm, inviting tones reflecting the sun-drenched architecture and sandy shores of the Mediterranean coast.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mediterranean Coastal Sun 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 Coastal Sun.

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

Data visualization

#F4E8D3#E3CDB8#D2B29A#A6806C#7A5B4F

Palette guide

How to use Mediterranean Coastal Sun

Overview

The Mediterranean Coastal Sun palette offers warm, inviting tones that reflect the sun-drenched architecture and sandy shores of the Mediterranean coast. This sophisticated collection features a harmonious gradient from the soft #F4E8D3 (cream) and #E3CDB8 (pale tan) to the richer #D2B29A (tan) and #A6806C (light brown), culminating in the deep, grounding #7A5B4F (dark brown). Designers and developers can leverage this palette to create designs that feel luxurious, natural, and subtly rustic. It's ideal for projects that aim to evoke comfort, elegance, and the serene warmth of a sun-kissed environment, embodying a natural and inviting mood.

Best used for

  • Luxury travel and boutique hotel branding
  • High-end home goods and decor websites
  • Artisan bakery or coffee shop branding
  • Sophisticated lifestyle blogs or magazines
  • Natural and organic cosmetic product packaging
  • Elegant and minimalist UI/UX design

Suggested color roles

primary

Utilize #A6806C as a warm anchor for main headings, primary calls-to-action, or significant content blocks, providing a sense of grounded elegance.

secondary

Employ #D2B29A for supporting elements, card backgrounds, or subheadings, offering a softer, complementary warmth.

accent

Introduce #7A5B4F sparingly for rich details, strong borders, or subtle decorative elements to add depth and sophistication.

background

Choose #F4E8D3 for a soft, creamy background, mimicking sandy shores and providing a clean, inviting canvas.

text

For optimal readability, #7A5B4F provides excellent contrast on lighter backgrounds like #F4E8D3, or use a classic black for maximum clarity.

Accessibility notes

  • Ensure sufficient contrast when pairing text with #F4E8D3; #7A5B4F works well, but lighter colors may not.
  • Avoid using #E3CDB8 or #D2B29A for small text on light backgrounds due to potential low contrast.
  • The contrast between #A6806C and #F4E8D3 is good for headings but verify for body text.
  • Consider larger font sizes or bolding for text in mid-tone colors like #D2B29A to enhance readability.

Recommended combinations

Sandy Shore

Ideal for clean layouts with #F4E8D3 as background, #7A5B4F for body text, and #A6806C for prominent headings or navigation.

#F4E8D3 · #7A5B4F · #A6806C

Warm Architecture

Apply #E3CDB8 for content panels, #D2B29A for borders or dividers, and #A6806C for interactive elements or icons.

#E3CDB8 · #D2B29A · #A6806C

Sunlit Elegance

Use #F4E8D3 as a light canvas, #A6806C for key buttons or calls-to-action, and #7A5B4F for important links or footer text.

#F4E8D3 · #A6806C · #7A5B4F

CSS variables

:root {
  --mediterranean-coastal-sun-1: #F4E8D3;
  --mediterranean-coastal-sun-2: #E3CDB8;
  --mediterranean-coastal-sun-3: #D2B29A;
  --mediterranean-coastal-sun-4: #A6806C;
  --mediterranean-coastal-sun-5: #7A5B4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mediterranean-coastal-sun": {
        1: "#F4E8D3",
        2: "#E3CDB8",
        3: "#D2B29A",
        4: "#A6806C",
        5: "#7A5B4F",
      }
    }
  }
}

Related searches

mediterranean sun palettecoastal warm colors designsandy beach color schemerustic elegant design huesnatural architectural colors

Palette colors

Hex values

Color 1#F4E8D3
·
Color 2#E3CDB8
·
Color 3#D2B29A
·
Color 4#A6806C
·
Color 5#7A5B4F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.6:1Fail
2.9:1Fail
5:1AA
2
1.3:1Fail
1.3:1Fail
2.3:1Fail
4:1AA18
3
1.6:1Fail
1.3:1Fail
1.8:1Fail
3.1:1AA18
4
2.9:1Fail
2.3:1Fail
1.8:1Fail
1.7:1Fail
5
5:1AA
4:1AA18
3.1:1AA18
1.7:1Fail

Similar palettes

More like Mediterranean Coastal Sun

View all warm
Sun-Kissed Terracotta
Santorini Villa Sun
Terracotta Roof Sunset
Amber Wheat Harvest
Artisan Coffee Blend
Artisan Loaf Hearth