CSS Color: MediumTurquoise
Named CSS color MediumTurquoise — #48D1CC in HEX, rgb(72, 209, 204) in RGB, hsl(178, 60%, 55%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | MediumTurquoise | color: MediumTurquoise; |
| HEX | #48D1CC | color: #48D1CC; |
| RGB | rgb(72, 209, 204) | color: rgb(72, 209, 204); |
| HSL | hsl(178, 60%, 55%) | color: hsl(178, 60%, 55%); |
About MediumTurquoise
MediumTurquoise is a balanced cyan-green that bridges the gap between Turquoise and DarkCyan. At hex `#48D1CC`, it sits at 178 degrees on the hue wheel with 60% saturation and 55% lightness, making it vibrant yet not overwhelming.
In web design, MediumTurquoise is a versatile color for buttons, links, icons, and accent elements. Its balanced saturation and lightness give it enough presence to serve as a primary color while remaining pleasant in larger areas. It works across both light and dark themes.
For accessibility, MediumTurquoise against white achieves approximately 2.4:1 contrast, which is insufficient for text. Against dark backgrounds, it provides good contrast and a fresh, modern appearance.
MediumTurquoise is more saturated than PaleTurquoise and lighter than DarkCyan. It pairs well with white, navy, coral, warm gray, and gold accents. In Tailwind CSS, `teal-400` or `cyan-500` provide close approximations for this balanced cyan tone.
FAQ
What is the hex code for MediumTurquoise?
The CSS named color MediumTurquoise has the hex code #48D1CC. You can use it in CSS as color: #48D1CC; or simply color: MediumTurquoise;.
What is MediumTurquoise in RGB?
In RGB notation, MediumTurquoise is rgb(72, 209, 204). Use it in CSS as color: rgb(72, 209, 204);.
What is MediumTurquoise in HSL?
In HSL notation, MediumTurquoise is hsl(178, 60%, 55%). Use it in CSS as color: hsl(178, 60%, 55%);.
What color category is MediumTurquoise?
MediumTurquoise belongs to the Blue color family in the CSS named colors specification.
Can I use the name "MediumTurquoise" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: MediumTurquoise; or background-color: MediumTurquoise; directly in your stylesheet. Named colors are case-insensitive.
Related Colors
Try in Color Converter
Convert MediumTurquoise to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →