Back to palettes

Palette

Riviera Coast Charm

Refreshing blues with a touch of sunny beige evoke the serene beauty of the Mediterranean coastline.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Riviera Coast Charm 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 Riviera Coast Charm.

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

Data visualization

#336699#6699CC#C0D8F0#F0F8FF#F5DEB3

Palette guide

How to use Riviera Coast Charm

Overview

The Riviera Coast Charm palette evokes the serene beauty of the Mediterranean coastline with its refreshing blues and a touch of sunny beige. Featuring a deep, nautical #336699, a versatile #6699CC, and the airy #F0F8FF, this palette is perfect for designs seeking a calm, light, and inviting aesthetic. Designers can leverage its vibrant yet soothing blues to convey trustworthiness and openness, while the warm #F5DEB3 adds a delightful, unexpected accent. Developers will find the clear progression of blues useful for building intuitive interfaces that feel fresh and expansive, making it ideal for travel, lifestyle, and coastal-themed applications.

Best used for

  • Travel and tourism websites
  • Coastal-themed interior design blogs
  • Summer fashion or lifestyle brands
  • Nautical or marine-related businesses
  • Relaxing app interfaces
  • Beach resort branding

Suggested color roles

primary

Use #336699 for main navigation, strong headers, or brand elements, providing a deep, stable blue.

secondary

Apply #6699CC for subheadings, card backgrounds, or interactive elements, offering a harmonious lighter blue.

accent

Introduce #F5DEB3 sparingly for calls-to-action, highlights, or decorative elements, adding a warm, sunny pop.

background

Employ #F0F8FF as a light, expansive background, ensuring excellent readability and an airy feel.

text

A dark navy like #336699 or a true black is essential for optimal readability against lighter backgrounds like #F0F8FF.

Accessibility notes

  • Ensure #336699 text on #F0F8FF or #C0D8F0 backgrounds meets WCAG AA contrast standards.
  • Be cautious when using #6699CC text on #C0D8F0 or #F0F8FF, as contrast might be insufficient for small text.
  • The beige #F5DEB3 will require very dark text (black or #336699) to be accessible.
  • A contrast checker is crucial for validating all text and background pairings.

Recommended combinations

Deep Ocean Breeze

Excellent for a strong header, light body, and subtle supporting elements in a fresh web layout.

#336699 · #F0F8FF · #6699CC

Sunny Shoreline

Perfect for highlights or calls-to-action against a blue theme, using beige as a warm accent.

#F5DEB3 · #F0F8FF · #336699

Layered Sky

Ideal for creating tiered UI components or subtle background gradients, offering smooth blue transitions.

#C0D8F0 · #6699CC · #F0F8FF

CSS variables

:root {
  --riviera-coast-charm-1: #336699;
  --riviera-coast-charm-2: #6699CC;
  --riviera-coast-charm-3: #C0D8F0;
  --riviera-coast-charm-4: #F0F8FF;
  --riviera-coast-charm-5: #F5DEB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "riviera-coast-charm": {
        1: "#336699",
        2: "#6699CC",
        3: "#C0D8F0",
        4: "#F0F8FF",
        5: "#F5DEB3",
      }
    }
  }
}

Related searches

coastal blue palettesummer color schemestranquil blue beige designlight nautical colorsrefreshing UI palette

Palette colors

Hex values

Color 1#336699
·
Color 2#6699CC
·
Color 3#C0D8F0
·
Color 4#F0F8FF
·
Color 5#F5DEB3
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
4.1:1AA18
5.6:1AA
4.6:1AA
2
2:1Fail
2:1Fail
2.8:1Fail
2.3:1Fail
3
4.1:1AA18
2:1Fail
1.4:1Fail
1.1:1Fail
4
5.6:1AA
2.8:1Fail
1.4:1Fail
1.2:1Fail
5
4.6:1AA
2.3:1Fail
1.1:1Fail
1.2:1Fail

Similar palettes

More like Riviera Coast Charm

View all cool
Aegean Isle Horizon
Arctic Sky Whisper
Azure Coast Serenity
Cloudspun Serenity
Coastal Cliff Retreat
Coastal Horizon Haze