What are the hex codes in the Bold Pineapple & Cyan palette?

The Bold Pineapple & Cyan color palette consists of Cyan #00B8C3, Pineapple #FFE66D, Turquoise #4ECDC4, Ivory #F7FFF7.

How should I use the Bold Pineapple & Cyan palette on a website?

Use Ivory #F7FFF7 as the background, Cyan #00B8C3 for text, Pineapple #FFE66D for buttons and links, and Turquoise #4ECDC4 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Bold Pineapple & Cyan have enough contrast for text?

The highest-contrast pair is #00B8C3 on #F7FFF7 with a ratio of 2.38:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#00B8C3Cyan

#FFE66DPineapple

#4ECDC4Turquoise

#F7FFF7Ivory

Bold Pineapple & Cyan color palette

Happy Teal Yellow White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Cyan	`#00B8C3`	`rgb(0, 184, 195)`	`hsl(183, 100%, 38%)`	`oklch(71.3% 0.121 202)`
Pineapple	`#FFE66D`	`rgb(255, 230, 109)`	`hsl(50, 100%, 71%)`	`oklch(92.2% 0.143 98)`
Turquoise	`#4ECDC4`	`rgb(78, 205, 196)`	`hsl(176, 56%, 55%)`	`oklch(77.6% 0.112 189)`
Ivory	`#F7FFF7`	`rgb(247, 255, 247)`	`hsl(120, 100%, 98%)`	`oklch(99.2% 0.013 145)`

Why it works and how to use it

Bold Pineapple & Cyan is a vivid complementary color palette tagged happy, teal, yellow. Cyan and Turquoise 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, Pineapple takes the lead while the rest support. Lightness runs from 38% to 98%. Well suited to websites, presentations and branding.

Background: Ivory (#F7FFF7) is the lightest color, so it belongs on large surfaces.
Text: Cyan (#00B8C3) on #F7FFF7 gives 2.38:1, so pair it with a darker neutral for body copy.
Primary: Pineapple (#FFE66D) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Turquoise (#4ECDC4) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

BrandFeaturesPricingBlogGet started

Design faster with Bold Pineapple & Cyan

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

#00B8C3

#FFE66D

#4ECDC4

#F7FFF7

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
`#00B8C3` on `#F7FFF7`	Aa	2.38:1	Fail
`#00B8C3` on `#FFE66D`	Aa	1.94:1	Fail
`#4ECDC4` on `#F7FFF7`	Aa	1.9:1	Fail
`#FFE66D` on `#4ECDC4`	Aa	1.55:1	Fail
`#00B8C3` on `#4ECDC4`	Aa	1.26:1	Fail
`#FFE66D` on `#F7FFF7`	Aa	1.23:1	Fail

Similar palettes 24 more in this mood