Teal is a blue–green blend that sits between cyan and green on the color wheel, named after the common teal bird’s eye patch. It is commonly defined in sRGB and hex notation as #008080, with equivalent HSL values of 180° hue, 100% saturation, and 50% lightness. In printing, process teals are built from high cyan and moderate yellow with reduced black, while in screen display it appears as a vivid mid‑saturation greenish‑blue. This overview covers core definitions, measurable color attributes, psychological associations, practical uses in design and branding, contrast and accessibility guidance, and contextual considerations to support repeatable, reliable decisions.
Defining Teal and Key Specifications
Color Models and Standard Values
Teal is anchored by a stable set of numeric values across major color models, which supports consistent use across digital and print workflows.
| Attribute | Verified Detail | Source Type |
|---|---|---|
| Hex (Web) | #008080 | W3C/SRGB |
| RGB | 0, 128, 128 | sRGB |
| HSL | 180°, 100%, 50% | Standard conversion |
| CMYK (Process) | C 100%, M 0%, Y 21%, K 50% | Typical print approximation |
| HSV/HSB | 180°, 100%, 50% | Device-independent model |
| Pantone | Not a standard Pantone; closest spot approximations vary | Pantone literature |
Psychology and Perception
Teal inherits traits from both blue and green while carrying its own associations. It is frequently linked to calm, clarity, focus, and balance, with some contexts emphasizing sophistication or creativity. In color psychology research and design practice, teal is described as a cool, moderately saturated hue that can feel steady yet quietly vibrant. Cultural meanings vary: in Western contexts it often suggests water and nature, while in some Eastern associations it can symbolize renewal. These responses are shaped by personal experience, cultural framing, and usage context, so treat psychological effects as tendencies rather than fixed rules.
Design Applications and Brand Use
Teal functions effectively in interfaces, identities, and editorial systems when aligned with audience expectations and accessibility needs. Common applications include:
- SaaS and digital products: Teal conveys modern, calm UI surfaces and accents that support focus and reduced visual noise.
- Healthcare and wellness: Its ties to water and balance support messages of clarity, hygiene, and steady care.
- Education and civic tools: Readable contrasts and associations with trust make teal suitable for learning and institutional interfaces.
- Creative and media brands: Teal can signal innovation and artistic nuance when paired with thoughtful typographic systems.
Using Teal in UI and Editorial Systems
In user interfaces, reserve pure teal for key accents, actions, or status indicators, and maintain sufficient luminance contrast with backgrounds. For text and icons, pair teal on light neutrals or use lighter tints of teal for surfaces, while ensuring interactive elements meet contrast requirements. In editorial design, teal can appear in pull quotes, section bands, data visualizations, and captions when coordinated with a stable typographic hierarchy. Define a compact system with guidance on when to use teal vs. neutral tones, and document exceptions to preserve clarity over time.
Accessibility and Contrast Guidance
When using teal for text or interactive elements, verify contrast against adjacent colors. On white (#FFFFFF), teal #008080 yields a contrast ratio around 3.1:1, which does not meet AA thresholds for normal text but can suffice for large text or decorative uses. On white, lighter tints of teal improve readability, while darker teal surfaces or pairing with white text can raise contrast into AA/AAA ranges for interfaces. Always test combinations with real content and include alternatives such as outlines or icons to ensure information is not conveyed by color alone.
Context, Culture, and Practical Considerations
Teal’s effectiveness depends on context, audience expectations, and surrounding palettes. In security‑sensitive flows, avoid relying solely on color (including teal) to communicate errors or actions; include icons or text cues. When introducing teal into an established palette, evaluate existing brand assets and accessibility requirements, and prefer stable definitions (e.g., HEX or RGB values) over named colors that may vary by platform. Consider cultural interpretations where relevant, and coordinate with linguistic localization teams to avoid unintended meanings. Document your teal choices and rationales so decisions remain consistent and auditable.
Practical Checks and Comparison
Use the following checklist when integrating teal into a product or campaign to reduce rework and ensure clarity of communication.
- Define exact color values (HEX/RGB) and include fallback neutrals for environments where color rendering varies.
- Verify contrast ratios for text and interactive targets against backgrounds; aim for at least 4.5:1 for normal text.
- Confirm meaning is clear without color dependency; add labels, patterns, or icons where needed.
- Test teal on actual devices and lighting conditions, especially for data visualizations and infographics.
- Document usage rules and exceptions so future edits preserve intent and accessibility.
Summary and Stable Guidance
Teal is a durable, versatile hue with established digital and print definitions that support consistent application. By pairing it with considered contrast practices, clear usage guidelines, and accessible design patterns, teams can use teal to support clarity, brand coherence, and long‑term recognition. The values above provide a repeatable baseline; combine them with user testing and documented systems to ensure teal remains effective across contexts and updates.