What are the hex codes in the Lagoon Cyan & Cerulean palette?

The Lagoon Cyan & Cerulean color palette consists of Charcoal #00486A, Cerulean #007D9C, Cyan #00B8BF, Powder Blue #90E3DE.

How should I use the Lagoon Cyan & Cerulean palette on a website?

Use Powder Blue #90E3DE as the background, Charcoal #00486A for text, Cerulean #007D9C for buttons and links, and Cyan #00B8BF for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Charcoal on Powder Blue at 6.66:1.

Which colors in Lagoon Cyan & Cerulean have enough contrast for text?

The highest-contrast pair is #00486A on #90E3DE with a ratio of 6.66:1, which passes WCAG AA for normal text.

#00486ACharcoal

#007D9CCerulean

#00B8BFCyan

#90E3DEPowder Blue

Lagoon Cyan & Cerulean color palette

Gradient Ocean Cold Teal Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Charcoal	`#00486A`	`rgb(0, 72, 106)`	`hsl(199, 100%, 21%)`	`oklch(38.1% 0.084 238)`
Cerulean	`#007D9C`	`rgb(0, 125, 156)`	`hsl(192, 100%, 31%)`	`oklch(54.7% 0.102 223)`
Cyan	`#00B8BF`	`rgb(0, 184, 191)`	`hsl(182, 100%, 37%)`	`oklch(71.1% 0.121 200)`
Powder Blue	`#90E3DE`	`rgb(144, 227, 222)`	`hsl(176, 60%, 73%)`	`oklch(86.1% 0.081 191)`

Why it works and how to use it

Lagoon Cyan & Cerulean is a vivid monochromatic color palette tagged gradient, ocean, cold. All four colors sit within 23° of hue, so the scheme reads as one color explored across light and dark. These are bold, punchy colors that need generous white space around them. The overall temperature is cool.

With 4 chromatic colors, Cerulean takes the lead while the rest support. Lightness runs from 21% to 73%. Well suited to websites, presentations and branding.

Background: Powder Blue (#90E3DE) is the lightest color, so it belongs on large surfaces.
Text: Charcoal (#00486A) on #90E3DE gives 6.66:1, passing WCAG AA.
Primary: Cerulean (#007D9C) is the most saturated mid-tone; use it for buttons and links (3.22:1 against the background, fine for UI elements).
Accent: Cyan (#00B8BF) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Charcoal on Powder Blue at 6.66:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Lagoon Cyan & Cerulean

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#00486A

#007D9C

#00B8BF

#90E3DE

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#00486A` on `#90E3DE`	Aa	6.66:1	AA
`#00486A` on `#00B8BF`	Aa	4.03:1	AA large only
`#007D9C` on `#90E3DE`	Aa	3.22:1	AA large only
`#00486A` on `#007D9C`	Aa	2.07:1	Fail
`#007D9C` on `#00B8BF`	Aa	1.95:1	Fail
`#00B8BF` on `#90E3DE`	Aa	1.65:1	Fail

:root {
  --charcoal: #00486A;
  --cerulean: #007D9C;
  --cyan: #00B8BF;
  --powder-blue: #90E3DE;
}

$charcoal: #00486A;
$cerulean: #007D9C;
$cyan: #00B8BF;
$powder-blue: #90E3DE;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'charcoal': '#00486A',
        'cerulean': '#007D9C',
        'cyan': '#00B8BF',
        'powder-blue': '#90E3DE',
      },
    },
  },
};

{
  "name": "Lagoon Cyan & Cerulean",
  "colors": [
    "#00486A",
    "#007D9C",
    "#00B8BF",
    "#90E3DE"
  ]
}

background: linear-gradient(135deg, #00486A, #007D9C, #00B8BF, #90E3DE);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-10-15 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood