Fern

HEX: #71BC78 | Modern Palette

On White
2.29:1
FAIL
On Black
9.17:1
PASS

Color Specifications

HEX
#71BC78
RGB
113, 188, 120
HSL
125°, 39% ,73%
CMYK
39.89, 0, 36.17, 26.27

About Fern

Fern (#71BC78) is a color with RGB(113, 188, 120) and HSL(125.6°, 39.89%, 73.73%). It is commonly associated with Calm moods. In design, it fits Cool styles and is suitable for Text, Logo, Print. Its complementary color is #BC71B5, which creates strong contrast. Its triadic palette includes #7871BC and #BC7871. The name comes from fearn (Old English).

  • HEX: #71BC78
  • RGB: 113, 188, 120
  • HSL: 125.6°, 39.89%, 73.73%
  • Mood: Calm
  • Style: Cool
  • Use case: Text, Logo, Print
  • Complementary color: #BC71B5
  • Triadic colors: #7871BC, #BC7871
  • The name comes from fearn (Old English).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.

Color Harmonies

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Shades & Tints

A seamless scale of #71BC78 from deepest shade to lightest tint.

Color Characteristics

Mood
Calm
Style
Cool
Use case
Text Logo Print

Accessibility Simulation

Deuteranopia #ABAB7A
Protanopia #B6B678
Tritanopia #7EB5B5
Achromatopsia #ABABAB

Frequently Asked Questions

Fern (#71BC78) is a color with RGB(113, 188, 120) and HSL(125.6°, 39.89%, 73.73%).

#71BC78 pairs strongly with #BC71B5 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#71BC78 is suitable for Text, Logo, Print and works well with Cool styles.

#71BC78 is commonly associated with Calm.

The name Fern is linked to fearn from Old English, meaning fern (plant).

Name, History & Etymology

Origin Word fearn
Meaning fern (plant)
Language Old English
First Recorded Use Old English Period

History

The word 'fern' has a long history in the English language, directly descending from the Old English 'fearn'. This Old English term itself has Germanic roots, related to similar words in Old High German (farn) and Old Norse (fagni). The Proto-Germanic root is reconstructed as *farną. The plant itself is ancient, and the word for it reflects this antiquity, remaining remarkably stable in form and meaning over centuries. It has consistently referred to the non-flowering vascular plants that reproduce via spores and typically have feathery fronds.

First Recorded Use

Before 1000 AD

Cultural Associations

Ferns are often associated with ancient forests, damp environments, and a sense of primeval nature. In some cultures, ferns have been linked to magic or hidden treasures, particularly the mythical 'fern seed' which was believed to grant invisibility or the ability to understand animal speech (though ferns reproduce by spores, not seeds). They are also popular ornamental plants, both indoors and in gardens, valued for their lush foliage and varied textures. The color 'fern green' is a common shade, reflecting the typical color of their fronds.

Similar Named Colors

Mantis #74C365 ΔE 4.84
Emerald #50C878 ΔE 4.91
Bud Green #7BB661 ΔE 4.95
Dollar Bill #85BB65 ΔE 5.55

Code Snippets

/* Background */
.element {
    background-color: #71BC78;
}

/* Text */
.element {
    color: #71BC78;
}

/* Border */
.element {
    border: 1px solid #71BC78;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #71BC78,
        #D7A1D2
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #71BC78,
        #D7A1D2
    );
}

// SCSS variable
$fern: #71BC78;

// With RGB channels (useful for rgba() usage)
$fern-r: 113;
$fern-g: 188;
$fern-b: 120;

// Usage
.element {
    background-color: $fern;
    color: rgba($fern-r, $fern-g, $fern-b, 0.8);
}