CSS Color: Turquoise
Named CSS color Turquoise — #40E0D0 in HEX, rgb(64, 224, 208) in RGB, hsl(174, 72%, 56%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Turquoise | color: Turquoise; |
| HEX | #40E0D0 | color: #40E0D0; |
| RGB | rgb(64, 224, 208) | color: rgb(64, 224, 208); |
| HSL | hsl(174, 72%, 56%) | color: hsl(174, 72%, 56%); |
About Turquoise
Turquoise is a vibrant blue-green named after the semiprecious gemstone. At hex `#40E0D0`, it sits at 174 degrees on the hue wheel with 72% saturation and 56% lightness — a bright, energetic color that is slightly more blue than green.
In web design, Turquoise is extremely popular as a primary brand color for its unique balance of friendliness, creativity, and trust. It appears frequently in creative agencies, travel platforms, and modern startups. Turquoise has a youthful, optimistic character that differentiates brands from the more corporate feel of pure blue.
For accessibility, Turquoise against white achieves about 2.1:1 contrast, which fails WCAG requirements for text. Use it as a background or decorative element on light surfaces. Against dark backgrounds, it provides good readability.
Turquoise pairs beautifully with coral (its warm complement), navy, white, and warm gray. It is brighter and more saturated than Aquamarine and cooler than MediumSeaGreen. In Tailwind CSS, `teal-400` or `cyan-400` provide close approximations.
FAQ
What is the hex code for Turquoise?
The CSS named color Turquoise has the hex code #40E0D0. You can use it in CSS as color: #40E0D0; or simply color: Turquoise;.
What is Turquoise in RGB?
In RGB notation, Turquoise is rgb(64, 224, 208). Use it in CSS as color: rgb(64, 224, 208);.
What is Turquoise in HSL?
In HSL notation, Turquoise is hsl(174, 72%, 56%). Use it in CSS as color: hsl(174, 72%, 56%);.
What color category is Turquoise?
Turquoise belongs to the Blue color family in the CSS named colors specification.
Can I use the name "Turquoise" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Turquoise; or background-color: Turquoise; directly in your stylesheet. Named colors are case-insensitive.
Related Colors
Try in Color Converter
Convert Turquoise to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →