What are the hex codes in the Cool Bronze & Pine palette?

The Cool Bronze & Pine color palette consists of Gunmetal #003D3F, Pine #00757A, Bronze #D98A5E, Ice #C6F0F1.

How should I use the Cool Bronze & Pine palette on a website?

Use Ice #C6F0F1 as the background, Gunmetal #003D3F for text, Pine #00757A for buttons and links, and Bronze #D98A5E for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Gunmetal on Ice at 9.85:1.

Which colors in Cool Bronze & Pine have enough contrast for text?

The highest-contrast pair is #003D3F on #C6F0F1 with a ratio of 9.85:1, which passes WCAG AA for normal text.

#003D3FGunmetal

#00757APine

#D98A5EBronze

#C6F0F1Ice

Cool Bronze & Pine color palette

Modern Teal

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Gunmetal	`#003D3F`	`rgb(0, 61, 63)`	`hsl(182, 100%, 12%)`	`oklch(32.7% 0.056 198)`
Pine	`#00757A`	`rgb(0, 117, 122)`	`hsl(182, 100%, 24%)`	`oklch(51.1% 0.087 200)`
Bronze	`#D98A5E`	`rgb(217, 138, 94)`	`hsl(21, 62%, 61%)`	`oklch(70.6% 0.113 49)`
Ice	`#C6F0F1`	`rgb(198, 240, 241)`	`hsl(181, 61%, 86%)`	`oklch(92.6% 0.043 198)`

Why it works and how to use it

Cool Bronze & Pine is a vivid complementary color palette tagged modern, teal. Near-complementary hues (about 161° apart) make this a high-contrast, attention-grabbing combination. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Pine takes the lead while the rest support. Lightness runs from 12% to 86%. Well suited to websites, presentations and branding.

Background: Ice (#C6F0F1) is the lightest color, so it belongs on large surfaces.
Text: Gunmetal (#003D3F) on #C6F0F1 gives 9.85:1, passing WCAG AAA.
Primary: Pine (#00757A) is the most saturated mid-tone; use it for buttons and links (4.48:1 against the background, fine for UI elements).
Accent: Bronze (#D98A5E) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Cool Bronze & Pine

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

#003D3F

#00757A

#D98A5E

#C6F0F1

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
`#003D3F` on `#C6F0F1`	Aa	9.85:1	AAA
`#00757A` on `#C6F0F1`	Aa	4.48:1	AA large only
`#003D3F` on `#D98A5E`	Aa	4.45:1	AA large only
`#D98A5E` on `#C6F0F1`	Aa	2.21:1	Fail
`#003D3F` on `#00757A`	Aa	2.2:1	Fail
`#00757A` on `#D98A5E`	Aa	2.03:1	Fail

Similar palettes 24 more in this mood