Pine Needle

#334d41

Soft, mossy green for calmer, less smoky blocks

Save
Share

About Pine Needle

I think of Pine Needle as the green you notice on a cut stem, not the canopy. It's crisp and mossy at the same time, with a cool, steady undertone that keeps it from drifting into the olive-gray direction of or the softer, sun-warmed earthiness of .

For UI, it's my go-to when you want a green header or divider that stays clean and legible without feeling formal. It reads a touch more muted than , but it doesn't lose its green identity, so it works hard in dashboards and finance apps for section bars, status pills, and map legend blocks on top of mixed imagery. I also like it on label systems for forestry, seed, and sustainability reporting where you need "field accurate" but not brown-leaning.

Pair it with warm creams or light tan so the cool bias doesn't look sterile. If you go too gray, it can tighten up and feel overly controlled, especially on large filled areas.

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
9.22:1AAA

On Gray 100 #f5f5f5

Aa
8.45:1AAA

On Gray 900 #18181b

Aa
1.92:1Fail

On Black #000000

Aa
2.28:1Fail

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

#33534b
#3a533d
#36482f
#424c4a

Create a gradient with Pine Needle

Open the generator with this color pre-loaded.

Start creating