Tide Canvas

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

#Ocean#Cool#Fresh

Open in Generator

COLOR 1

#6F5A18

Antique Bronze

COLOR 2

#C7D21A

Acid Green

COLOR 3

#A8E363

Yellow Green

COLOR 4

#B4A5F2

Wisteria Pastel

COLOR 5

#F8F5FA

Ghost White

Color Values & Codes

HEX · RGB · HSL

Antique Bronze

#6F5A18

rgb(111, 90, 24)hsl(46, 64%, 26%)Color details →

Acid Green

#C7D21A

rgb(199, 210, 26)hsl(64, 78%, 46%)Color details →

Yellow Green

#A8E363

rgb(168, 227, 99)hsl(88, 70%, 64%)Color details →

Wisteria Pastel

#B4A5F2

rgb(180, 165, 242)hsl(252, 75%, 80%)Color details →

Ghost White

#F8F5FA

rgb(248, 245, 250)hsl(276, 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: #6F5A18;
  --color-2: #C7D21A;
  --color-3: #A8E363;
  --color-4: #B4A5F2;
  --color-5: #F8F5FA;
}

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

#6F5A18 on #B4A5F23.05:1

Large Text Only (Pass)

Sample Text

#6F5A18 on #F8F5FA6.17:1

Normal Text AA Pass

Sample Text

#C7D21A on #B4A5F21.32:1

Large Text Only (Fail)

Sample Text

#C7D21A on #F8F5FA1.53:1

Large Text Only (Fail)

Sample Text

#A8E363 on #B4A5F21.44:1

Large Text Only (Fail)

Sample Text

#A8E363 on #F8F5FA1.40: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