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.