Skip to main content

Teal

Everything you need to know about teal to inspire your next design.

Pick a palette type

What color is teal?

Teal is a calming and sophisticated color, perfectly situated between blue and green on the color wheel. This shade captures the coolness of blue with the natural serenity of green, forming a balanced and refreshing hue. In its spectrum, teal includes lighter shades such as turquoise for a brighter, more vibrant feel, and darker shades like deep aqua with its richer, more subdued appearance.

tealteal

What does teal look like on digital screens?

Teal is defined by the following color codes and values to ensure consistency across various digital platforms and devices.

- HEX code: #069494

- RGB value: 2.4% red, 58% green and 58% blue

Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.

How should I effectively use teal in UI design?

To effectively use teal in UI design, consider these ideas:

  • Create a calming yet dynamic feel. Teal can infuse your UI with a calming and dynamic feeling, which is ideal for many industries, from health apps to financial services.
  • Highlight interactive elements. Use teal to highlight buttons, links, or CTAs. Its distinctive hue stands out against light and dark backgrounds, guiding users intuitively through the navigation.
  • Pair with complementary colors. Teal pairs beautifully with coral or peach for a vibrant contrast or with shades of gray for a more subdued, professional look. This versatility makes it suitable for both creative and corporate projects.
  • Enhance brand identity. Teal's association with creativity, sophistication, and reliability makes it a strong choice for reinforcing brand identity, especially for companies looking to differentiate themselves in the marketplace.

Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.

What are similar colors to teal?

For variations within the same serene and balanced spectrum as teal, consider:

  • Turquoise (#40E0D0) is lighter and leans more towards blue, capturing the crystal clear essence of tropical waters with a vibrant, refreshing feel.
  • Cyan (#00FFFF) offers a brighter, more electrified version of teal, bringing a luminous quality that echoes the clarity and depth of the ocean.
  • Aquamarine (#66F1C2) is softer and more transparent, sharing teal's connection to water but with a gentler, more ethereal presence.
  • Dark cyan (#008B8B) maintains the depth of teal with a more subdued and muted tone, evoking the tranquil depths of the sea.

What colors go with teal?

To complement teal's dynamic tones, consider pairing it with:

  • Coral (#FF8559) introduces a warm, vibrant contrast, echoing the natural harmony of coral reefs and teal waters for a lively, tropical palette.
  • Charcoal gray (#4A4A4A) provides a sleek, modern counterbalance to teal's vibrancy, adding sophistication and grounding the palette with its neutral depth.
  • Soft gold (#D4AF37) adds a touch of luxury and warmth, creating an elegant contrast that highlights teal's richness and depth.
  • Dusty rose (#DCA1A1) offers a subtle, muted complement, pairing beautifully with teal for a refined and delicate aesthetic.
  • Cream (#FDFBD4) is warm and light, creating a soft backdrop that allows the depth of teal to stand out, offering a classic and timeless look.

Other colors worth considering include navy blue for a bold, dignified look; mint green for a fresh, harmonious blend; and lavender for a soft, contrasting touch.

What colors conflict with teal?

While teal is remarkably adaptable, certain combinations may prove less harmonious:

  • Bright lime green (#32CD32) can be too striking against teal, creating a visual contrast that might feel jarring or overly bold.
  • Neon orange (#FFA500), with its intense vibrancy, might detract from teal's sophisticated richness, leading to a discordant palette.
  • Hot pink (#FF69B4) offers a bold, vivid contrast that may overwhelm teal's tranquil and balanced nature, resulting in a palette that feels overly vibrant or discordant.
  • Dark purple (#800080), though rich and regal, might compete too much with teal, overshadowing its serene qualities with a dominating presence.
  • Bright red (#FF0000), while a dynamic color, can create a challenging contrast that competes with teal's calming and grounded nature, potentially leading to a visually uncomfortable mix.

What does teal symbolize?

Teal conveys sophistication, calm, and renewal. It is associated with clarity and protection, enhancing emotional well-being. Culturally, teal is recognized as a color that promotes emotional healing and tranquility.

In color psychology, teal bridges the gap between the peacefulness of blue and the rejuvenating properties of green. This unique combination creates a color that can both relax and revitalize.

In UI design, teal can effectively grab attention or provide balance within a design's aesthetic. For instance, a teal button can stand out as a focal point, drawing users towards a specific action without overwhelming the overall design. This makes teal an excellent choice for interactive elements that must be noticeable and aesthetically pleasing.

What’s the history of teal?

The name "teal" comes from the common teal, a duck found in the northern hemisphere, known for the striking stripe of this color that extends from its eyes to the back of its head.

Historically, teal gained popularity in the 1700s in fashion and interior design, favored during Victorian times for its rich depth and versatility in textiles and wall coverings. In the 20th century, teal saw a resurgence, becoming synonymous with modernity and sophistication. By the 1950s and 1960s, it was a popular choice for automotive paint, kitchen appliances, and consumer goods, reflecting a societal preference for vibrant yet refined colors.

Color variations

Shades

Tints

Tones

Hues

Color harmonies

Complementary

Split

Monochromatic

Analogous

Triadic

Square

Custom palettes

Seawater Aquarium

Rusty Shipwreck

Sea Glass

Accessibility

Contrast checker

Large Text

Figma

Normal Text

How you design, align, and build matters. Do it together with Figma.

This is #069494 text on a #FFFFFF background.

3.7:1

WCAG 2.2 Simple Contrast

Normal Text

Fail
AA
4.5:1
Fail
AAA
7:1

Large Text

Pass
AA
3:1
Fail
AAA
4.5:1
Large Text

Figma

Normal Text

How you design, align, and build matters. Do it together with Figma.

This is #069494 text on a #000000 background.

5.67:1

WCAG 2.2 Simple Contrast

Normal Text

Pass
AA
4.5:1
Fail
AAA
7:1

Large Text

Pass
AA
3:1
Pass
AAA
4.5:1

Color simulations

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

Color conversion

The hexadecimal color #069494, known as teal, has RGB values of R:6, G:148, B:148 and CMYK values of C:0.96, M:0, Y:0, K:0.42.

VALUECSS
HEX069494#069494
RGB DECIMAL6, 148, 148rgb(6,148,148)
RGB PERCENTAGE2.4, 58, 58rgb(2.4%,58%,58%)
CMYK96, 0, 0, 42
HSL180°, 92.2, 30.2hsl(180,92.2%,30.2%)
HSV (OR HSB)180°, 95.9, 58
WEB SAFE009999#009999
CIE-LAB55.436, -31.788, -9.361
XYZ16.009, 23.355, 31.68
xyY0.225, 0.329, 23.355
CIE-LCH55.436, 33.137, 196.409
CIE-LUV55.436, -42.554, -9.188
HUNTER-LAB48.327, -25.443, -5.037
BINARY00000110, 10010100, 10010100
iOS - SwiftUIColor(red: 6/255, green: 148/255, blue: 148/255)
iOS - UIKitUIColor(red: 6/255.0, green: 148/255.0, blue: 148/255.0, alpha: 1.0)
Android - ComposeColor(0xFF069494)