Back to palettes

Palette

Cerulean Horizon Dive

Immerse yourself in the calming, expansive blues of a vast ocean meeting the horizon.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cerulean Horizon Dive 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 Cerulean Horizon Dive.

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

Data visualization

#007BA7#00CED1#40E0D0#87CEEB#4682B4

Palette guide

How to use Cerulean Horizon Dive

Overview

The "Cerulean Horizon Dive" palette invites you to immerse yourself in the calming, expansive blues of a vast ocean meeting the horizon. It features the deep, grounding #007BA7 and the vibrant #00CED1, transitioning through the lively #40E0D0. The palette is balanced by the bright #87CEEB and the solid #4682B4. This collection is ideal for designers seeking to evoke serenity, oceanic vastness, or refreshing natural beauty. Developers can apply these hues to create immersive user interfaces for marine exploration, travel agencies, or eco-conscious brands, ensuring a smooth and captivating visual experience that promotes calm and clarity.

Best used for

  • Ocean-themed travel websites
  • Marine research platforms
  • Spa and relaxation apps
  • Eco-friendly product branding
  • Coastal lifestyle blogs
  • Clean, modern UI design

Suggested color roles

primary

#4682B4 - A robust steel blue, ideal for main headings, navigation bars, or foundational UI elements, conveying stability.

secondary

#00CED1 - A vibrant dark turquoise, excellent for subheadings, active states, or graphical elements that need to pop.

accent

#40E0D0 - A bright turquoise, perfect for subtle highlights, call-to-action buttons, or delicate decorative accents.

background

#007BA7 - A deep cerulean, serving as an immersive, sophisticated background, especially for dark mode designs.

text

#87CEEB - A bright sky blue, providing excellent contrast and readability for text on the dark #007BA7 background.

Accessibility notes

  • Ensure #87CEEB text on #007BA7 or #4682B4 backgrounds meets WCAG contrast standards.
  • Avoid using #40E0D0 or #87CEEB for small text on similarly light backgrounds due to low contrast.
  • The darkest colors, #007BA7 and #4682B4, provide good contrast for white or very light text.
  • For body text, prefer #87CEEB against the darkest colors for optimal readability.

Recommended combinations

Ocean Depths

Creates a strong, deep ocean feel, with the darkest blue grounding the design and vibrant turquoise for highlights.

#007BA7 · #4682B4 · #00CED1

Horizon Glide

Ideal for soft, airy designs, using the deepest blue for accents or important information.

#40E0D0 · #87CEEB · #007BA7

Aqua Immersion

Excellent for backgrounds or large sections where a gentle, clear blue-green gradient is desired.

#00CED1 · #40E0D0 · #4682B4

CSS variables

:root {
  --cerulean-horizon-dive-1: #007BA7;
  --cerulean-horizon-dive-2: #00CED1;
  --cerulean-horizon-dive-3: #40E0D0;
  --cerulean-horizon-dive-4: #87CEEB;
  --cerulean-horizon-dive-5: #4682B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cerulean-horizon-dive": {
        1: "#007BA7",
        2: "#00CED1",
        3: "#40E0D0",
        4: "#87CEEB",
        5: "#4682B4",
      }
    }
  }
}

Related searches

cerulean ocean color palettevast blue green schemeserene aqua toneshorizon themed web designcalm water ui colors

Palette colors

Hex values

Color 1#007BA7
·
Color 2#00CED1
·
Color 3#40E0D0
·
Color 4#87CEEB
·
Color 5#4682B4
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
2.9:1Fail
2.7:1Fail
1.2:1Fail
2
2.4:1Fail
1.2:1Fail
1.1:1Fail
2.1:1Fail
3
2.9:1Fail
1.2:1Fail
1.1:1Fail
2.5:1Fail
4
2.7:1Fail
1.1:1Fail
1.1:1Fail
2.4:1Fail
5
1.2:1Fail
2.1:1Fail
2.5:1Fail
2.4:1Fail

Similar palettes

More like Cerulean Horizon Dive

View all cool
Deep Sea Current
Abyssal Current Glide
Aegean Coast Whisper
Aqua Dream Glow
Aqua Marine Reef
Aqua Ocean Dream