What are the hex codes in the Bold Cadet & Storm palette?

The Bold Cadet & Storm color palette consists of Gunmetal #21393A, Storm #446F71, Cadet #70ACAF, Ice #D5ECEC.

How should I use the Bold Cadet & Storm palette on a website?

Use Ice #D5ECEC as the background, Gunmetal #21393A for text, Cadet #70ACAF for buttons and links, and Storm #446F71 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Gunmetal on Ice at 9.96:1.

Which colors in Bold Cadet & Storm have enough contrast for text?

The highest-contrast pair is #21393A on #D5ECEC with a ratio of 9.96:1, which passes WCAG AA for normal text.

#21393AGunmetal

#446F71Storm

#70ACAFCadet

#D5ECECIce

Bold Cadet & Storm color palette

Gradient Muted Minimal Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Gunmetal	`#21393A`	`rgb(33, 57, 58)`	`hsl(182, 27%, 18%)`	`oklch(32.5% 0.030 199)`
Storm	`#446F71`	`rgb(68, 111, 113)`	`hsl(183, 25%, 35%)`	`oklch(51.1% 0.048 200)`
Cadet	`#70ACAF`	`rgb(112, 172, 175)`	`hsl(183, 28%, 56%)`	`oklch(70.5% 0.062 200)`
Ice	`#D5ECEC`	`rgb(213, 236, 236)`	`hsl(180, 38%, 88%)`	`oklch(92.6% 0.024 197)`

Why it works and how to use it

Bold Cadet & Storm is a monochromatic color palette tagged gradient, muted, minimal. A monochromatic set: the same hue family from Gunmetal down to Ice. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.

With 4 chromatic colors, Cadet takes the lead while the rest support. Lightness runs from 18% to 88%. Well suited to websites, presentations and branding.

Background: Ice (#D5ECEC) is the lightest color, so it belongs on large surfaces.
Text: Gunmetal (#21393A) on #D5ECEC gives 9.96:1, passing WCAG AAA.
Primary: Cadet (#70ACAF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Storm (#446F71) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Gunmetal on Ice at 9.96:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Bold Cadet & Storm

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

#21393A

#446F71

#70ACAF

#D5ECEC

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
`#21393A` on `#D5ECEC`	Aa	9.96:1	AAA
`#21393A` on `#70ACAF`	Aa	4.8:1	AA
`#446F71` on `#D5ECEC`	Aa	4.53:1	AA
`#21393A` on `#446F71`	Aa	2.2:1	Fail
`#446F71` on `#70ACAF`	Aa	2.18:1	Fail
`#70ACAF` on `#D5ECEC`	Aa	2.08:1	Fail

Similar palettes 24 more in this mood