What are the hex codes in the Calm Brass & Iron palette?

The Calm Brass & Iron color palette consists of Obsidian #0B0A12, Iron #393751, Brass #A2AB00, Lavender #ECE9FE.

How should I use the Calm Brass & Iron palette on a website?

Use Lavender #ECE9FE as the background, Obsidian #0B0A12 for text, Brass #A2AB00 for buttons and links, and Iron #393751 for accents. 4 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Lavender at 16.55:1.

Which colors in Calm Brass & Iron have enough contrast for text?

The highest-contrast pair is #0B0A12 on #ECE9FE with a ratio of 16.55:1, which passes WCAG AA for normal text.

#0B0A12Obsidian

#393751Iron

#A2AB00Brass

#ECE9FELavender

Calm Brass & Iron color palette

Dark Minimal Black White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Obsidian	`#0B0A12`	`rgb(11, 10, 18)`	`hsl(248, 29%, 5%)`	`oklch(15.0% 0.017 290)`
Iron	`#393751`	`rgb(57, 55, 81)`	`hsl(245, 19%, 27%)`	`oklch(35.0% 0.045 287)`
Brass	`#A2AB00`	`rgb(162, 171, 0)`	`hsl(63, 100%, 34%)`	`oklch(71.0% 0.159 114)`
Lavender	`#ECE9FE`	`rgb(236, 233, 254)`	`hsl(249, 91%, 95%)`	`oklch(94.3% 0.028 292)`

Why it works and how to use it

Calm Brass & Iron is a complementary color palette tagged dark, minimal, black. Iron and Brass sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. Neither washed out nor loud, it adapts to most contexts. Warm and cool hues are mixed, which adds depth.

Two of the four colors are near-neutral, which leaves room for Brass to lead. Lightness runs from 5% to 95%. Well suited to websites, presentations and branding.

Background: Lavender (#ECE9FE) is the lightest color, so it belongs on large surfaces.
Text: Obsidian (#0B0A12) on #ECE9FE gives 16.55:1, passing WCAG AAA.
Primary: Brass (#A2AB00) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Iron (#393751) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Calm Brass & Iron

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

#0B0A12

#393751

#A2AB00

#ECE9FE

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
`#0B0A12` on `#ECE9FE`	Aa	16.55:1	AAA
`#393751` on `#ECE9FE`	Aa	9.6:1	AAA
`#0B0A12` on `#A2AB00`	Aa	7.84:1	AAA
`#393751` on `#A2AB00`	Aa	4.55:1	AA
`#A2AB00` on `#ECE9FE`	Aa	2.11:1	Fail
`#0B0A12` on `#393751`	Aa	1.72:1	Fail

Similar palettes 24 more in this mood