Cypress
#585d40
Slightly cooler olive green for contrast UI
About Cypress
Cypress (#585d40) looks like green ink that got dialed back a touch and dried down on warm paper. It's not the muddy, vegetable-leaning quiet of Broccoli Green, and it doesn't carry the brown-tethered steadiness of Bancha. This one sits in the darker end, but keeps its undertone more olive than gray-brown, so the page feels grounded without turning earthy.
I use packaging for heritage and natural goods when I want color that reads confident next to creams, kraft, and muted browns. It's great for editorial layout backgrounds where you need contrast that stays calm behind long copy, and it works as UI panels or filter bars in product-heavy sites that should not compete with the content. Compared to Eat Your Greens, Cypress is less clean and less hydrated, so it won't feel fresh and light.
Quick pairing note: if you pair it with very cool grays, it can look a bit flat. I'd warm the neutrals slightly to keep the olive character alive.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.