Teal Shades
Every named color in the teal family, with computed conversions and contrast data — membership derived by computed hue, not a hand-maintained list. 56 colors shown below.
Quick facts (computed from this family's 56 members)
- Average lightness: 50%
- Average saturation: 77%
- 7 of 56 pass WCAG AA as normal text on white
- 50 of 56 pass WCAG AA as normal text on black
- Lightest named member: ice
- Darkest named member: evergreen
- Most saturated member: Aquamarine
The color science
Teal sits roughly 150-175°, the blue-green boundary, and takes its name from the common teal (a small dabbling duck) whose distinctive eye-stripe feather patch is this exact color — a genuine animal-derived color name, parallel to how 'salmon' comes from the fish's flesh rather than a mineral or plant. It's perceptually a genuinely separate category from both pure cyan and pure green in most cross-cultural color-naming studies, though English speakers vary widely in where they draw the teal/green and teal/blue boundaries in casual conversation. Teal ducks themselves are found across much of the Northern Hemisphere, and the specific iridescent feather patch the color is named for can actually shift in apparent hue depending on viewing angle — a structural-color effect from microscopic feather layering rather than a simple pigment, distinct from how most other named colors on this site get their color from a fixed pigment or dye. Peacock feathers and many butterfly wings share this same structural-color mechanism, which is part of why those specific blue-green iridescent colors in nature tend to look unusually saturated and shift noticeably with viewing angle compared to a flat pigment-based color of similar hue. Structural color of this kind is also genuinely more resistant to fading over time than a pigment-based color, since it comes from the physical microstructure of the material rather than a light-sensitive chemical compound that can break down under prolonged UV exposure the way most dyes and pigments eventually do.
Common uses in design
Teal became a favorite 'safe but distinctive' brand color through the 2010s specifically because it reads as calmer and more premium than bright cyan while avoiding blue's market saturation (an enormous share of tech and finance brands default to blue), making it a common choice for health, wellness, and productivity apps that want to signal trust without looking like every bank or airline in the market. Healthcare branding specifically has adopted teal as an alternative to the more clinical, sterile associations of pure white or blue, since it reads as calming and trustworthy without carrying blue's heavier corporate-finance connotations in the same product category. Interior design and hospitality branding also reach for teal disproportionately in spa, wellness-retreat, and coastal-resort contexts specifically because it reads as both natural (evoking clear tropical water) and calm without the higher-energy associations of brighter blues or greens.
Accessibility notes
Because teal sits between two hue families with strong existing UI conventions (blue for links/info, green for success), using it as a functional-state color risks being misread as either — it's generally safer as a brand/decorative color than as a semantic one in a design system that already uses blue and green elsewhere for their conventional meanings. As with cyan, teal's text contrast against white needs a real check rather than an assumption — moderately saturated teals can sit close enough to the AA boundary that a small saturation or lightness adjustment is often the difference between passing and failing.
Named examples
DarkCyan and LightSeaGreen are the CSS-named colors nearest true teal; 'teal' itself is also a directly named CSS/X11 color (#008080), one of the original 16 HTML 3.2 color keywords standardized in 1996, making it one of the oldest formally named colors on the web. LightSeaGreen extends the family toward a slightly cooler, more blue-leaning teal, while CadetBlue — named for a muted military-cadet uniform cloth color rather than the sea — sits at the more desaturated, grayer end of the same general range.
Building a teal design-token scale
Teal has become a common secondary/accent token specifically because it doesn't collide with the red/green/blue/yellow semantic conventions already claimed by error, success, links, and warnings — it's a popular 'this is informational but not a link' color in dashboards and notification systems for exactly that reason. When pairing teal with true blue in the same interface (both are common 'trustworthy tech' brand choices), keep enough hue distance between the two specific values you pick, since teal drifts toward plain blue fast as saturation drops, and two similar blue-teals used for different meanings on the same screen is a genuine legibility risk, not just an aesthetic preference. A teal token also ages well as a long-term brand choice specifically because it hasn't cycled through as many competing fashion trends as brighter, more saturated hues have, giving it a comparatively stable, timeless quality in product branding over a multi-year horizon. Because teal sits at a genuine crossroads between two much more heavily used families, a product committing to teal as a primary brand color is making a deliberate bet on distinctiveness over the safer, more expected choice of a plain blue or green, and that tradeoff is worth stating explicitly in a brand rationale rather than leaving implicit. That same crossroads position is also exactly why teal reads as fresh and current in a market where most competitors have already settled on plain blue, giving a well-executed teal identity a real differentiation advantage that a more conventional color choice can't offer. As with any less-conventional brand hue, that differentiation comes with a real cost worth planning for: teal has fewer pre-built UI-kit and icon-set defaults tuned to it than blue does, so expect somewhat more custom design work to make every part of an interface feel intentional rather than mismatched.