Back to palettes

Palette

Coral Reef Twilight

A dazzling array of vibrant teal and aqua shades, reminiscent of a thriving coral reef bathed in the dim light of twilight.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coral Reef Twilight 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 Coral Reef Twilight.

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

Data visualization

#008b8b#20b2aa#40e0d0#00ffff#e0ffff

Palette guide

How to use Coral Reef Twilight

Overview

The Coral Reef Twilight palette presents a dazzling array of vibrant teal and aqua shades, reminiscent of a thriving coral reef bathed in the dim light of twilight. It ranges from the deep Dark Cyan #008b8b and subtle Light Sea Green #20b2aa, through the refreshing Turquoise #40e0d0 and brilliant Aqua #00ffff, culminating in the ethereal Light Cyan #e0ffff. This monochromatic cool palette is perfect for designs that aim to evoke serenity, depth, and a touch of mystery, making it ideal for marine-themed projects, clean digital interfaces, or calming branding.

Best used for

  • Spa and wellness app interfaces
  • Marine research organization branding
  • Aquatic sports apparel design
  • Clean, modern website backgrounds
  • Digital art with a serene, watery theme
  • Eco-friendly product packaging

Suggested color roles

primary

Use Dark Cyan #008b8b for foundational elements or strong branding, conveying stability and depth.

secondary

Turquoise #40e0d0 can be used for headings or interactive elements, adding a refreshing touch.

accent

Aqua #00ffff provides a bright, shimmering highlight for key details or calls-to-action.

background

Light Cyan #e0ffff offers a very light, airy, and expansive base.

text

A deep charcoal or black provides optimal readability against the lighter shades.

Accessibility notes

  • Light Cyan #e0ffff is very light; use dark text for readability.
  • Aqua #00ffff and Turquoise #40e0d0 may not meet WCAG AA contrast with white text for small fonts.
  • Ensure sufficient contrast between #008b8b and #20b2aa if used for text.
  • Always test contrast ratios for all text and interactive elements.

Recommended combinations

Deep Waters

Ideal for creating depth, serene backgrounds, or subtle gradients in UI.

#008B8B · #20B2AA · #40E0D0

Shimmering Surface

Excellent for lighter backgrounds, overlays, or elements needing a luminous, ethereal feel.

#00FFFF · #E0FFFF · #40E0D0

Twilight Accents

Use for striking contrasts, calls-to-action, or graphic details that need to pop.

#008B8B · #00FFFF · #20B2AA

CSS variables

:root {
  --coral-reef-twilight-1: #008b8b;
  --coral-reef-twilight-2: #20b2aa;
  --coral-reef-twilight-3: #40e0d0;
  --coral-reef-twilight-4: #00ffff;
  --coral-reef-twilight-5: #e0ffff;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-reef-twilight": {
        1: "#008b8b",
        2: "#20b2aa",
        3: "#40e0d0",
        4: "#00ffff",
        5: "#e0ffff",
      }
    }
  }
}

Related searches

teal aqua color palettemarine twilight schemeserene underwater designmonochromatic blue greencalming ocean colors

Palette colors

Hex values

Color 1#008b8b
·
Color 2#20b2aa
·
Color 3#40e0d0
·
Color 4#00ffff
·
Color 5#e0ffff
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
3.3:1AA18
3.9:1AA18
2
1.6:1Fail
1.6:1Fail
2.1:1Fail
2.5:1Fail
3
2.5:1Fail
1.6:1Fail
1.3:1Fail
1.6:1Fail
4
3.3:1AA18
2.1:1Fail
1.3:1Fail
1.2:1Fail
5
3.9:1AA18
2.5:1Fail
1.6:1Fail
1.2:1Fail

Similar palettes

More like Coral Reef Twilight

View all vibrant
Coral Garden Bloom
Coral Reef Jewel
Coral Reef Mosaic
Coral Reef Twilight
Electric Coral Reef
Reef Jewel Bloom