What are the hex codes in the Olive & Teal Shore palette?

The Olive & Teal Shore color palette consists of Olive #736F00, Teal #008F72, Olive #938F00, Frost #E3F6EF.

How should I use the Olive & Teal Shore palette on a website?

Use Frost #E3F6EF as the background, Olive #736F00 for text, Teal #008F72 for buttons and links, and Olive #938F00 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Olive on Frost at 4.67:1.

Which colors in Olive & Teal Shore have enough contrast for text?

The highest-contrast pair is #736F00 on #E3F6EF with a ratio of 4.67:1, which passes WCAG AA for normal text.

#736F00Olive

#008F72Teal

#938F00Olive

#E3F6EFFrost

Olive & Teal Shore color palette

Tropical Summer Green Teal White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Olive	`#736F00`	`rgb(115, 111, 0)`	`hsl(58, 100%, 23%)`	`oklch(52.8% 0.113 107)`
Teal	`#008F72`	`rgb(0, 143, 114)`	`hsl(168, 100%, 28%)`	`oklch(57.9% 0.113 172)`
Olive	`#938F00`	`rgb(147, 143, 0)`	`hsl(58, 100%, 29%)`	`oklch(63.3% 0.136 108)`
Frost	`#E3F6EF`	`rgb(227, 246, 239)`	`hsl(158, 51%, 93%)`	`oklch(95.7% 0.022 172)`

Why it works and how to use it

Olive & Teal Shore is a vivid split color palette tagged tropical, summer, green. The hues span about 110°, enough contrast to create a focal point without the harshness of true complements. These are bold, punchy colors that need generous white space around them. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Teal takes the lead while the rest support. Lightness runs from 23% to 93%. Well suited to websites, presentations and branding.

Background: Frost (#E3F6EF) is the lightest color, so it belongs on large surfaces.
Text: Olive (#736F00) on #E3F6EF gives 4.67:1, passing WCAG AA.
Primary: Teal (#008F72) is the most saturated mid-tone; use it for buttons and links (3.61:1 against the background, fine for UI elements).
Accent: Olive (#938F00) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Olive on Frost at 4.67:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Olive & Teal Shore

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

#736F00

#008F72

#938F00

#E3F6EF

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
`#736F00` on `#E3F6EF`	Aa	4.67:1	AA
`#008F72` on `#E3F6EF`	Aa	3.61:1	AA large only
`#938F00` on `#E3F6EF`	Aa	3.03:1	AA large only
`#736F00` on `#938F00`	Aa	1.54:1	Fail
`#736F00` on `#008F72`	Aa	1.29:1	Fail
`#008F72` on `#938F00`	Aa	1.19:1	Fail

Similar palettes 24 more in this mood