What are the hex codes in the Avocado & Coffee Vibe palette?

The Avocado & Coffee Vibe color palette consists of Gunmetal #2B2B2B, Coffee #6B4E3D, Avocado #677900, Linen #F4EFEA.

How should I use the Avocado & Coffee Vibe palette on a website?

Use Linen #F4EFEA as the background, Gunmetal #2B2B2B for text, Avocado #677900 for buttons and links, and Coffee #6B4E3D for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Gunmetal on Linen at 12.39:1.

Which colors in Avocado & Coffee Vibe have enough contrast for text?

The highest-contrast pair is #2B2B2B on #F4EFEA with a ratio of 12.39:1, which passes WCAG AA for normal text.

#2B2B2BGunmetal

#6B4E3DCoffee

#677900Avocado

#F4EFEALinen

Avocado & Coffee Vibe color palette

Dark Minimal Gray Brown White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Gunmetal	`#2B2B2B`	`rgb(43, 43, 43)`	`hsl(0, 0%, 17%)`	`oklch(28.9% 0.000 0)`
Coffee	`#6B4E3D`	`rgb(107, 78, 61)`	`hsl(22, 27%, 33%)`	`oklch(45.0% 0.047 52)`
Avocado	`#677900`	`rgb(103, 121, 0)`	`hsl(69, 100%, 24%)`	`oklch(54.2% 0.128 120)`
Linen	`#F4EFEA`	`rgb(244, 239, 234)`	`hsl(30, 31%, 94%)`	`oklch(95.5% 0.009 68)`

Why it works and how to use it

Avocado & Coffee Vibe is an analogous color palette tagged dark, minimal, gray. Analogous neighbors on the wheel (Coffee, Avocado, Linen) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

It works because the lightness range is wide (17% to 94%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.

Background: Linen (#F4EFEA) is the lightest color, so it belongs on large surfaces.
Text: Gunmetal (#2B2B2B) on #F4EFEA gives 12.39:1, passing WCAG AAA.
Primary: Avocado (#677900) is the most saturated mid-tone; use it for buttons and links (4.26:1 against the background, fine for UI elements).
Accent: Coffee (#6B4E3D) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Avocado & Coffee Vibe

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

#2B2B2B

#6B4E3D

#677900

#F4EFEA

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
`#2B2B2B` on `#F4EFEA`	Aa	12.39:1	AAA
`#6B4E3D` on `#F4EFEA`	Aa	6.61:1	AA
`#677900` on `#F4EFEA`	Aa	4.26:1	AA large only
`#2B2B2B` on `#677900`	Aa	2.91:1	Fail
`#2B2B2B` on `#6B4E3D`	Aa	1.88:1	Fail
`#6B4E3D` on `#677900`	Aa	1.55:1	Fail

Similar palettes 24 more in this mood