Teal HEX Code
The HEX code for teal is #008080. Teal is a cyan-like color created by equal parts of green and blue with no red. It combines the calming qualities of blue with the renewal energy of green, making it popular in healthcare, wellness, and modern design.
Teal Color Values
| Format | Value |
|---|---|
| HEX | #008080 |
| RGB | rgb(0, 128, 128) |
| HSL | hsl(180, 100%, 25%) |
| CMYK | C:100 M:0 Y:0 K:50 |
Teal Shades and Variations
| Shade | HEX | Description |
|---|---|---|
| Light Cyan | #E0FFFF | Very light teal |
| Cyan | #00FFFF | Bright cyan |
| Dark Cyan | #008B8B | Dark teal |
| Teal | #008080 | CSS teal |
| Dark Teal | #014D4E | Deep teal |
| Turquoise | #40E0D0 | Bright blue-green |
| Aquamarine | #7FFFD4 | Light blue-green |
| Light Sea Green | #20B2AA | Medium teal |
Teal in Design
Teal conveys:
- Balance: Blue calm + green growth
- Sophistication: Modern, refined
- Wellness: Healthcare, spa
- Trustworthiness: Professional yet approachable
Teal Color Palettes
``css
/* Teal-based palette */
:root {
--teal-50: #F0FDFA;
--teal-100: #CCFBF1;
--teal-500: #14B8A6;
--teal-700: #0F766E;
--teal-900: #134E4A;
}
/* Teal accent design */
.teal-accent {
background-color: #F0FDFA;
border-left: 4px solid #14B8A6;
}
`
Teal vs Cyan vs Turquoise
| Color | HEX | Description |
|---|---|---|
| Cyan | #00FFFF | Pure blue-green (bright) |
| Teal | #008080 | Dark cyan |
| Turquoise | #40E0D0 | Blue-green with more blue |
| Aqua | #00FFFF | Same as cyan |
Tailwind Teal Scale
| Level | HEX | Use |
|---|---|---|
| 50 | #F0FDFA | Subtle backgrounds |
| 200 | #99F6E4 | Light accent |
| 500 | #14B8A6 | Primary teal |
| 700 | #0F766E | Dark teal |
| 900 | #134E4A | Very dark |
Brand Teals
| Brand | HEX | Industry |
|---|---|---|
| TikTok | #00F2EA | Social media |
| Canva | #00C4CC | Design |
| Robin Hood | #00C805 | Finance |
| Deliveroo | #00CCBC | Food delivery |
Teal is an excellent choice for brands wanting to appear both professional and approachable, standing out from traditional corporate blue.A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.