Palette

Urban Teal Twilight

The cool, deep tones of a modern city at twilight, reflecting a blend of blue and green.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A2A2A#1F4F4F#3A7A7A#6CCACA#AEEAEA

Palette guide

How to use Urban Teal Twilight

Overview

The "Urban Teal Twilight" palette captures the serene yet sophisticated mood of a modern city as day transitions to night. It features a deep, almost black teal #0A2A2A and a rich dark teal #1F4F4F, establishing a profound depth. Progressing through a balanced medium teal #3A7A7A and a vibrant light teal #6CCACA, the palette culminates in a soft, airy pale teal #AEEAEA. This cool, elegant scheme is perfect for designs that aim for a contemporary and sophisticated feel, reflecting the subtle interplay of light and shadow in an urban environment, with a consistent, soothing teal undertone for designers and developers.

Best used for

High-end tech product interfaces
Luxury real estate websites
Modern art gallery branding
Environmental or sustainability reports
Fashion and beauty e-commerce (sophisticated)
Architectural visualization (night scenes)

Suggested color roles

primary

Use #0A2A2A as a deep, sophisticated background or primary brand color for elegance.

secondary

Apply #3A7A7A for main content areas, prominent headings, or supporting sections.

accent

Utilize #6CCACA for bright highlights, interactive elements, or calls-to-action to draw attention.

background

Employ #AEEAEA as a light, airy base for readable content, creating a fresh canvas.

text

Use #1F4F4F for dark, highly legible body text on lighter backgrounds like #AEEAEA, or white text on #0A2A2A.

Accessibility notes

#1F4F4F on #AEEAEA provides good contrast for body text, ensuring readability.
Ensure #6CCACA used for text on #AEEAEA meets WCAG contrast; best for larger titles or accents.
White or very light gray text on #0A2A2A and #1F4F4F offers excellent readability for darker sections.
Use #3A7A7A for text on #AEEAEA cautiously, verifying sufficient contrast for smaller fonts.

Recommended combinations

Deep Twilight

Dark background with contrasting light text and subtle depth, ideal for headers or footers.

#0A2A2A · #1F4F4F · #AEEAEA

Teal Spectrum

Gradients or layered elements showcasing the teal progression, creating visual interest.

#1F4F4F · #3A7A7A · #6CCACA

Clean Accent

Light base with clear text and a strong, dark anchor, suitable for minimalist layouts.

#AEEAEA · #3A7A7A · #0A2A2A

CSS variables

:root {
  --urban-teal-twilight-1: #0A2A2A;
  --urban-teal-twilight-2: #1F4F4F;
  --urban-teal-twilight-3: #3A7A7A;
  --urban-teal-twilight-4: #6CCACA;
  --urban-teal-twilight-5: #AEEAEA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-teal-twilight": {
        1: "#0A2A2A",
        2: "#1F4F4F",
        3: "#3A7A7A",
        4: "#6CCACA",
        5: "#AEEAEA",
      }
    }
  }
}

Hex values

Color 1#0A2A2A

Color 2#1F4F4F

Color 3#3A7A7A

Color 4#6CCACA

Color 5#AEEAEA

Accessibility

Contrast checker

1.7:1Fail

3.1:1AA18

7.9:1AAA

11.4:1AAA

1.7:1Fail

1.9:1Fail

4.8:1AA

6.9:1AA

3.1:1AA18

1.9:1Fail

2.6:1Fail

3.7:1AA18

7.9:1AAA

4.8:1AA

2.6:1Fail

1.4:1Fail

11.4:1AAA

6.9:1AA

3.7:1AA18

1.4:1Fail

Similar palettes

More like Urban Teal Twilight

View all cool

Concrete Jungle Bloom