Palette

Misty Ocean Hues

Soothing cool tones reflecting a calm ocean under a soft, misty sky.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Misty Ocean Hues 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 Misty Ocean Hues.

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

Data visualization

#B0C4DE#778899#ADD8E6#6A5ACD#4682B4

Palette guide

How to use Misty Ocean Hues

Overview

The Misty Ocean Hues palette is a captivating collection of soothing cool tones, reflecting a calm ocean under a soft, misty sky. This palette features the airy #B0C4DE (Light Steel Blue), the grounding #778899 (Light Slate Gray), and the vibrant #ADD8E6 (Light Blue), alongside deeper, richer blues like #6A5ACD (Slate Blue) and #4682B4 (Steel Blue). It's an excellent choice for designers and developers seeking to evoke feelings of tranquility, depth, and natural beauty. The range allows for dynamic yet harmonious designs, from subtle gradients to strong contrasts, capturing the essence of a serene marine environment.

Best used for

Coastal resort and hospitality branding
Marine conservation initiatives
Spa and wellness product design
Children's educational content
Tech interfaces requiring a calm aesthetic
Abstract art and digital illustrations

Suggested color roles

primary

Use #4682B4 as a deep, stable primary color for main headings, footers, or dominant graphical elements, representing ocean depth.

secondary

Employ #778899 for supportive content, subheadings, or as a background for sections that need a calm, atmospheric presence.

accent

Apply #6A5ACD as a rich, engaging accent for interactive elements, calls to action, or to add a touch of vibrant depth.

background

Utilize #B0C4DE as a light, expansive background color, evoking a misty sky. #ADD8E6 can be used for secondary background layers.

text

For optimal readability on light backgrounds, use #4682B4 or a deep navy/charcoal. For darker backgrounds, white or a very light grey is recommended.

Accessibility notes

Ensure sufficient contrast when pairing #B0C4DE or #ADD8E6 with lighter text; use dark text for optimal readability.
Test text readability of #778899 on backgrounds like #B0C4DE to meet WCAG AA standards.
Prioritize #4682B4 for critical text on light backgrounds to ensure maximum legibility.
Be mindful of contrast when using #6A5ACD as an accent on darker blues; ensure it stands out clearly.

Recommended combinations

Deep Sea Contrast

Creates a strong visual impact with a deep primary color against light, airy backgrounds, accented by a lighter blue.

#4682B4 · #B0C4DE · #ADD8E6

Vibrant Mist

Ideal for adding a pop of rich color. Use #778899 for structure, #6A5ACD for emphasis, and #B0C4DE for a light backdrop.

#778899 · #6A5ACD · #B0C4DE

Calm Waters

Provides a serene and natural feel. #ADD8E6 as a dominant background, #4682B4 for key elements, and #778899 for secondary details.

#ADD8E6 · #4682B4 · #778899

CSS variables

:root {
  --misty-ocean-hues-1: #B0C4DE;
  --misty-ocean-hues-2: #778899;
  --misty-ocean-hues-3: #ADD8E6;
  --misty-ocean-hues-4: #6A5ACD;
  --misty-ocean-hues-5: #4682B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-ocean-hues": {
        1: "#B0C4DE",
        2: "#778899",
        3: "#ADD8E6",
        4: "#6A5ACD",
        5: "#4682B4",
      }
    }
  }
}

Hex values

Color 1#B0C4DE

Color 2#778899

Color 3#ADD8E6

Color 4#6A5ACD

Color 5#4682B4

Accessibility

Contrast checker

2:1Fail

1.2:1Fail

3:1Fail

2.3:1Fail

2:1Fail

2.4:1Fail

1.5:1Fail

1.1:1Fail

1.2:1Fail

2.4:1Fail

3.5:1AA18

2.7:1Fail

3:1Fail

1.5:1Fail

3.5:1AA18

1.3:1Fail

2.3:1Fail

1.1:1Fail

2.7:1Fail

1.3:1Fail

Similar palettes

More like Misty Ocean Hues

View all cool

Celestial Ocean Dream

Celestial Ocean Embrace