Cypress

#585d40

Slightly cooler olive green for contrast UI

Save
Share

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 , and it doesn't carry the brown-tethered steadiness of . 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 , 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.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
6.87:1AAAAA Large

On Gray 100 #f5f5f5

Aa
6.31:1AAAAA Large

On Gray 900 #18181b

Aa
2.58:1Fail

On Black #000000

Aa
3.05:1FailAA Large

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

Create a gradient with Cypress

Open the generator with this color pre-loaded.

Start creating