What are the hex codes in the Citrus Baby Blue & Cadet palette?

The Citrus Baby Blue & Cadet color palette consists of Evergreen #1B4D3E, Cadet #2A9D8F, Baby Blue #99B5FF, Beige #FDF6E3.

How should I use the Citrus Baby Blue & Cadet palette on a website?

Use Beige #FDF6E3 as the background, Evergreen #1B4D3E for text, Baby Blue #99B5FF for buttons and links, and Cadet #2A9D8F for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Evergreen on Beige at 8.94:1.

Which colors in Citrus Baby Blue & Cadet have enough contrast for text?

The highest-contrast pair is #1B4D3E on #FDF6E3 with a ratio of 8.94:1, which passes WCAG AA for normal text.

#1B4D3EEvergreen

#2A9D8FCadet

#99B5FFBaby Blue

#FDF6E3Beige

Citrus Baby Blue & Cadet color palette

Cold Teal Blue White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Evergreen	`#1B4D3E`	`rgb(27, 77, 62)`	`hsl(162, 48%, 20%)`	`oklch(38.2% 0.060 170)`
Cadet	`#2A9D8F`	`rgb(42, 157, 143)`	`hsl(173, 58%, 39%)`	`oklch(63.0% 0.101 183)`
Baby Blue	`#99B5FF`	`rgb(153, 181, 255)`	`hsl(224, 100%, 80%)`	`oklch(78.1% 0.111 268)`
Beige	`#FDF6E3`	`rgb(253, 246, 227)`	`hsl(44, 87%, 94%)`	`oklch(97.4% 0.026 90)`

Why it works and how to use it

Citrus Baby Blue & Cadet is a vivid complementary color palette tagged cold, teal, blue. Evergreen 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, Baby Blue takes the lead while the rest support. Lightness runs from 20% to 94%. Well suited to websites, presentations and branding.

Background: Beige (#FDF6E3) is the lightest color, so it belongs on large surfaces.
Text: Evergreen (#1B4D3E) on #FDF6E3 gives 8.94:1, passing WCAG AAA.
Primary: Baby Blue (#99B5FF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cadet (#2A9D8F) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Evergreen on Beige at 8.94:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Citrus Baby Blue & Cadet

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

#1B4D3E

#2A9D8F

#99B5FF

#FDF6E3

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
`#1B4D3E` on `#FDF6E3`	Aa	8.94:1	AAA
`#1B4D3E` on `#99B5FF`	Aa	4.78:1	AA
`#2A9D8F` on `#FDF6E3`	Aa	3.08:1	AA large only
`#1B4D3E` on `#2A9D8F`	Aa	2.9:1	Fail
`#99B5FF` on `#FDF6E3`	Aa	1.87:1	Fail
`#2A9D8F` on `#99B5FF`	Aa	1.65:1	Fail

Similar palettes 24 more in this mood