Lagoon Glow

ocean palette with a balanced five-color hierarchy for design use.

#Ocean#Cool#Fresh

Open in Generator

COLOR 1

#721451

Dark Raspberry

COLOR 2

#D81458

Ruby

COLOR 3

#DC706A

Indian Red

COLOR 4

#A2F4E1

Pastel Turquoise

COLOR 5

#F5F8F9

Slate 50

Color Values & Codes

HEX · RGB · HSL

Dark Raspberry

#721451

rgb(114, 20, 81)hsl(321, 70%, 26%)Color details →

Ruby

#D81458

rgb(216, 20, 88)hsl(339, 83%, 46%)Color details →

Indian Red

#DC706A

rgb(220, 112, 106)hsl(3, 62%, 64%)Color details →

Pastel Turquoise

#A2F4E1

rgb(162, 244, 225)hsl(166, 79%, 80%)Color details →

Slate 50

#F5F8F9

rgb(245, 248, 249)hsl(195, 25%, 97%)Color details →

Open In Design Tools

Palette Generator

Lock & shuffle colors

Explore category schemes

CSS Variables

Copy & paste directly into your stylesheet

:root {
  --color-1: #721451;
  --color-2: #D81458;
  --color-3: #DC706A;
  --color-4: #A2F4E1;
  --color-5: #F5F8F9;
}

Role-Based WCAG Contrast Audit

Accessibility contrast depends on assigned UI roles. Here are the contrast ratios and WCAG compliance ratings when pairing palette colors as Foreground Text against Background surfaces:

Sample Text

#721451 on #A2F4E18.56:1

Normal Text AA Pass

Sample Text

#721451 on #F5F8F910.17:1

Normal Text AA Pass

Sample Text

#D81458 on #A2F4E13.98:1

Large Text Only (Pass)

Sample Text

#D81458 on #F5F8F94.73:1

Normal Text AA Pass

Sample Text

#DC706A on #A2F4E12.52:1

Large Text Only (Fail)

Sample Text

#DC706A on #F5F8F93.00:1

Large Text Only (Fail)

Related Palettes in Ocean

cp-featured-01Technology

TechModernCool

cp-featured-08Ocean

OceanCool

cp-featured-13Ocean

Caribbean Reef Shallows

OceanFresh

cp-featured-18Food

FoodCleanFresh