ColorPaletteXYZ Logo
ColorPaletteXYZ
Palettes/Ocean

Current Wave

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

#Ocean#Cool#Fresh
Open in Generator
COLOR 1
#12753C
Tokiwa Evergreen
COLOR 2
#1ECD9D
Chrysoprase
COLOR 3
#67D1E0
Mizu Pale Aqua
COLOR 4
#F0A7B3
Peony Pink
COLOR 5
#F9F7F5
White Smoke

Color Values & Codes

HEX · RGB · HSL
rgb(18, 117, 60)hsl(145, 73%, 26%)Color details →
rgb(30, 205, 157)hsl(164, 74%, 46%)Color details →
rgb(103, 209, 224)hsl(187, 66%, 64%)Color details →
Peony Pink
#F0A7B3
rgb(240, 167, 179)hsl(350, 71%, 80%)Color details →
rgb(249, 247, 245)hsl(30, 25%, 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: #12753C;
  --color-2: #1ECD9D;
  --color-3: #67D1E0;
  --color-4: #F0A7B3;
  --color-5: #F9F7F5;
}

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
#12753C on #F0A7B32.99:1
Large Text Only (Fail)
Sample Text
#12753C on #F9F7F55.41:1
Normal Text AA Pass
Sample Text
#1ECD9D on #F0A7B31.06:1
Large Text Only (Fail)
Sample Text
#1ECD9D on #F9F7F51.91:1
Large Text Only (Fail)
Sample Text
#67D1E0 on #F0A7B31.08:1
Large Text Only (Fail)
Sample Text
#67D1E0 on #F9F7F51.67: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