Palette

Sylph's Woodland Veil

Soft greens and earth tones that transport you to a magical, sun-dappled glade hidden deep within an enchanted forest.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sylph's Woodland Veil 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 Sylph's Woodland Veil.

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

Data visualization

#4A6E57#6D9A7A#B4D9A7#E4F2DB#8E5C4E

Palette guide

How to use Sylph's Woodland Veil

Overview

The Sylph's Woodland Veil palette transports you to a magical, sun-dappled glade, offering a serene blend of soft greens and earthy tones. Featuring deep forest green #4A6E57, a lush mid-green #6D9A7A, a lighter sage #B4D9A7, a delicate off-white #E4F2DB, and a grounding earth brown #8E5C4E, this collection is genuinely useful for designers and developers seeking a natural, tranquil, and organic aesthetic. It's perfect for creating environments that feel peaceful, mystical, and connected to nature. These colors are excellent for branding eco-friendly products, designing calming digital interfaces, or illustrating enchanting natural scenes, providing a sense of quiet harmony and grounded beauty.

Best used for

Eco-friendly and sustainable brand identities
Nature-inspired photography websites
Meditation and wellness application interfaces
Rustic or bohemian interior design concepts
Organic food and natural product packaging
Fantasy or nature-themed digital art

Suggested color roles

primary

Utilize #4A6E57 as a deep, grounding primary color for headers, main content blocks, or brand logos, conveying natural authority.

secondary

Employ #6D9A7A for secondary elements, navigation, or as a lush complementary hue, adding vibrancy within the natural spectrum.

accent

Introduce #8E5C4E as a warm, earthy accent for buttons, borders, or textural elements, providing contrast and a sense of grounding.

background

The soft #E4F2DB makes an excellent airy background, allowing other natural hues to breathe and ensuring clear readability.

text

A dark brown or deep forest green (like #4A6E57) offers ideal readability against lighter backgrounds, maintaining the palette's organic feel.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using lighter greens like #B4D9A7 for text on #E4F2DB.
Prioritize darker shades like #4A6E57 or #8E5C4E for critical text elements to meet WCAG contrast guidelines.
Avoid placing light-colored text on #6D9A7A without careful contrast checking for optimal readability.
Interactive elements should have distinct hover/focus states, especially if using similar hues for background and foreground.

Recommended combinations

Forest Floor

Excellent for establishing a deep, natural foundation, ideal for website footers, robust branding, or earthy content blocks.

#4A6E57 · #8E5C4E · #E4F2DB

Canopy Light

Perfect for creating airy, layered designs, such as illustrations of foliage, light content cards, or serene backgrounds.

#6D9A7A · #B4D9A7 · #E4F2DB

Mystic Path

Use for clear visual hierarchy, combining depth, lightness, and an earthy accent for navigation or key informational sections.

#4A6E57 · #B4D9A7 · #8E5C4E

CSS variables

:root {
  --sylph-s-woodland-veil-1: #4A6E57;
  --sylph-s-woodland-veil-2: #6D9A7A;
  --sylph-s-woodland-veil-3: #B4D9A7;
  --sylph-s-woodland-veil-4: #E4F2DB;
  --sylph-s-woodland-veil-5: #8E5C4E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sylph-s-woodland-veil": {
        1: "#4A6E57",
        2: "#6D9A7A",
        3: "#B4D9A7",
        4: "#E4F2DB",
        5: "#8E5C4E",
      }
    }
  }
}

Hex values

Color 1#4A6E57

Color 2#6D9A7A

Color 3#B4D9A7

Color 4#E4F2DB

Color 5#8E5C4E

Accessibility

Contrast checker

1.8:1Fail

3.7:1AA18

4.9:1AA

1:1Fail

1.8:1Fail

2:1Fail

2.8:1Fail

1.7:1Fail

3.7:1AA18

2:1Fail

1.3:1Fail

3.5:1AA18

4.9:1AA

2.8:1Fail

1.3:1Fail

4.8:1AA

1:1Fail

1.7:1Fail

3.5:1AA18

4.8:1AA

Similar palettes

More like Sylph's Woodland Veil

View all earth

Mystic Glade Light

Emerald Moss Canopy

Enchanted Forest Glade

Enchanted Grove

Forest Fae Whisper

Mystic Forest Dweller