What are the hex codes in the Dusty Cyan & Coffee palette?

The Dusty Cyan & Coffee color palette consists of Coffee #6B4E1E, Cyan #00B8C4, Pearl #E8DCC0, Linen #F7F3EA.

How should I use the Dusty Cyan & Coffee palette on a website?

Use Linen #F7F3EA as the background, Coffee #6B4E1E for text, Cyan #00B8C4 for buttons and links, and Pearl #E8DCC0 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Coffee on Linen at 6.94:1.

Which colors in Dusty Cyan & Coffee have enough contrast for text?

The highest-contrast pair is #6B4E1E on #F7F3EA with a ratio of 6.94:1, which passes WCAG AA for normal text.

#6B4E1ECoffee

#00B8C4Cyan

#E8DCC0Pearl

#F7F3EALinen

Dusty Cyan & Coffee color palette

Modern Brown Teal Beige White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Coffee	`#6B4E1E`	`rgb(107, 78, 30)`	`hsl(37, 56%, 27%)`	`oklch(44.5% 0.075 77)`
Cyan	`#00B8C4`	`rgb(0, 184, 196)`	`hsl(184, 100%, 38%)`	`oklch(71.3% 0.121 203)`
Pearl	`#E8DCC0`	`rgb(232, 220, 192)`	`hsl(42, 47%, 83%)`	`oklch(89.7% 0.039 88)`
Linen	`#F7F3EA`	`rgb(247, 243, 234)`	`hsl(42, 45%, 94%)`	`oklch(96.5% 0.013 87)`

Why it works and how to use it

Dusty Cyan & Coffee is a complementary color palette tagged modern, brown, teal. Coffee and Linen 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.

With 4 chromatic colors, Cyan takes the lead while the rest support. Lightness runs from 27% to 94%. Well suited to websites, presentations and branding.

Background: Linen (#F7F3EA) is the lightest color, so it belongs on large surfaces.
Text: Coffee (#6B4E1E) on #F7F3EA gives 6.94:1, passing WCAG AA.
Primary: Cyan (#00B8C4) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Pearl (#E8DCC0) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Coffee on Linen at 6.94:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Dusty Cyan & Coffee

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

#6B4E1E

#00B8C4

#E8DCC0

#F7F3EA

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
`#6B4E1E` on `#F7F3EA`	Aa	6.94:1	AA
`#6B4E1E` on `#E8DCC0`	Aa	5.64:1	AA
`#6B4E1E` on `#00B8C4`	Aa	3.17:1	AA large only
`#00B8C4` on `#F7F3EA`	Aa	2.19:1	Fail
`#00B8C4` on `#E8DCC0`	Aa	1.78:1	Fail
`#E8DCC0` on `#F7F3EA`	Aa	1.23:1	Fail

Similar palettes 24 more in this mood