Back to palettes

Palette

Oceanic Rhapsody

Harmonious blues flowing together, reminiscent of the endless, calming movements of the ocean.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Oceanic Rhapsody 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 Oceanic Rhapsody.

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

Data visualization

#4682B4#6A5ACD#1E90FF#4169E1#B0C4DE

Palette guide

How to use Oceanic Rhapsody

Overview

The Oceanic Rhapsody palette presents a harmonious blend of blues, reminiscent of the ocean's endless, calming movements. Ranging from the muted #B0C4DE to the vibrant #1E90FF, and incorporating the stately #4682B4, the regal #6A5ACD, and the strong #4169E1, this collection is designed to evoke serenity, trust, and sophistication. It’s an excellent choice for designers and developers seeking to create designs that feel stable, professional, and deeply calming, suitable for a wide array of applications from corporate branding to tranquil digital experiences.

Best used for

  • Corporate and financial services branding
  • Healthcare and wellness websites
  • Government and institutional communications
  • Luxury product and service marketing
  • Relaxation and meditation app interfaces
  • Professional portfolio websites

Suggested color roles

primary

Utilize #4682B4 as a stable and trustworthy primary color for main headers or foundational elements.

secondary

Apply #4169E1 for supporting content, navigation, or sub-headings, maintaining a strong blue presence.

accent

Highlight key information or interactive elements with #1E90FF, offering a vibrant yet harmonious pop.

background

The very light #B0C4DE provides an airy and clean background, allowing darker blues to stand out gracefully.

text

For dark backgrounds like #6A5ACD, white text is recommended. For lighter blues like #B0C4DE, a dark charcoal or black ensures optimal readability.

Accessibility notes

  • White text provides good contrast on #4682B4, #6A5ACD, #1E90FF, and #4169E1.
  • For #B0C4DE, ensure dark text (black or dark gray) is used to meet WCAG contrast standards.
  • Avoid using #B0C4DE for small text against a very light background, as contrast may be insufficient.
  • Always verify text and background color combinations using a contrast checker to ensure readability for all users.

Recommended combinations

Deep Serenity

Creates a profound, sophisticated, and calming blue ambiance, ideal for professional or contemplative designs.

#4682B4 · #6A5ACD · #4169E1

Oceanic Flow

Offers a dynamic yet harmonious progression, suitable for gradients, infographics, or vibrant accents.

#1E90FF · #4169E1 · #B0C4DE

Calm Horizon

Provides a balanced and serene look, perfect for clean layouts, backgrounds, or user interfaces.

#B0C4DE · #4682B4 · #6A5ACD

CSS variables

:root {
  --oceanic-rhapsody-1: #4682B4;
  --oceanic-rhapsody-2: #6A5ACD;
  --oceanic-rhapsody-3: #1E90FF;
  --oceanic-rhapsody-4: #4169E1;
  --oceanic-rhapsody-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-rhapsody": {
        1: "#4682B4",
        2: "#6A5ACD",
        3: "#1E90FF",
        4: "#4169E1",
        5: "#B0C4DE",
      }
    }
  }
}

Related searches

harmonious blue color palettecalming ocean shadesserene blue design schemeroyal blue corporate colorsgradient blue branding

Palette colors

Hex values

Color 1#4682B4
·
Color 2#6A5ACD
·
Color 3#1E90FF
·
Color 4#4169E1
·
Color 5#B0C4DE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.3:1Fail
1.2:1Fail
2.3:1Fail
2
1.3:1Fail
1.6:1Fail
1.1:1Fail
3:1Fail
3
1.3:1Fail
1.6:1Fail
1.5:1Fail
1.8:1Fail
4
1.2:1Fail
1.1:1Fail
1.5:1Fail
2.7:1Fail
5
2.3:1Fail
3:1Fail
1.8:1Fail
2.7:1Fail

Similar palettes

More like Oceanic Rhapsody

View all cool