ColorPaletteXYZ Logo
ColorPaletteXYZ
Palettes/Ocean

Tide Canvas

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

#Ocean#Cool#Fresh
Open in Generator
COLOR 1
#17703E
Clover
COLOR 2
#18D4A4
Chrysoprase
COLOR 3
#6DC9D9
Mizu Pale Aqua
COLOR 4
#F3A4B0
Peony Pink
COLOR 5
#FAF7F5
White Smoke

Color Values & Codes

HEX · RGB · HSL
Clover
#17703E
rgb(23, 112, 62)hsl(146, 66%, 26%)Color details →
rgb(24, 212, 164)hsl(165, 80%, 46%)Color details →
rgb(109, 201, 217)hsl(189, 59%, 64%)Color details →
Peony Pink
#F3A4B0
rgb(243, 164, 176)hsl(351, 77%, 80%)Color details →
rgb(250, 247, 245)hsl(24, 33%, 97%)Color details →

Open In Design Tools

Palette Generator
Lock & shuffle colors
Contrast Checker
Test WCAG compliance
Shades & Tints
Generate tonal steps
Ocean Palettes
Explore category schemes

CSS Variables

Copy & paste directly into your stylesheet
:root {
  --color-1: #17703E;
  --color-2: #18D4A4;
  --color-3: #6DC9D9;
  --color-4: #F3A4B0;
  --color-5: #FAF7F5;
}

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
#17703E on #F3A4B03.14:1
Large Text Only (Pass)
Sample Text
#17703E on #FAF7F55.75:1
Normal Text AA Pass
Sample Text
#18D4A4 on #F3A4B01.02:1
Large Text Only (Fail)
Sample Text
#18D4A4 on #FAF7F51.79:1
Large Text Only (Fail)
Sample Text
#6DC9D9 on #F3A4B01.02:1
Large Text Only (Fail)
Sample Text
#6DC9D9 on #FAF7F51.79:1
Large Text Only (Fail)

Related Palettes in Ocean

Explore Ocean
#0F172ACopy
#1E293BCopy
#2563EBCopy
#38BDF8Copy
#F8FAFCCopy
cp-featured-01Technology
SaaS Velocity Blue
TechModernCool
#020B14Copy
#06283DCopy
#1363DFCopy
#47B5FFCopy
#DFF6FFCopy
cp-featured-08Ocean
Marianas Deep Sea
OceanCool
#005F73Copy
#0A9396Copy
#94D2BDCopy
#E9D8A6Copy
#EE9B00Copy
cp-featured-13Ocean
Caribbean Reef Shallows
OceanFresh
#314E35Copy
#588157Copy
#A3B18ACopy
#FFE6A7Copy
#DDA15ECopy
cp-featured-18Food
Matcha Yuzu Delight
FoodCleanFresh