What are the hex codes in the Pine Needle palette?

The Pine Needle color palette consists of Evergreen #1E3D2F, Juniper #3F6B4F, Sage #8DB58C, Linen #EEF3EA.

How should I use the Pine Needle palette on a website?

Use Linen #EEF3EA as the background, Evergreen #1E3D2F for text, Juniper #3F6B4F for buttons and links, and Sage #8DB58C for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Evergreen on Linen at 10.57:1.

Which colors in Pine Needle have enough contrast for text?

The highest-contrast pair is #1E3D2F on #EEF3EA with a ratio of 10.57:1, which passes WCAG AA for normal text.

#1E3D2FEvergreen

#3F6B4FJuniper

#8DB58CSage

#EEF3EALinen

Pine Needle color palette

Muted White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Evergreen	`#1E3D2F`	`rgb(30, 61, 47)`	`hsl(153, 34%, 18%)`	`oklch(33.1% 0.045 163)`
Juniper	`#3F6B4F`	`rgb(63, 107, 79)`	`hsl(142, 26%, 33%)`	`oklch(48.7% 0.067 155)`
Sage	`#8DB58C`	`rgb(141, 181, 140)`	`hsl(119, 22%, 63%)`	`oklch(73.3% 0.073 144)`
Linen	`#EEF3EA`	`rgb(238, 243, 234)`	`hsl(93, 27%, 94%)`	`oklch(95.8% 0.013 131)`

Why it works and how to use it

Pine Needle is an analogous color palette tagged muted, white. The hues stay within 60° of each other on the color wheel, which is why the palette feels cohesive rather than busy. Neither washed out nor loud, it adapts to most contexts.

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

Background: Linen (#EEF3EA) is the lightest color, so it belongs on large surfaces.
Text: Evergreen (#1E3D2F) on #EEF3EA gives 10.57:1, passing WCAG AAA.
Primary: Juniper (#3F6B4F) is the most saturated mid-tone; use it for buttons and links (5.44:1 against the background, fine for UI elements).
Accent: Sage (#8DB58C) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Evergreen on Linen at 10.57:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Pine Needle

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

#1E3D2F

#3F6B4F

#8DB58C

#EEF3EA

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
`#1E3D2F` on `#EEF3EA`	Aa	10.57:1	AAA
`#3F6B4F` on `#EEF3EA`	Aa	5.44:1	AA
`#1E3D2F` on `#8DB58C`	Aa	5.17:1	AA
`#3F6B4F` on `#8DB58C`	Aa	2.66:1	Fail
`#8DB58C` on `#EEF3EA`	Aa	2.04:1	Fail
`#1E3D2F` on `#3F6B4F`	Aa	1.94:1	Fail

Similar palettes 24 more in this mood