Back to palettes

Palette

Teal Abyss

Inspired by the enigmatic depths of the ocean, a cool and profound palette of blues and teals.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Teal Abyss 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 Teal Abyss.

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

Data visualization

#008080#004D4D#00BFFF#009999#006666

Palette guide

How to use Teal Abyss

Overview

The Teal Abyss palette is a profound and serene collection of blues and teals, inspired by the mysterious depths of the ocean. It features the classic #008080 teal, a deep and grounding #004D4D, and a vibrant #00BFFF sky blue that offers a refreshing contrast. Further enhancing the depth are the rich #009999 and the darker #006666, creating a cohesive, cool, and enigmatic atmosphere. Designers can use this palette to evoke feelings of calm, sophistication, and mystery, making it ideal for projects related to marine themes, technology, or any design seeking a tranquil yet powerful presence.

Best used for

  • Ocean and marine-themed branding
  • Environmental and conservation websites
  • Tech company interfaces (especially data visualization)
  • Spa and wellness promotional materials
  • Luxury product packaging (cool tones)
  • Underwater photography portfolios

Suggested color roles

primary

Use #008080 (Classic Teal) for main headings, prominent interactive elements, or as a strong brand identifier.

secondary

Apply #004D4D (Deep Teal) for secondary navigation, background sections, or to establish a sense of depth.

accent

Reserve #00BFFF (Vibrant Sky Blue) for calls-to-action, highlights, or elements that need to stand out with a refreshing pop.

background

The darkest shades like #004D4D or #006666 are excellent for immersive, dark-mode backgrounds. A very light gray or white can serve as a contrasting base.

text

White or a very light gray is recommended for text on these dark and medium teal backgrounds to ensure maximum readability.

Accessibility notes

  • White text on #004D4D, #006666, #008080, and #009999 provides excellent contrast.
  • Ensure #00BFFF text has a sufficiently dark background or is used sparingly for accents.
  • Avoid using medium teal text on other medium teal backgrounds without careful contrast checks.
  • Consider using a stark white or light gray for all body text to maintain readability across the palette.

Recommended combinations

Deep Ocean

Excellent for creating a sense of profound depth and seriousness in corporate websites, scientific presentations, or luxury branding.

#004D4D · #006666 · #008080

Abyss Glow

Ideal for digital interfaces, interactive maps, or data dashboards where vibrant highlights are needed against a deep, stable background.

#008080 · #00BFFF · #004D4D

Calm Waters

Use for tranquil wellness apps, environmental reports, or serene website designs that blend cool tones with a touch of brightness.

#009999 · #00BFFF · #004D4D

CSS variables

:root {
  --teal-abyss-1: #008080;
  --teal-abyss-2: #004D4D;
  --teal-abyss-3: #00BFFF;
  --teal-abyss-4: #009999;
  --teal-abyss-5: #006666;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "teal-abyss": {
        1: "#008080",
        2: "#004D4D",
        3: "#00BFFF",
        4: "#009999",
        5: "#006666",
      }
    }
  }
}

Related searches

deep teal color schemesoceanic blue green palettemysterious cool colorsdark teal web designaquatic color combinations

Palette colors

Hex values

Color 1#008080
·
Color 2#004D4D
·
Color 3#00BFFF
·
Color 4#009999
·
Color 5#006666
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
2.2:1Fail
1.4:1Fail
1.4:1Fail
2
2:1Fail
4.6:1AA
2.8:1Fail
1.4:1Fail
3
2.2:1Fail
4.6:1AA
1.6:1Fail
3.2:1AA18
4
1.4:1Fail
2.8:1Fail
1.6:1Fail
1.9:1Fail
5
1.4:1Fail
1.4:1Fail
3.2:1AA18
1.9:1Fail

Similar palettes

More like Teal Abyss

View all cool
Deep Sea Flora
Sunken Treasure Glow
Abyssal Bioluminescence
Abyssal Current Glide
Bioluminescent Abyss
Deep Ocean Bloom