Palette

Serpentine Coil

Subtle, winding greens, like the camouflaged beauty of a serpentine creature moving through foliage.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Serpentine Coil reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Serpentine Coil.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#405C4D#708D7C#A2C3AF#D5E7DA#33493E

Palette guide

How to use Serpentine Coil

Overview

The Serpentine Coil palette presents a collection of subtle, winding greens, evoking the camouflaged beauty of nature. From the deep forest green `#33493E` and dark olive `#405C4D` to the softer sage `#708D7C` and `#A2C3AF`, it culminates in the airy light green `#D5E7DA`. This organic palette is genuinely useful for designers and developers aiming to convey natural elegance, growth, and environmental consciousness. Its harmonious progression of greens provides versatility for creating sophisticated, earthy designs that feel both grounded and fresh, ideal for branding or digital interfaces.

Best used for

Eco-friendly and sustainable brand identities
Nature photography and outdoor apparel websites
Botanical garden and plant-based product designs
Organic food and wellness industry branding
Environmental conservation campaigns
Websites with an earthy, subdued aesthetic

Suggested color roles

primary

The deep forest green `#33493E` provides a strong, grounding presence, suitable for headers or key brand elements.

secondary

Dark olive green `#405C4D` works well for supporting content, subheadings, or as a rich background accent.

accent

Muted sage green `#A2C3AF` offers a gentle accent, perfect for subtle highlights, interactive states, or decorative elements.

background

The very light green `#D5E7DA` creates an organic, airy background, enhancing readability and a natural feel.

text

For optimal readability, use `#33493E` or a dark charcoal for body text against the lighter backgrounds.

Accessibility notes

Ensure sufficient contrast when using lighter greens like `#A2C3AF` for text on `#D5E7DA`; dark text is often necessary.
The darkest shade, `#33493E`, offers excellent contrast for white or very light gray text, improving legibility.
Avoid placing `#708D7C` text on an `#A2C3AF` background without verifying contrast ratios.
Maintain clear visual hierarchy by varying color values for text and background to aid users with visual impairments.

Recommended combinations

Forest Floor

A strong, grounded combination; `#33493E` for impact, `#405C4D` for depth, and `#D5E7DA` for clean content areas.

#33493E · #405C4D · #D5E7DA

Winding Path

Creates a soft, layered green effect; ideal for backgrounds with subtle variations and dark, readable text overlays.

#708D7C · #A2C3AF · #33493E

Canopy Light

Perfect for a light, expansive design; `#D5E7DA` as a primary background, accented by the gentle mid-tones.

#D5E7DA · #A2C3AF · #405C4D

CSS variables

:root {
  --serpentine-coil-1: #405C4D;
  --serpentine-coil-2: #708D7C;
  --serpentine-coil-3: #A2C3AF;
  --serpentine-coil-4: #D5E7DA;
  --serpentine-coil-5: #33493E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "serpentine-coil": {
        1: "#405C4D",
        2: "#708D7C",
        3: "#A2C3AF",
        4: "#D5E7DA",
        5: "#33493E",
      }
    }
  }
}

Hex values

Color 1#405C4D

Color 2#708D7C

Color 3#A2C3AF

Color 4#D5E7DA

Color 5#33493E

Accessibility

Contrast checker

2:1Fail

3.8:1AA18

5.7:1AA

1.3:1Fail

2:1Fail

1.9:1Fail

2.8:1Fail

2.7:1Fail

3.8:1AA18

1.9:1Fail

1.5:1Fail

5.1:1AA

5.7:1AA

2.8:1Fail

1.5:1Fail

7.5:1AAA

1.3:1Fail

2.7:1Fail

5.1:1AA

7.5:1AAA

Similar palettes

More like Serpentine Coil

Botanical Sketch Green

Enchanted Forest Floor

Enchanted Forest Lumina