What are the hex codes in the Citrine & Cyan Shore palette?

The Citrine & Cyan Shore color palette consists of Citrine #DAC607, Cadet #00A4B3, Cyan #00BFBF, Beige #DBF9CA.

How should I use the Citrine & Cyan Shore palette on a website?

Use Beige #DBF9CA as the background, Cadet #00A4B3 for text, Cyan #00BFBF for buttons and links, and Citrine #DAC607 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Citrine & Cyan Shore have enough contrast for text?

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

#DAC607Citrine

#00A4B3Cadet

#00BFBFCyan

#DBF9CABeige

Citrine & Cyan Shore color palette

Tropical Yellow Teal

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Citrine	`#DAC607`	`rgb(218, 198, 7)`	`hsl(54, 94%, 44%)`	`oklch(81.8% 0.170 102)`
Cadet	`#00A4B3`	`rgb(0, 164, 179)`	`hsl(185, 100%, 35%)`	`oklch(65.6% 0.112 206)`
Cyan	`#00BFBF`	`rgb(0, 191, 191)`	`hsl(180, 100%, 37%)`	`oklch(72.9% 0.124 195)`
Beige	`#DBF9CA`	`rgb(219, 249, 202)`	`hsl(98, 80%, 88%)`	`oklch(94.8% 0.069 134)`

Why it works and how to use it

Citrine & Cyan Shore is a vivid complementary color palette tagged tropical, yellow, teal. Citrine and Beige 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 4 chromatic colors, Cyan takes the lead while the rest support. Lightness runs from 35% to 88%. Well suited to websites, presentations and branding.

Background: Beige (#DBF9CA) is the lightest color, so it belongs on large surfaces.
Text: Cadet (#00A4B3) on #DBF9CA gives 2.65:1, so pair it with a darker neutral for body copy.
Primary: Cyan (#00BFBF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Citrine (#DAC607) 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 Citrine & Cyan 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

#DAC607

#00A4B3

#00BFBF

#DBF9CA

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
`#00A4B3` on `#DBF9CA`	Aa	2.65:1	Fail
`#00BFBF` on `#DBF9CA`	Aa	2:1	Fail
`#DAC607` on `#00A4B3`	Aa	1.73:1	Fail
`#DAC607` on `#DBF9CA`	Aa	1.53:1	Fail
`#00A4B3` on `#00BFBF`	Aa	1.32:1	Fail
`#DAC607` on `#00BFBF`	Aa	1.31:1	Fail

Similar palettes 24 more in this mood