What are the hex codes in the Carrot & Teal Breeze palette?

The Carrot & Teal Breeze color palette consists of Gunmetal #003628, Teal #008074, Carrot #DD8D4C, Pearl #E9E2CF.

How should I use the Carrot & Teal Breeze palette on a website?

Use Pearl #E9E2CF as the background, Gunmetal #003628 for text, Teal #008074 for buttons and links, and Carrot #DD8D4C for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Gunmetal on Pearl at 10.42:1.

Which colors in Carrot & Teal Breeze have enough contrast for text?

The highest-contrast pair is #003628 on #E9E2CF with a ratio of 10.42:1, which passes WCAG AA for normal text.

#003628Gunmetal

#008074Teal

#DD8D4CCarrot

#E9E2CFPearl

Carrot & Teal Breeze color palette

Modern Gray Teal Orange

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Gunmetal	`#003628`	`rgb(0, 54, 40)`	`hsl(164, 100%, 11%)`	`oklch(29.6% 0.059 170)`
Teal	`#008074`	`rgb(0, 128, 116)`	`hsl(174, 100%, 25%)`	`oklch(53.9% 0.096 183)`
Carrot	`#DD8D4C`	`rgb(221, 141, 76)`	`hsl(27, 68%, 58%)`	`oklch(71.3% 0.126 58)`
Pearl	`#E9E2CF`	`rgb(233, 226, 207)`	`hsl(44, 37%, 86%)`	`oklch(91.3% 0.026 90)`

Why it works and how to use it

Carrot & Teal Breeze is a vivid complementary color palette tagged modern, gray, teal. Gunmetal and Pearl sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. These are bold, punchy colors that need generous white space around them. Warm and cool hues are mixed, which adds depth.

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

Background: Pearl (#E9E2CF) is the lightest color, so it belongs on large surfaces.
Text: Gunmetal (#003628) on #E9E2CF gives 10.42:1, passing WCAG AAA.
Primary: Teal (#008074) is the most saturated mid-tone; use it for buttons and links (3.74:1 against the background, fine for UI elements).
Accent: Carrot (#DD8D4C) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Carrot & Teal Breeze

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

#003628

#008074

#DD8D4C

#E9E2CF

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
`#003628` on `#E9E2CF`	Aa	10.42:1	AAA
`#003628` on `#DD8D4C`	Aa	5.13:1	AA
`#008074` on `#E9E2CF`	Aa	3.74:1	AA large only
`#003628` on `#008074`	Aa	2.78:1	Fail
`#DD8D4C` on `#E9E2CF`	Aa	2.03:1	Fail
`#008074` on `#DD8D4C`	Aa	1.84:1	Fail

Similar palettes 24 more in this mood