#007728Fern
#5B6236Juniper
#D9D2B0Oat
#F6F3E9Linen

Fern & Juniper Tale color palette

Color codes click any value to copy

SwatchNameHEXRGBHSLOKLCH
Fern#007728rgb(0, 119, 40)hsl(140, 100%, 23%)oklch(49.6% 0.148 147)
Juniper#5B6236rgb(91, 98, 54)hsl(70, 29%, 30%)oklch(47.9% 0.065 116)
Oat#D9D2B0rgb(217, 210, 176)hsl(50, 35%, 77%)oklch(86.1% 0.046 98)
Linen#F6F3E9rgb(246, 243, 233)hsl(46, 42%, 94%)oklch(96.4% 0.014 93)

Why it works and how to use it

Fern & Juniper Tale is a split color palette tagged modern, green, white. The hues span about 94°, enough contrast to create a focal point without the harshness of true complements. Neither washed out nor loud, it adapts to most contexts. The overall temperature is warm.

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

  • Background: Linen (#F6F3E9) is the lightest color, so it belongs on large surfaces.
  • Text: Juniper (#5B6236) on #F6F3E9 gives 5.83:1, passing WCAG AA.
  • Primary: Fern (#007728) is the most saturated mid-tone; use it for buttons and links (5.15:1 against the background, fine for UI elements).
  • Accent: Oat (#D9D2B0) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Fern & Juniper Tale

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
Card title
Card title
Roles are assigned by lightness.

Color blindness simulation

#007728
#5B6236
#D9D2B0
#F6F3E9

Color-blind check: under protanopia and deuteranopia, Fern and Juniper become hard to tell apart, so do not rely on that pair alone to carry meaning.

Palette card

Fern & Juniper Tale color palette card: Fern #007728, Juniper #5B6236, Oat #D9D2B0, Linen #F6F3E9
Save or share Fern & Juniper Tale as an image with its hex codes.

Contrast check WCAG ratios between palette colors

PairSampleRatioLevel
#5B6236 on #F6F3E9Aa5.83:1AA
#007728 on #F6F3E9Aa5.15:1AA
#5B6236 on #D9D2B0Aa4.25:1AA large only
#007728 on #D9D2B0Aa3.76:1AA large only
#D9D2B0 on #F6F3E9Aa1.37:1Fail
#007728 on #5B6236Aa1.13:1Fail

Similar palettes 24 more in this mood