Palette

Coral Lagoon Gleam

A dazzling collection of blues and teals inspired by the vibrant marine life of a sapphire coral reef.

coolenergetic5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coral Lagoon Gleam 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 Coral Lagoon Gleam.

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

Data visualization

#0F375F#2A6CA2#4D9FCC#8CE6F0#C9F6F7

Palette guide

How to use Coral Lagoon Gleam

Overview

The Coral Lagoon Gleam palette dives deep into a refreshing spectrum of cool blues and vibrant teals, reminiscent of a pristine ocean. Starting with the rich, deep navy #0F375F, it flows through a range of invigorating shades like #2A6CA2 and #4D9FCC, culminating in the luminous, almost iridescent teals of #8CE6F0 and #C9F6F7. This palette is excellent for designers and developers aiming to convey professionalism, trust, and a sense of fresh innovation. Its progression from dark to light offers versatility for creating dynamic interfaces, captivating branding, or compelling digital art that evokes water, sky, or modern technology.

Best used for

Marine or environmental conservation websites
Tech and software company branding
Travel agencies specializing in coastal destinations
Modern sports or activewear brands
Clean, data-rich dashboards and analytics
Water purification or wellness product packaging

Suggested color roles

primary

Utilize #2A6CA2 as a strong, trustworthy primary color for main headers, branding, or key interactive elements.

secondary

Apply #4D9FCC for secondary buttons, navigation, or as a complementary background for sections, maintaining vibrancy.

accent

Use #8CE6F0 as a bright, energetic accent for calls-to-action, hover states, or to draw attention to important data points.

background

Employ #C9F6F7 for light, airy backgrounds, providing a crisp and clean canvas that enhances the darker blues.

text

For body text, use #0F375F. For headings or bold statements on light backgrounds, #2A6CA2 or #4D9FCC works well. White text is suitable on darker blues.

Accessibility notes

Ensure sufficient contrast between #0F375F or #2A6CA2 and #C9F6F7 for text readability.
Avoid using #8CE6F0 or #C9F6F7 for small text, as their lightness makes them difficult to read against many backgrounds.
White text works well on #0F375F, #2A6CA2, and #4D9FCC, providing good contrast.
When using #8CE6F0, ensure it contrasts strongly with both its background and any accompanying text.

Recommended combinations

Deep Ocean UI

Creates a professional, deep blue interface with a bright, clean background.

#0F375F · #2A6CA2 · #C9F6F7

Vibrant Energy

Ideal for energetic calls-to-action, progress indicators, or dynamic data visualization.

#4D9FCC · #8CE6F0 · #2A6CA2

Cool Gradient

Forms a smooth, aquatic gradient for hero sections or brand elements.

#2A6CA2 · #4D9FCC · #8CE6F0

CSS variables

:root {
  --coral-lagoon-gleam-1: #0F375F;
  --coral-lagoon-gleam-2: #2A6CA2;
  --coral-lagoon-gleam-3: #4D9FCC;
  --coral-lagoon-gleam-4: #8CE6F0;
  --coral-lagoon-gleam-5: #C9F6F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-lagoon-gleam": {
        1: "#0F375F",
        2: "#2A6CA2",
        3: "#4D9FCC",
        4: "#8CE6F0",
        5: "#C9F6F7",
      }
    }
  }
}

Hex values

Color 1#0F375F

Color 2#2A6CA2

Color 3#4D9FCC

Color 4#8CE6F0

Color 5#C9F6F7

Accessibility

Contrast checker

2.2:1Fail

4.1:1AA18

8.5:1AAA

10.4:1AAA

2.2:1Fail

1.9:1Fail

3.9:1AA18

4.8:1AA

4.1:1AA18

1.9:1Fail

2.1:1Fail

2.5:1Fail

8.5:1AAA

3.9:1AA18

2.1:1Fail

1.2:1Fail

10.4:1AAA

4.8:1AA

2.5:1Fail

1.2:1Fail

Similar palettes

More like Coral Lagoon Gleam