Back to palettes

Palette

Teal Sanctuary

A deeply calming set of teals, conjuring images of serene waters and hidden, peaceful sanctuaries.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#008080#40B8B8#80D2D2#006666#209E9E

Palette guide

How to use Teal Sanctuary

Overview

The Teal Sanctuary palette offers a harmonious blend of classic teal shades, designed to evoke a profound sense of peace and natural elegance. Featuring a range from the deep #006666 to the serene #80D2D2, and including the balanced #008080, this collection provides a stable yet refreshing foundation for any design project. Developers and designers can utilize these consistent teal tones to create interfaces that feel trustworthy, calm, and sophisticated. It's an excellent choice for crafting digital spaces that require a tranquil atmosphere, ensuring visual comfort and a cohesive brand identity across various applications.

Best used for

  • Wellness and meditation applications
  • Eco-conscious brand websites
  • Home decor and interior design platforms
  • Educational content with a calming theme
  • Financial planning tools (trustworthy feel)
  • Serene digital art installations

Suggested color roles

primary

#008080 serves as a strong, traditional primary color, excellent for main headings, navigation, or corporate branding.

secondary

#40B8B8 provides a lighter, more approachable secondary shade, suitable for subheadings, active states, or supporting visual elements.

accent

#209E9E works as a slightly deeper, impactful accent for calls-to-action, important links, or key interactive components.

background

#80D2D2 offers a very light, airy background, providing a clean canvas that promotes readability and a sense of calm.

text

A dark charcoal or black on #80D2D2 offers high readability. For darker backgrounds, #80D2D2 or a near-white color would be effective.

Accessibility notes

  • Ensure sufficient contrast between #006666 and #80D2D2 for readable body text and UI elements.
  • Avoid using #40B8B8 for small text on #80D2D2, as contrast may be insufficient.
  • The darkest colors like #006666 and #008080 provide good contrast against #80D2D2 for main content.
  • Always use a contrast checker to ensure all text and interactive components meet WCAG accessibility standards.

Recommended combinations

Calm Foundation

Ideal for clean layouts, main content areas, and establishing a tranquil brand presence.

#80D2D2 · #40B8B8 · #008080

Deep Harmony

Suitable for creating depth, emphasizing sections, or for a sophisticated dark mode application.

#006666 · #209E9E · #40B8B8

Sanctuary Contrast

Effective for clear visual hierarchy, with light backgrounds and prominent, readable calls-to-action.

#80D2D2 · #008080 · #209E9E

CSS variables

:root {
  --teal-sanctuary-1: #008080;
  --teal-sanctuary-2: #40B8B8;
  --teal-sanctuary-3: #80D2D2;
  --teal-sanctuary-4: #006666;
  --teal-sanctuary-5: #209E9E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "teal-sanctuary": {
        1: "#008080",
        2: "#40B8B8",
        3: "#80D2D2",
        4: "#006666",
        5: "#209E9E",
      }
    }
  }
}

Related searches

tranquil teal color schemeserene blue green palettecalming water colorsclassic teal brandingpeaceful web design colors

Palette colors

Hex values

Color 1#008080
·
Color 2#40B8B8
·
Color 3#80D2D2
·
Color 4#006666
·
Color 5#209E9E
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
2.7:1Fail
1.4:1Fail
1.5:1Fail
2
2:1Fail
1.4:1Fail
2.8:1Fail
1.4:1Fail
3
2.7:1Fail
1.4:1Fail
3.9:1AA18
1.9:1Fail
4
1.4:1Fail
2.8:1Fail
3.9:1AA18
2.1:1Fail
5
1.5:1Fail
1.4:1Fail
1.9:1Fail
2.1:1Fail

Similar palettes

More like Teal Sanctuary

View all cool
Hidden Cove Shimmer
Alpine Lake Serene
Aquatic Flora Bloom
Aquatic Moss Garden
Azure Canopy Light
Azure Lagoon Dream