Back to palettes

Palette

Retro Teal Splash

A cool, confident palette of teals and aquas, echoing the chic and refreshing aesthetic of mid-century design.

coolretro5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00796B#00A39C#4DB6AC#80CBC4#B2DFDB

Palette guide

How to use Retro Teal Splash

Overview

The Retro Teal Splash palette is a cool, confident collection of teals and aquas, perfectly echoing the chic and refreshing aesthetic of mid-century design. Ranging from a deep teal '#00796B' to a vibrant aqua '#00A39C', and through lighter, airy tones like '#4DB6AC', '#80CBC4', and '#B2DFDB', this palette offers a cohesive, harmonious gradient. It's ideal for designers and developers seeking to convey professionalism, tranquility, and a touch of vintage sophistication. This palette facilitates clean, readable interfaces and elegant branding, making it suitable for projects that require a fresh, yet timeless, visual appeal with a retro twist.

Best used for

  • Branding for spas, wellness centers, or eco-friendly products
  • Website and mobile app interfaces with a clean, tranquil aesthetic
  • Interior design themes for modern retro homes or offices
  • Packaging for personal care items or refreshing beverages
  • Marketing materials for health and technology companies seeking trust
  • Digital illustrations and infographics needing a calm, professional look

Suggested color roles

primary

Utilize '#00796B' as the deep, anchoring primary color for backgrounds, headers, or strong graphical elements, providing stability.

secondary

Employ '#00A39C' and '#4DB6AC' for supporting elements, subheadings, or as a vibrant mid-tone, adding energy without overwhelming.

accent

Leverage '#80CBC4' and '#B2DFDB' for lighter accents, highlights, or subtle background details to add depth and visual interest.

background

A gradient from '#00796B' to '#B2DFDB' creates a sophisticated backdrop. For a clean, airy feel, '#B2DFDB' or '#80CBC4' work well.

text

For darker backgrounds like '#00796B' or '#00A39C', white or a very light gray is optimal. On lighter tones like '#B2DFDB', use charcoal or a deep teal like '#00796B' for readability.

Accessibility notes

  • Ensure sufficient contrast for text when using lighter teals like '#80CBC4' or '#B2DFDB' on each other for small elements.
  • Pair dark text (e.g., '#00796B' or black) with '#B2DFDB' for optimal readability.
  • Avoid using adjacent colors in the gradient for text and background without careful contrast checking.
  • Test color combinations with accessibility tools to meet WCAG guidelines, especially for body text and interactive elements.

Recommended combinations

Deep Ocean

A rich, deep gradient for backgrounds or large sections, conveying depth and tranquility. Ideal for header areas.

#00796B · #00A39C · #4DB6AC

Aqua Breeze

A light and airy combination for clean interfaces, offering a refreshing feel for cards, buttons, or secondary content.

#B2DFDB · #80CBC4 · #4DB6AC

Retro Accent

For highlighting key information. '#00A39C' as a vibrant accent against '#00796B', with '#80CBC4' for lighter details.

#00A39C · #00796B · #80CBC4

CSS variables

:root {
  --retro-teal-splash-1: #00796B;
  --retro-teal-splash-2: #00A39C;
  --retro-teal-splash-3: #4DB6AC;
  --retro-teal-splash-4: #80CBC4;
  --retro-teal-splash-5: #B2DFDB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-teal-splash": {
        1: "#00796B",
        2: "#00A39C",
        3: "#4DB6AC",
        4: "#80CBC4",
        5: "#B2DFDB",
      }
    }
  }
}

Related searches

mid-century modern teal paletteretro aqua color schemecool vintage design colorsmonochromatic teal paletterefreshing retro aesthetic

Palette colors

Hex values

Color 1#00796B
·
Color 2#00A39C
·
Color 3#4DB6AC
·
Color 4#80CBC4
·
Color 5#B2DFDB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.2:1Fail
2.9:1Fail
3.7:1AA18
2
1.7:1Fail
1.3:1Fail
1.7:1Fail
2.2:1Fail
3
2.2:1Fail
1.3:1Fail
1.3:1Fail
1.7:1Fail
4
2.9:1Fail
1.7:1Fail
1.3:1Fail
1.3:1Fail
5
3.7:1AA18
2.2:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Retro Teal Splash

View all cool
Atomic Era Pulse
Mid-Century Aqua Teal
Aged Teal Canvas
Faded Denim Blues
Faded Denim Days
Faded Denim Patina