What are the hex codes in the Turquoise Tide palette?

The Turquoise Tide color palette consists of Pine #006D77, Ash #83C5BE, Smoke #EDF6F9, Almond #FFDDD2.

How should I use the Turquoise Tide palette on a website?

Use Smoke #EDF6F9 as the background, Pine #006D77 for text, Almond #FFDDD2 for buttons and links, and Ash #83C5BE for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Pine on Smoke at 5.54:1.

Which colors in Turquoise Tide have enough contrast for text?

The highest-contrast pair is #006D77 on #EDF6F9 with a ratio of 5.54:1, which passes WCAG AA for normal text.

#006D77Pine

#83C5BEAsh

#EDF6F9Smoke

#FFDDD2Almond

Turquoise Tide color palette

Ocean Muted Cold Teal Gray White Beige

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Pine	`#006D77`	`rgb(0, 109, 119)`	`hsl(185, 100%, 23%)`	`oklch(48.8% 0.084 206)`
Ash	`#83C5BE`	`rgb(131, 197, 190)`	`hsl(174, 36%, 64%)`	`oklch(77.7% 0.068 187)`
Smoke	`#EDF6F9`	`rgb(237, 246, 249)`	`hsl(195, 50%, 95%)`	`oklch(96.7% 0.010 220)`
Almond	`#FFDDD2`	`rgb(255, 221, 210)`	`hsl(15, 100%, 91%)`	`oklch(92.3% 0.041 39)`

Why it works and how to use it

Turquoise Tide is a vivid complementary color palette tagged ocean, muted, cold. Pine and Almond sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. These are bold, punchy colors that need generous white space around them. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Almond takes the lead while the rest support. Lightness runs from 23% to 95%. Well suited to websites, presentations and branding.

Background: Smoke (#EDF6F9) is the lightest color, so it belongs on large surfaces.
Text: Pine (#006D77) on #EDF6F9 gives 5.54:1, passing WCAG AA.
Primary: Almond (#FFDDD2) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Ash (#83C5BE) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Pine on Smoke at 5.54:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Turquoise Tide

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#006D77

#83C5BE

#EDF6F9

#FFDDD2

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#006D77` on `#EDF6F9`	Aa	5.54:1	AA
`#006D77` on `#FFDDD2`	Aa	4.78:1	AA
`#006D77` on `#83C5BE`	Aa	3.1:1	AA large only
`#83C5BE` on `#EDF6F9`	Aa	1.79:1	Fail
`#83C5BE` on `#FFDDD2`	Aa	1.55:1	Fail
`#EDF6F9` on `#FFDDD2`	Aa	1.16:1	Fail

Similar palettes 27 more in this mood