Turquoise Background
#40E0D0 · rgb(64, 224, 208)
About the turquoise background
Turquoise (#40E0D0) lifts teal into the tropics — rgb(64, 224, 208): blue-green at high lightness and saturation. It's shallow water over white sand, pool tiles and vacation branding.
Black text on turquoise measures about 12.8:1 (excellent), white only about 1.6:1, so it behaves like a light background: dark type, bright mood.
What to use a turquoise background for
- Travel, resort and pool/beach branding
- Fresh, youthful app and landing-page accents
- Tropical gradient bases with coral and sand tones
- Playful success states and badges
How to use turquoise in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page turquoise background */
body {
margin: 0;
background-color: #40E0D0;
}
/* A single section or element */
.hero {
background-color: rgb(64, 224, 208);
} Turquoise shades and tints
Click any swatch to copy it. Tints mix turquoise with white; shades mix it with black.
Turquoise background FAQ
What is the hex code for turquoise?
CSS `turquoise` is #40E0D0 — rgb(64, 224, 208), or hsl(174, 72%, 56%). It's noticeably lighter and brighter than teal #008080.
Turquoise vs teal — which should I use?
Use teal #008080 for professional, darker surfaces and turquoise #40E0D0 for bright, playful ones. Both are blue-greens; teal is the serious sibling, turquoise the energetic one.
What is the hex code for turquoise?
Turquoise is #40E0D0 in hexadecimal, rgb(64, 224, 208) in RGB and hsl(174, 72%, 56%) in HSL. Paste #40E0D0 into any CSS background-color property to use it.
How do I set a turquoise background in CSS?
Add background-color: #40E0D0; to any element, or apply it to the whole page: body { background-color: #40E0D0; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(64, 224, 208) — with identical results.