CSS Color: Teal
Named CSS color Teal — #008080 in HEX, rgb(0, 128, 128) in RGB, hsl(180, 100%, 25%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Teal | color: Teal; |
| HEX | #008080 | color: #008080; |
| RGB | rgb(0, 128, 128) | color: rgb(0, 128, 128); |
| HSL | hsl(180, 100%, 25%) | color: hsl(180, 100%, 25%); |
About Teal
Teal is a balanced cyan-green that sits at exactly 180 degrees on the hue wheel — the midpoint between green and blue. With equal green and blue values of 128 and no red, it combines the calming properties of blue with the freshness of green.
In web design, Teal is extremely popular for primary brand colors, navigation bars, and link text. Its medium darkness (25% lightness) provides good contrast on light backgrounds while remaining clearly colored. Teal achieves approximately 5.1:1 contrast against white, passing WCAG AA for all text sizes.
Teal conveys trust, sophistication, and modernity. It is widely used in healthcare, finance, and technology websites. Unlike pure blue, Teal feels fresher and more approachable. Unlike pure green, it feels more professional and restrained.
Teal is the complement of Red on the color wheel. It pairs well with coral, white, light gray, cream, and gold. In Tailwind CSS, `teal-700` is the closest match. Teal is one of the most reliable colors for accessible, attractive UI design.
FAQ
What is the hex code for Teal?
The CSS named color Teal has the hex code #008080. You can use it in CSS as color: #008080; or simply color: Teal;.
What is Teal in RGB?
In RGB notation, Teal is rgb(0, 128, 128). Use it in CSS as color: rgb(0, 128, 128);.
What is Teal in HSL?
In HSL notation, Teal is hsl(180, 100%, 25%). Use it in CSS as color: hsl(180, 100%, 25%);.
What color category is Teal?
Teal belongs to the Blue color family in the CSS named colors specification.
Can I use the name "Teal" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Teal; or background-color: Teal; directly in your stylesheet. Named colors are case-insensitive.
Related Colors
Try in Color Converter
Convert Teal to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →