Teal

HEX: #008080 | Modern Palette

On White
4.77:1
PASS
On Black
4.40:1
FAIL

Color Specifications

HEX
#008080
RGB
0, 128, 128
HSL
180°, 100% ,50%
CMYK
100, 0, 0, 49.8

About Teal

Teal (#008080) is a color with RGB(0, 128, 128) and HSL(180°, 100%, 50.2%). It is commonly associated with Bold moods. In design, it fits Vivid, Cool styles and is suitable for Text, Button, Accent. Its complementary color is Maroon (#800000), which creates strong contrast. Its triadic palette includes Purple (#800080) and Olive (#808000). The name comes from Teal (English).

  • HEX: #008080
  • RGB: 0, 128, 128
  • HSL: 180°, 100%, 50.2%
  • Mood: Bold
  • Style: Vivid, Cool
  • Use case: Text, Button, Accent
  • Complementary color: Maroon (#800000)
  • Triadic colors: Purple (#800080), Olive (#808000)
  • The name comes from Teal (English).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.

Color Harmonies

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Shades & Tints

A seamless scale of #008080 from deepest shade to lightest tint.

Color Characteristics

Mood
Bold
Style
Vivid Cool
Use case
Text Button Accent

Accessibility Simulation

Deuteranopia #6D6D81
Protanopia #797980
Tritanopia #008080
Achromatopsia #737373

Frequently Asked Questions

Teal (#008080) is a color with RGB(0, 128, 128) and HSL(180°, 100%, 50.2%).

#008080 pairs strongly with Maroon (#800000) as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#008080 is suitable for Text, Button, Accent and works well with Vivid, Cool styles.

#008080 is commonly associated with Bold.

The name Teal is linked to Teal from English, meaning A small freshwater duck, Anas crecca, known for the distinctive greenish-blue stripe on its head and wings..

Name, History & Etymology

Origin Word Teal
Meaning A small freshwater duck, Anas crecca, known for the distinctive greenish-blue stripe on its head and wings.
Language English
First Recorded Use Early 17th Century

History

The color 'teal' is named directly after the Eurasian teal duck, specifically referring to the color of the stripe on its head and wings. The word 'teal' itself for the bird is of Germanic origin, related to Dutch 'taling' and Low German 'telink'. The use of the bird's name to describe the color became common as early as the 17th century, though its widespread popularity as a distinct color name, especially in fashion and design, grew significantly in the 20th century. It's often considered a darker, more muted version of cyan or a blue-green.

First Recorded Use

1600s

Cultural Associations

Teal is often associated with sophistication, tranquility, and uniqueness. It's a popular color in interior design, often used to create a calming yet elegant atmosphere. In fashion, it can be seen as a versatile color, suitable for both formal and casual wear. It's also frequently used in branding for companies that want to convey a sense of reliability, innovation, or connection to nature (especially water). Due to its association with water and nature, it can evoke feelings of refreshment and peace. In some contexts, it can also be linked to environmental causes.

Similar Named Colors
Teal Green #00827F ΔE 1.44
Dark Cyan #008B8B ΔE 4.03
Celadon Green #2F847C ΔE 4.04
Myrtle Green #317873 ΔE 4.29

Code Snippets

/* Background */
.element {
    background-color: #008080;
}

/* Text */
.element {
    color: #008080;
}

/* Border */
.element {
    border: 1px solid #008080;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #008080,
        #FF0101
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #008080,
        #FF0101
    );
}

// SCSS variable
$teal: #008080;

// With RGB channels (useful for rgba() usage)
$teal-r: 0;
$teal-g: 128;
$teal-b: 128;

// Usage
.element {
    background-color: $teal;
    color: rgba($teal-r, $teal-g, $teal-b, 0.8);
}