What are the hex codes in the Cadet & Charcoal Story palette?

The Cadet & Charcoal Story color palette consists of Charcoal #004F4E, Cadet #49B2AC, Celadon #BCDEBE, Frost #E4F1FF.

How should I use the Cadet & Charcoal Story palette on a website?

Use Frost #E4F1FF as the background, Charcoal #004F4E for text, Cadet #49B2AC for buttons and links, and Celadon #BCDEBE for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Charcoal on Frost at 8.22:1.

Which colors in Cadet & Charcoal Story have enough contrast for text?

The highest-contrast pair is #004F4E on #E4F1FF with a ratio of 8.22:1, which passes WCAG AA for normal text.

#004F4ECharcoal

#49B2ACCadet

#BCDEBECeladon

#E4F1FFFrost

Cadet & Charcoal Story color palette

Muted Cold Teal White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Charcoal	`#004F4E`	`rgb(0, 79, 78)`	`hsl(179, 100%, 15%)`	`oklch(38.7% 0.066 193)`
Cadet	`#49B2AC`	`rgb(73, 178, 172)`	`hsl(177, 42%, 49%)`	`oklch(70.1% 0.096 190)`
Celadon	`#BCDEBE`	`rgb(188, 222, 190)`	`hsl(124, 34%, 80%)`	`oklch(86.7% 0.057 147)`
Frost	`#E4F1FF`	`rgb(228, 241, 255)`	`hsl(211, 100%, 95%)`	`oklch(95.3% 0.023 250)`

Why it works and how to use it

Cadet & Charcoal Story is a vivid analogous color palette tagged muted, cold, teal. Analogous neighbors on the wheel (Charcoal, Cadet, Celadon) give it a natural, low-tension flow. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is cool.

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

Background: Frost (#E4F1FF) is the lightest color, so it belongs on large surfaces.
Text: Charcoal (#004F4E) on #E4F1FF gives 8.22:1, passing WCAG AAA.
Primary: Cadet (#49B2AC) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Celadon (#BCDEBE) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Cadet & Charcoal Story

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

#004F4E

#49B2AC

#BCDEBE

#E4F1FF

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
`#004F4E` on `#E4F1FF`	Aa	8.22:1	AAA
`#004F4E` on `#BCDEBE`	Aa	6.43:1	AA
`#004F4E` on `#49B2AC`	Aa	3.7:1	AA large only
`#49B2AC` on `#E4F1FF`	Aa	2.22:1	Fail
`#49B2AC` on `#BCDEBE`	Aa	1.74:1	Fail
`#BCDEBE` on `#E4F1FF`	Aa	1.28:1	Fail

Similar palettes 24 more in this mood