Teal Blue

HEX: #367588 | Modern Palette

On White
5.18:1
PASS
On Black
4.06:1
FAIL

Color Specifications

HEX
#367588
RGB
54, 117, 136
HSL
193°, 60% ,53%
CMYK
60.29, 13.97, 0, 46.67

About Teal Blue

Teal Blue (#367588) is a color with RGB(54, 117, 136) and HSL(193.9°, 60.29%, 53.33%). In design, it fits Cool styles and is suitable for Text, Button, Accent. Its complementary color is #884936, which creates strong contrast. Its triadic palette includes #883675 and #758836. The name comes from Teal Blue (English).

  • HEX: #367588
  • RGB: 54, 117, 136
  • HSL: 193.9°, 60.29%, 53.33%
  • Style: Cool
  • Use case: Text, Button, Accent
  • Complementary color: #884936
  • Triadic colors: #883675, #758836
  • The name comes from Teal Blue (English).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Teal Blue #367588 is used in Monochromatic, Neutral + Accent, Analogous, 3 + 1 + 1 palettes, giving designers ready-made combinations for backgrounds, surfaces, accents, and interface elements.

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
 
TEAL BLUE
 
 
 
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
 
 
TEAL BLUE
 
 
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

Teal Blue #367588 pairs with #884936 as its complementary color, and #883675 and #758836 in triadic combinations. These harmony relationships help create balanced color combinations for UI, branding, and design work.

Complementary

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

TEAL BLUE
Analogous

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

TEAL BLUE
Triadic

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

TEAL BLUE
Split-Complementary

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

TEAL BLUE
Tetradic (Square)

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

TEAL BLUE
Monochromatic

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

TEAL BLUE

Shades & Tints

The shade and tint range for Teal Blue #367588 moves from dark #071012 tones through the base color to lighter #EDF5F8 tones, making it useful for depth, hierarchy, and background variation.

TEAL BLUE

Color Characteristics

Mood
Style
Cool
Use case
Text Button Accent

Accessibility Simulation

Deuteranopia #676789
Protanopia #707088
Tritanopia #2E7878
Achromatopsia #6D6D6D

Frequently Asked Questions

Teal Blue (#367588) is a color with RGB(54, 117, 136) and HSL(193.9°, 60.29%, 53.33%).

#367588 pairs strongly with #884936 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

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

The name Teal Blue is linked to Teal Blue from English, meaning A color that is a darker shade of teal, leaning more towards blue than green..

Name, History & Etymology

Origin Word Teal Blue
Meaning A color that is a darker shade of teal, leaning more towards blue than green.
Language English
First Recorded Use Early 20th Century

History

The color 'teal' is named after the Eurasian teal duck (Anas crecca), which features a distinctive teal-colored stripe on its head and wings. The word 'teal' itself comes from Middle English 'tele'. While the color has existed in nature and art for millennia, its specific naming as 'teal' in English for a color only became widespread in the early 20th century. 'Teal Blue' emerged as a more precise descriptor to distinguish shades of teal that have a stronger blue component compared to those with a stronger green component (which might be called 'Teal Green'). It's a compound color name, combining the established color 'teal' with the primary color 'blue' to indicate its specific hue.

First Recorded Use

The term 'teal' for the color itself became common in the early 20th century, derived from the Eurasian teal duck which has a stripe of this color on its head. 'Teal Blue' as a specific descriptor would follow shortly after as a way to differentiate variations of teal.

Cultural Associations

Teal Blue, like teal, is often associated with sophistication, tranquility, and uniqueness. It's a popular color in interior design for creating 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 wanting to convey trustworthiness, innovation, or a connection to nature (especially water). Its slightly darker and bluer tone compared to a pure teal can give it a more serious or professional feel.

Similar Named Colors
Ming #36747D ΔE 4.48
Metallic Seaweed #0A7E8C ΔE 6.00
CG Blue #007AA5 ΔE 7.37
Cerulean #007BA7 ΔE 7.69

Code Snippets

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

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

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

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

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

// SCSS variable
$teal-blue: #367588;

// With RGB channels (useful for rgba() usage)
$teal-blue-r: 54;
$teal-blue-g: 117;
$teal-blue-b: 136;

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