Aqua Drift

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

#Ocean#Cool#Fresh

Open in Generator

COLOR 1

#186F5B

Ocean Jasper

COLOR 2

#1AC4D2

Cyberpunk Cyan

COLOR 3

#63A7E3

Sky 500

COLOR 4

#F2B3A5

Dusty Rose

COLOR 5

#FAF8F5

White Smoke

Color Values & Codes

HEX · RGB · HSL

Ocean Jasper

#186F5B

rgb(24, 111, 91)hsl(166, 64%, 26%)Color details →

Cyberpunk Cyan

#1AC4D2

rgb(26, 196, 210)hsl(185, 78%, 46%)Color details →

Sky 500

#63A7E3

rgb(99, 167, 227)hsl(208, 70%, 64%)Color details →

Dusty Rose

#F2B3A5

rgb(242, 179, 165)hsl(11, 75%, 80%)Color details →

White Smoke

#FAF8F5

rgb(250, 248, 245)hsl(36, 33%, 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: #186F5B;
  --color-2: #1AC4D2;
  --color-3: #63A7E3;
  --color-4: #F2B3A5;
  --color-5: #FAF8F5;
}

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

#186F5B on #F2B3A53.40:1

Large Text Only (Pass)

Sample Text

#186F5B on #FAF8F55.72:1

Normal Text AA Pass

Sample Text

#1AC4D2 on #F2B3A51.19:1

Large Text Only (Fail)

Sample Text

#1AC4D2 on #FAF8F52.01:1

Large Text Only (Fail)

Sample Text

#63A7E3 on #F2B3A51.44:1

Large Text Only (Fail)

Sample Text

#63A7E3 on #FAF8F52.43: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