Back to palettes

Palette

Midcentury Modern Teal

A sophisticated blend of teal, aquamarine, and warm neutrals, embodying the chic simplicity of midcentury modern design.

Retroelegant5 colors
More Retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#48D1CC#66CDAA#FFDAB9#F5DEB3

Palette guide

How to use Midcentury Modern Teal

Overview

The Midcentury Modern Teal palette is a sophisticated blend embodying chic simplicity. It features deep forest green #2F4F4F, vibrant aquamarine #48D1CC, calming medium aqua green #66CDAA, and warm neutrals #FFDAB9 (peachpuff) and #F5DEB3 (wheat). This palette is perfect for designers aiming for a clean, elegant, and timeless aesthetic with a subtle retro flair. The refreshing teals provide a modern edge, while the warm neutrals ground the design, making it versatile for both digital and print applications. It's an excellent choice for projects requiring a sense of calm, professionalism, and understated luxury, from corporate branding to home decor websites.

Best used for

  • Minimalist web design and UI
  • High-end interior design portfolios
  • Eco-friendly or sustainable brand identities
  • Spa and wellness marketing materials
  • Architectural firm branding
  • Editorial layouts for sophisticated lifestyle content

Suggested color roles

primary

Use #2F4F4F as a strong primary for foundational elements, headers, or elegant branding.

secondary

Apply #48D1CC for supporting content, interactive elements, or to introduce a refreshing accent.

accent

Highlight with #FFDAB9 for subtle warmth, hover states, or decorative elements that need a soft glow.

background

Employ #F5DEB3 or a clean white for main content areas, providing a light, inviting canvas.

text

Utilize #2F4F4F for primary body text, ensuring excellent readability against lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing #2F4F4F with #F5DEB3 or #FFDAB9.
  • White text provides good contrast on #2F4F4F, #48D1CC, and #66CDAA for headlines.
  • Avoid using #FFDAB9 or #F5DEB3 for small text on light backgrounds due to low contrast.
  • For critical information, use #2F4F4F on #F5DEB3 or #FFDAB9 for optimal legibility.

Recommended combinations

Chic & Clean

Ideal for modern headers, navigation, or sections needing a sophisticated, clear look.

#2F4F4F · #F5DEB3 · #48D1CC

Aqua Harmony

Excellent for background patterns, subtle UI elements, or content sections needing a serene feel.

#66CDAA · #48D1CC · #F5DEB3

Warm Balance

Creates an inviting yet grounded look for calls-to-action, testimonials, or brand accents.

#FFDAB9 · #2F4F4F · #66CDAA

CSS variables

:root {
  --midcentury-modern-teal-1: #2F4F4F;
  --midcentury-modern-teal-2: #48D1CC;
  --midcentury-modern-teal-3: #66CDAA;
  --midcentury-modern-teal-4: #FFDAB9;
  --midcentury-modern-teal-5: #F5DEB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midcentury-modern-teal": {
        1: "#2F4F4F",
        2: "#48D1CC",
        3: "#66CDAA",
        4: "#FFDAB9",
        5: "#F5DEB3",
      }
    }
  }
}

Related searches

midcentury modern teal palettesophisticated aqua colorsclean elegant color schemeteal and neutral designchic retro modern branding

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#48D1CC
·
Color 3#66CDAA
·
Color 4#FFDAB9
·
Color 5#F5DEB3
·

Accessibility

Contrast checker

1
2
3
4
5
1
4.8:1AA
4.6:1AA
6.8:1AA
6.8:1AA
2
4.8:1AA
1:1Fail
1.4:1Fail
1.4:1Fail
3
4.6:1AA
1:1Fail
1.5:1Fail
1.5:1Fail
4
6.8:1AA
1.4:1Fail
1.5:1Fail
1:1Fail
5
6.8:1AA
1.4:1Fail
1.5:1Fail
1:1Fail

Similar palettes

More like Midcentury Modern Teal

View all Retro