Back to palettes

Palette

Cobalt Tidepool

Evokes the deep, shimmering blues found in a secluded ocean tidepool at dusk.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cobalt Tidepool 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 Cobalt Tidepool.

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

Data visualization

#0A2239#1D4B78#366AA3#5B8CCF#8BBBF6

Palette guide

How to use Cobalt Tidepool

Overview

The Cobalt Tidepool palette evokes the deep, shimmering blues found in a secluded ocean tidepool at dusk. With colors ranging from the profound #0A2239 to the luminous #8BBBF6, this palette is perfect for designs that evoke mystery, tranquility, and the serene beauty of coastal life. Designers can leverage #1D4B78 as a strong primary, while #366AA3 offers a versatile mid-tone for various applications. The brightest hue, #5B8CCF, provides a compelling highlight. This palette is ideal for projects that aim for a sophisticated, calm, and immersive visual experience, from marine conservation branding to digital interfaces.

Best used for

  • Coastal resort and spa branding
  • Marine life education platforms
  • Eco-tourism websites
  • Luxury interior design (oceanic theme)
  • Nature photography portfolios
  • Wellness and meditation apps

Suggested color roles

primary

#1D4B78 - A deep, authoritative blue that serves as a commanding primary, ideal for main headings, brand logos, or core UI elements, conveying trust and stability.

secondary

#366AA3 - A vibrant, yet deep blue, suitable for subheadings, active states, or supporting graphic elements, adding dynamism.

accent

#8BBBF6 - A bright, clear blue that provides a striking highlight, perfect for interactive elements, key data points, or urgent notifications, evoking light on water.

background

#0A2239 - An intensely dark, almost black-blue, creating an immersive, sophisticated backdrop that enhances the luminosity of lighter blues.

text

For text on #0A2239 or #1D4B78, use #8BBBF6 or white for optimal readability. For text on #8BBBF6, use black or #0A2239.

Accessibility notes

  • Ensure high contrast when placing light text, such as #8BBBF6, on darker blues like #0A2239 or #1D4B78.
  • Avoid using #5B8CCF for small text on #366AA3 without verifying WCAG AA compliance due to similar luminance values.
  • The brightest hue, #8BBBF6, offers excellent contrast against all darker blues in the palette for interactive elements.
  • When using #8BBBF6 as a background, ensure text is in a contrasting dark color like black or #0A2239 to maintain legibility.

Recommended combinations

Tidepool Light

Creates a dramatic, high-contrast interface; #0A2239 for background, #366AA3 for content, #8BBBF6 for bright highlights/CTAs.

#0A2239 · #366AA3 · #8BBBF6

Ocean Shimmer

Use #1D4B78 for main sections, #5B8CCF for supporting elements, and #8BBBF6 for vibrant accents or delicate details.

#1D4B78 · #5B8CCF · #8BBBF6

Deep Cove

Ideal for creating depth through gradients or layered UI, moving from the deepest blue to a rich, true blue.

#0A2239 · #1D4B78 · #366AA3

CSS variables

:root {
  --cobalt-tidepool-1: #0A2239;
  --cobalt-tidepool-2: #1D4B78;
  --cobalt-tidepool-3: #366AA3;
  --cobalt-tidepool-4: #5B8CCF;
  --cobalt-tidepool-5: #8BBBF6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cobalt-tidepool": {
        1: "#0A2239",
        2: "#1D4B78",
        3: "#366AA3",
        4: "#5B8CCF",
        5: "#8BBBF6",
      }
    }
  }
}

Related searches

deep blue tidepool paletteoceanic cool color schemecoastal blue brandingserene dark blue UIaquatic depth palette

Palette colors

Hex values

Color 1#0A2239
·
Color 2#1D4B78
·
Color 3#366AA3
·
Color 4#5B8CCF
·
Color 5#8BBBF6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.9:1Fail
4.7:1AA
8.1:1AAA
2
1.8:1Fail
1.6:1Fail
2.6:1Fail
4.5:1AA
3
2.9:1Fail
1.6:1Fail
1.6:1Fail
2.8:1Fail
4
4.7:1AA
2.6:1Fail
1.6:1Fail
1.7:1Fail
5
8.1:1AAA
4.5:1AA
2.8:1Fail
1.7:1Fail

Similar palettes

More like Cobalt Tidepool

View all cool
Cobalt Ocean Depths
Deep Ocean Dream
Ocean Twilight Haze
Pearl Diving Depths
Abyssal Blue Descent
Abyssal Current Glide