Palette

Urban Teal Oasis

A refreshing splash of teal and aquamarine against deep urban grays, bringing an unexpected calm to the cityscape.

vibrantminimal5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0B4F6C#20879D#67B6B0#D2FFF4#343E48

Palette guide

How to use Urban Teal Oasis

Overview

The "Urban Teal Oasis" palette introduces a refreshing and vibrant contrast to urban grays, evoking a serene yet dynamic feel. It features a deep, sophisticated dark blue #0B4F6C and a striking teal #20879D, providing a strong foundation. The palette brightens considerably with a calming aquamarine #67B6B0 and a very light, almost white, minty green #D2FFF4, which adds a fresh, airy quality. A grounding charcoal gray #343E48 ensures versatility. This combination is perfect for designs that aim to be modern, refreshing, and calming, bringing an unexpected splash of nature-inspired tranquility to a city context for designers and developers.

Best used for

Wellness apps or brands (urban spa)
Eco-friendly product packaging
Modern residential architecture
Travel blogs (coastal or city escapes)
Tech interfaces needing a fresh look
Branding for urban green initiatives

Suggested color roles

primary

Use #0B4F6C as a strong, reliable base for branding, main headings, or deep backgrounds.

secondary

Apply #20879D as a vibrant accent for calls-to-action, key features, or interactive elements.

accent

Utilize #67B6B0 for softer highlights, secondary interactive elements, or illustrative details.

background

Employ #D2FFF4 as a light, airy, and refreshing content area background, promoting a sense of calm.

text

Use #343E48 for dark, highly readable body text on lighter backgrounds like #D2FFF4, or white text on #0B4F6C.

Accessibility notes

#343E48 offers excellent contrast on #D2FFF4 for body text, ensuring high readability.
Ensure #67B6B0 or #20879D used as text on #D2FFF4 meets WCAG contrast; best for larger titles or accents.
White text on #0B4F6C or #343E48 will be highly legible, suitable for dark mode or prominent text.
Avoid using #D2FFF4 for text on light backgrounds due to insufficient contrast.

Recommended combinations

Fresh Contrast

Dark base with vibrant accents and a clean background, ideal for modern interfaces.

#343E48 · #20879D · #D2FFF4

Oasis Gradient

Smooth transitions for headers or graphical elements, creating a fluid, refreshing feel.

#0B4F6C · #20879D · #67B6B0

Clean & Calm

Light, refreshing layout with clear, readable text and subtle accents.

#D2FFF4 · #67B6B0 · #343E48

CSS variables

:root {
  --urban-teal-oasis-1: #0B4F6C;
  --urban-teal-oasis-2: #20879D;
  --urban-teal-oasis-3: #67B6B0;
  --urban-teal-oasis-4: #D2FFF4;
  --urban-teal-oasis-5: #343E48;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-teal-oasis": {
        1: "#0B4F6C",
        2: "#20879D",
        3: "#67B6B0",
        4: "#D2FFF4",
        5: "#343E48",
      }
    }
  }
}

Hex values

Color 1#0B4F6C

Color 2#20879D

Color 3#67B6B0

Color 4#D2FFF4

Color 5#343E48

Accessibility

Contrast checker

2.1:1Fail

3.8:1AA18

8.2:1AAA

1.2:1Fail

2.1:1Fail

1.8:1Fail

3.9:1AA18

2.6:1Fail

3.8:1AA18

1.8:1Fail

2.2:1Fail

4.6:1AA

8.2:1AAA

3.9:1AA18

2.2:1Fail

10:1AAA

1.2:1Fail

2.6:1Fail

4.6:1AA

10:1AAA

Similar palettes

More like Urban Teal Oasis

View all vibrant

Bauhaus Geometric Form

Bauhaus Geometric Grid

Bauhaus Grid Vision

Urban Rain Slicker

Digital Interface Matrix

Modern Digital Interface