What are the hex codes in the Emerald Emerald & Gunmetal palette?

The Emerald Emerald & Gunmetal color palette consists of Obsidian #020306, Gunmetal #2C3541, Emerald #00CB90, Fog #CBD2D8.

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

Use Fog #CBD2D8 as the background, Obsidian #020306 for text, Emerald #00CB90 for buttons and links, and Gunmetal #2C3541 for accents. 4 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Fog at 13.5:1.

Which colors in Emerald Emerald & Gunmetal have enough contrast for text?

The highest-contrast pair is #020306 on #CBD2D8 with a ratio of 13.5:1, which passes WCAG AA for normal text.

#020306Obsidian

#2C3541Gunmetal

#00CB90Emerald

#CBD2D8Fog

Emerald Emerald & Gunmetal color palette

Dark Minimal Black Gray Green

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Obsidian	`#020306`	`rgb(2, 3, 6)`	`hsl(225, 50%, 2%)`	`oklch(9.7% 0.013 265)`
Gunmetal	`#2C3541`	`rgb(44, 53, 65)`	`hsl(214, 19%, 21%)`	`oklch(32.6% 0.025 256)`
Emerald	`#00CB90`	`rgb(0, 203, 144)`	`hsl(163, 100%, 40%)`	`oklch(74.5% 0.160 164)`
Fog	`#CBD2D8`	`rgb(203, 210, 216)`	`hsl(208, 14%, 82%)`	`oklch(86.0% 0.011 244)`

Why it works and how to use it

Emerald Emerald & Gunmetal is a dark, analogous color palette tagged dark, minimal, black. Analogous neighbors on the wheel (Gunmetal, Emerald) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.

The palette holds together thanks to its analogous hue relationship and a strong light-to-dark ladder (82% down to 2% lightness). A natural fit for dark-mode interfaces and gaming.

Background: Fog (#CBD2D8) is the lightest color, so it belongs on large surfaces.
Text: Obsidian (#020306) on #CBD2D8 gives 13.5:1, passing WCAG AAA.
Primary: Emerald (#00CB90) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Gunmetal (#2C3541) for highlights, badges and hover states.

4 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Fog at 13.5:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Emerald Emerald & 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

#020306

#2C3541

#00CB90

#CBD2D8

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
`#020306` on `#CBD2D8`	Aa	13.5:1	AAA
`#020306` on `#00CB90`	Aa	9.77:1	AAA
`#2C3541` on `#CBD2D8`	Aa	8.12:1	AAA
`#2C3541` on `#00CB90`	Aa	5.88:1	AA
`#020306` on `#2C3541`	Aa	1.66:1	Fail
`#00CB90` on `#CBD2D8`	Aa	1.38:1	Fail

Similar palettes 24 more in this mood