Teal Background
#008080 · rgb(0, 128, 128)
About the teal background
Teal (#008080) halves green and blue equally — rgb(0, 128, 128) — landing exactly between green's calm and blue's trust. It reads as balanced, competent and quietly fresh, which made it the corporate color of the 90s and a startup favorite ever since.
White text on teal measures about 4.8:1 — passing WCAG AA even for body copy — while black sits at about 4.4:1. As a section background it pairs beautifully with coral, gold and cream accents.
What to use a teal background for
- Startup, fintech and healthcare branding
- Calm hero sections with white headlines
- Color-pairing accents with coral and gold
- Success/info states that feel friendlier than blue
How to use teal in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page teal background */
body {
margin: 0;
background-color: #008080;
}
/* A single section or element */
.hero {
background-color: rgb(0, 128, 128);
} Teal shades and tints
Click any swatch to copy it. Tints mix teal with white; shades mix it with black.
Teal background FAQ
What is the hex code for teal?
CSS `teal` is #008080 — rgb(0, 128, 128), equal green and blue at half brightness. In HSL it's hsl(180, 100%, 25%).
Is teal accessible with white text?
White on #008080 measures about 4.8:1 — it clears the WCAG AA 4.5:1 bar for body copy, which makes teal one of the few darker colors that works with white text at any size.
What is the hex code for teal?
Teal is #008080 in hexadecimal, rgb(0, 128, 128) in RGB and hsl(180, 100%, 25%) in HSL. Paste #008080 into any CSS background-color property to use it.
How do I set a teal background in CSS?
Add background-color: #008080; to any element, or apply it to the whole page: body { background-color: #008080; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(0, 128, 128) — with identical results.