Teal color guide
HEX
#008080
RGB
0, 128, 128
HSL
180°, 100%, 25%
HSV
180°, 100%, 50%
Teal (#008080) sits exactly where blue stops feeling corporate and green starts feeling botanical. Because it has the depth of a dark cyan, it can carry large surfaces, charts, and headings without feeling as expected as navy or as playful as brighter greens.
Best for
Healthcare, wellness, and sustainability presentations that need to feel trustworthy and modern.
Accessibility
Teal text on white passes AA at 4.77:1, which makes it usable for headings and short labels.
How does teal compare to nearby colors?
What is the difference between teal and cerulean?
The visible difference between Teal (#008080) and Cerulean (#007BA7) is subtle, but it still nudges the family from evergreen and resinous toward navy ink. Teal makes the palette feel denser and more anchored, while Cerulean keeps more daylight in the composition. Start with teal when the palette wants more evergreen and resinous; switch to cerulean when the better fit is navy ink.
What color is teal?
Teal is one of the original named web colors, but the word is older than CSS: it comes from the stripe around a Eurasian teal duck’s eye. In modern digital palettes it usually functions as a dark cyan that is easier to brand with than pure cyan.
Some sources cite: #008888.
What is the hex code for teal?
| Format | Value |
|---|---|
| HEX | #008080 |
| RGB | rgb(0, 128, 128) |
| HSL | hsl(180°, 100%, 25%) |
| HSV / HSB | hsv(180°, 100%, 50%) |
| CMYK (approx.) | cmyk(100%, 0%, 0%, 50%) |
Convert Teal to other color formats
Open the color converter with Teal (#008080) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Teal in the color converter →What does teal mean in design?
Teal is often associated with clarity, composure, and measured distinctiveness. It feels less conservative than navy and less earthy than green, which makes it useful when a system needs to look thoughtful without becoming either generic or trendy.
How do I use teal in code?
| CSS (hex) | color: #008080; |
| CSS (rgb) | color: rgb(0, 128, 128); |
| CSS (hsl) | color: hsl(180, 100%, 25%); |
| RGB % | rgb(0%, 50%, 50%) |
| Tailwind | text-[#008080] |
| SwiftUI | Color(red: 0.000, green: 0.502, blue: 0.502) |
| UIKit | UIColor(red: 0.000, green: 0.502, blue: 0.502, alpha: 1.0) |
| Android | Color.rgb(0, 128, 128) |
| Compose | Color(0xFF008080) |
| Web Safe | #009999 |
Is teal accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 4.77:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| AaBlack text on this color | 4.4:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| AaThis color as text on white | 4.77:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| AaThis color as text on black | 4.4:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does teal look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with teal
Cream takes the hard digital edge off teal and makes the color feel more printed, paper-backed, and approachable.
Coral shifts teal away from a purely cool read and makes the combination feel more considered in real layouts.
White helps teal stay legible in charts, labels, and UI states where a muddier light neutral would blur the edges.
What colors clash with teal
Navy Blue sits too close to teal in both value and intensity, so the pair struggles to create clean separation for hierarchy.
Lime Green pushes teal toward a more product UI, sustainability, and general brand work mood, which can fight the finance, outdoors, and institutional systems role the source color usually handles best.
Neon Green changes the meaning of teal too abruptly, replacing the source color's finance, outdoors, and institutional systems cues with something much louder and less stable.
How should I use teal in design?
- •Teal works as a primary brand color for companies that want to feel trustworthy but not generic — it is distinctive without being risky.
- •Use teal for section headers, sidebar accents, and chart colors in data-heavy presentations.
- •Pair teal with warm neutrals (cream, tan) for an organic feel, or with white and gray for a clean tech aesthetic.
What are good teal palettes?
Healthcare modern
Healthcare, wellness, and sustainability presentations that need to feel trustworthy and modern.
Organic professional
Sustainability reports, food industry branding, and lifestyle brand materials.
Design with teal in Moda
Create a presentation or document using teal as your accent color. Moda's AI applies your color palette automatically.
Create a design with teal →What are the shades and tints of teal?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for teal?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Pine
Pine sits close to teal in hue, but its aqua-blue cast changes the mood of the palette even when the contrast shift is small.
Cerulean
Cerulean stays very close to teal in hue, but it lands lighter, which makes it better for backgrounds, tints, and softer supporting areas than for accents, stronger hierarchy, and firmer structure.
Jade
Jade keeps roughly the same visual weight as teal but changes the undertone story, which is often enough to move a palette from warmer and tactile to cooler and more technical, or the reverse.
Cyan
Cyan is close enough to teal to keep the palette cohesive, yet the lighter-darker shift still decides whether the family behaves more like atmosphere or more like structure.
Frequently asked questions
What is the hex code for teal?
The hex code for teal is #008080. In RGB, that's 0 red, 128 green, and 128 blue. The approximate CMYK equivalent is 100% cyan, 0% magenta, 0% yellow, and 50% key (black).
Is teal a warm or cool color?
Teal falls on the cool side of the palette, so warm companions create the clearest contrast while other cool tones keep the system more restrained.
Should teal lead the palette or stay in supporting roles?
Teal has enough chroma to take the lead, but it usually performs best when the surrounding system stays quieter. Treat it as the voice of emphasis, not the answer to every layout need.
Where does teal work best in a layout?
Teal has enough depth to anchor a layout while still reading as a color, which makes it useful for dark section blocks, headlines, and heavier accents.
Is teal accessible?
Teal can work as text on white at 4.77:1 contrast, but it is usually safest in headings, labels, and accent moments rather than long body copy.
More green colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Green colors
Compare teal with other green tones.
Blue colors
Explore nearby color families to build stronger palettes and contrasts.
Brown colors
Explore nearby color families to build stronger palettes and contrasts.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.