Back to palettes

Palette

Emerald Bamboo Sway

Lush greens of a quiet bamboo grove, swaying gently in a refreshing, serene breeze.

coolnatural5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Emerald Bamboo Sway 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 Emerald Bamboo Sway.

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

Data visualization

#004F3F#006C5A#008975#00A690#00C4AC

Palette guide

How to use Emerald Bamboo Sway

Overview

The Emerald Bamboo Sway palette captures the lush greens of a quiet bamboo grove, swaying gently in a refreshing, serene breeze. This monochromatic collection ranges from deep teal-green (#004F3F) to vibrant medium teal-green (#008975) and a bright, fresh teal (#00C4AC). Grounded by a slightly darker teal-green (#006C5A) and softened by a lighter variant (#00A690), this palette is perfect for designers and developers aiming to evoke a sense of calm, freshness, and natural elegance. It's ideal for projects that seek a tranquil yet invigorating aesthetic, bringing the peaceful essence of nature to digital and print designs.

Best used for

  • Wellness and spa brand identities
  • Nature-themed websites or apps
  • Eco-friendly product packaging
  • Tranquil interior design concepts
  • Digital illustrations of natural landscapes
  • Yoga or meditation studio branding

Suggested color roles

primary

Deep teal-green (#004F3F) serves as a grounding primary, perfect for headers, navigation, or strong brand elements, providing depth and stability.

secondary

Vibrant medium teal-green (#008975) acts as an invigorating secondary, ideal for subheadings, interactive components, or sections needing a fresh, natural lift.

accent

Bright teal (#00C4AC) offers a crisp, energetic accent, perfect for highlights, small icons, or calls-to-action that need to stand out with a refreshing pop.

background

The lighter teal-green (#00A690) provides a serene, expansive background, excellent for content areas or large sections where readability and a calm feel are desired.

text

Deep teal-green (#004F3F) works well for body text on lighter backgrounds, ensuring high readability with a cohesive, natural aesthetic, or use black for maximum contrast.

Accessibility notes

  • Deep teal-green (#004F3F) provides excellent contrast against lighter shades like bright teal (#00C4AC) and lighter teal-green (#00A690) for text.
  • Ensure sufficient contrast if using vibrant medium teal-green (#008975) for text on the lighter teal-green (#00A690) background.
  • Always verify that all text and interactive element contrasts meet WCAG 2.1 AA standards for optimal accessibility.
  • Avoid placing bright teal (#00C4AC) on lighter teal-green (#00A690) for critical text due to potential low contrast.

Recommended combinations

Bamboo Depth

Creates a harmonious depth, ideal for defining sections, backgrounds, or sophisticated graphical elements.

#004F3F · #006C5A · #008975

Fresh Breeze

Excellent for highlights, interactive elements, or bringing a vibrant, refreshing energy to the design.

#00C4AC · #00A690 · #004F3F

Serene Canopy

Provides a balanced and calming combination for content areas, subheadings, or subtle decorative patterns.

#008975 · #00A690 · #006C5A

CSS variables

:root {
  --emerald-bamboo-sway-1: #004F3F;
  --emerald-bamboo-sway-2: #006C5A;
  --emerald-bamboo-sway-3: #008975;
  --emerald-bamboo-sway-4: #00A690;
  --emerald-bamboo-sway-5: #00C4AC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-bamboo-sway": {
        1: "#004F3F",
        2: "#006C5A",
        3: "#008975",
        4: "#00A690",
        5: "#00C4AC",
      }
    }
  }
}

Related searches

emerald green monochromatic palettebamboo inspired color schemecalm serene web design colorsnature fresh UI palettegreen teal gradient design

Palette colors

Hex values

Color 1#004F3F
·
Color 2#006C5A
·
Color 3#008975
·
Color 4#00A690
·
Color 5#00C4AC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.2:1Fail
3.1:1AA18
4.3:1AA18
2
1.5:1Fail
1.5:1Fail
2.1:1Fail
2.9:1Fail
3
2.2:1Fail
1.5:1Fail
1.4:1Fail
2:1Fail
4
3.1:1AA18
2.1:1Fail
1.4:1Fail
1.4:1Fail
5
4.3:1AA18
2.9:1Fail
2:1Fail
1.4:1Fail

Similar palettes

More like Emerald Bamboo Sway

View all cool