What are the hex codes in the Aqua Pine & Gunmetal palette?

The Aqua Pine & Gunmetal color palette consists of Gunmetal #004046, Pine #007375, Dusty Blue #81B4B1, Fog #D6D5CE.

How should I use the Aqua Pine & Gunmetal palette on a website?

Use Fog #D6D5CE as the background, Gunmetal #004046 for text, Pine #007375 for buttons and links, and Dusty Blue #81B4B1 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Gunmetal on Fog at 7.83:1.

Which colors in Aqua Pine & Gunmetal have enough contrast for text?

The highest-contrast pair is #004046 on #D6D5CE with a ratio of 7.83:1, which passes WCAG AA for normal text.

#004046Gunmetal

#007375Pine

#81B4B1Dusty Blue

#D6D5CEFog

Aqua Pine & Gunmetal color palette

Modern Muted Cold Minimal Teal

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Gunmetal	`#004046`	`rgb(0, 64, 70)`	`hsl(185, 100%, 14%)`	`oklch(33.9% 0.058 205)`
Pine	`#007375`	`rgb(0, 115, 117)`	`hsl(181, 100%, 23%)`	`oklch(50.4% 0.086 197)`
Dusty Blue	`#81B4B1`	`rgb(129, 180, 177)`	`hsl(176, 25%, 61%)`	`oklch(73.3% 0.054 191)`
Fog	`#D6D5CE`	`rgb(214, 213, 206)`	`hsl(53, 9%, 82%)`	`oklch(87.2% 0.010 100)`

Why it works and how to use it

Aqua Pine & Gunmetal is a monochromatic color palette tagged modern, muted, cold. A monochromatic set: the same hue family from Gunmetal down to Fog. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.

With 3 chromatic colors, Pine takes the lead while the rest support. Lightness runs from 14% to 82%. Well suited to websites, presentations and branding.

Background: Fog (#D6D5CE) is the lightest color, so it belongs on large surfaces.
Text: Gunmetal (#004046) on #D6D5CE gives 7.83:1, passing WCAG AAA.
Primary: Pine (#007375) is the most saturated mid-tone; use it for buttons and links (3.85:1 against the background, fine for UI elements).
Accent: Dusty Blue (#81B4B1) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Gunmetal on Fog at 7.83:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Aqua Pine & Gunmetal

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

#004046

#007375

#81B4B1

#D6D5CE

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
`#004046` on `#D6D5CE`	Aa	7.83:1	AAA
`#004046` on `#81B4B1`	Aa	4.99:1	AA
`#007375` on `#D6D5CE`	Aa	3.85:1	AA large only
`#007375` on `#81B4B1`	Aa	2.45:1	Fail
`#004046` on `#007375`	Aa	2.04:1	Fail
`#81B4B1` on `#D6D5CE`	Aa	1.57:1	Fail

Similar palettes 24 more in this mood