Palette

Starlight Aquamarine

A refreshing blend of aquamarine and teal, sparkling like a clear gem under starlight.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Starlight Aquamarine 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 Starlight Aquamarine.

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

Data visualization

#004D40#1DE9B6#64FFDA#A7FFEB#00897B

Palette guide

How to use Starlight Aquamarine

Overview

The Starlight Aquamarine palette offers a refreshing and vibrant blend of aquamarine and teal, sparkling like a clear gem under starlight. From the deep #004D40 to the bright #A7FFEB, this collection provides an energetic and clean aesthetic for designers and developers. Its jewel-toned shades, including #1DE9B6 and #64FFDA, are ideal for crafting modern digital experiences, eco-friendly branding, or dynamic UI designs. The palette's lively contrast ensures visual appeal and versatility, making it perfect for projects that aim to evoke freshness, clarity, and a touch of elegant vitality across web, app, or print materials.

Best used for

Eco-friendly product branding
Spa and wellness retreat websites
Sports and outdoor activity apps
Health and fitness platforms
Modern tech interfaces
Coastal or water-themed designs

Suggested color roles

primary

#004D40 serves as the deepest, grounding teal, ideal for primary branding or dark mode elements.

secondary

#00897B offers a rich supporting green-blue, adding depth and sophistication to larger sections.

accent

#64FFDA provides the brightest, most energetic highlight, perfect for call-to-action buttons or key features.

background

#A7FFEB is the lightest shade, providing a fresh, clean base for content and vibrant designs.

text

For text on light backgrounds, use #004D40 or a dark charcoal. For text on dark backgrounds, use white.

Accessibility notes

The contrast between #A7FFEB and #64FFDA is extremely low; avoid using for text to ensure readability.
Ensure sufficient contrast for body text by pairing #004D40 or #00897B with the lightest background, #A7FFEB.
Interactive elements should have clearly visible states, especially when using adjacent bright shades.
Contrast between #1DE9B6 and #64FFDA might be too low for small text; use these for larger graphical elements.

Recommended combinations

Fresh Contrast

Creates bold headers, clean layouts, and a vibrant brand presence with strong readability.

#004D40 · #A7FFEB · #1DE9B6

Vibrant Gradient

Ideal for dynamic background elements, energetic UI transitions, or adding visual flair.

#00897B · #1DE9B6 · #64FFDA

Energetic Highlight

Use for call-to-action buttons, key information, or to emphasize interactive components with a pop.

#004D40 · #64FFDA · #A7FFEB

CSS variables

:root {
  --starlight-aquamarine-1: #004D40;
  --starlight-aquamarine-2: #1DE9B6;
  --starlight-aquamarine-3: #64FFDA;
  --starlight-aquamarine-4: #A7FFEB;
  --starlight-aquamarine-5: #00897B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starlight-aquamarine": {
        1: "#004D40",
        2: "#1DE9B6",
        3: "#64FFDA",
        4: "#A7FFEB",
        5: "#00897B",
      }
    }
  }
}

Hex values

Color 1#004D40

Color 2#1DE9B6

Color 3#64FFDA

Color 4#A7FFEB

Color 5#00897B

Accessibility

Contrast checker

6.3:1AA

7.9:1AAA

8.5:1AAA

2.3:1Fail

6.3:1AA

1.3:1Fail

1.4:1Fail

2.8:1Fail

7.9:1AAA

1.3:1Fail

1.1:1Fail

3.5:1AA18

8.5:1AAA

1.4:1Fail

1.1:1Fail

3.7:1AA18

2.3:1Fail

2.8:1Fail

3.5:1AA18

3.7:1AA18

Similar palettes

More like Starlight Aquamarine

Emerald Gemstone Luster