Teal Color Palette
Clarity · Sophistication · Calm
A sophisticated teal palette from pale aqua to deep teal. Teal sits between blue and green — suggesting calm, clarity, and sophistication. Popular in healthcare, wellness, and SaaS products for its clean, trustworthy feel.
| Swatch | Name | Hex |
|---|---|---|
| Teal 50 | #F0FDFA | |
| Teal 100 | #CCFBF1 | |
| Teal 300 | #5EEAD4 | |
| Teal 500 | #14B8A6 | |
| Teal 700 | #0F766E | |
| Teal 900 | #134E4A |
Best For
Teal pairs exceptionally well with white and light gray backgrounds. Use deep teal for navigation and headers, lighter tones for card backgrounds and hover states.
CSS Custom Properties
:root {
--teal-100: #F0FDFA;
--teal-200: #CCFBF1;
--teal-300: #5EEAD4;
--teal-400: #14B8A6;
--teal-500: #0F766E;
--teal-600: #134E4A;
}Tailwind CSS Config
// tailwind.config.ts
export default {
theme: {
extend: {
colors: {
"teal": {
"100": "#F0FDFA",
"200": "#CCFBF1",
"300": "#5EEAD4",
"400": "#14B8A6",
"500": "#0F766E",
"600": "#134E4A",
},
},
},
},
}Generate a custom palette
Enter any seed colour and generate complementary, analogous, triadic, and monochromatic palettes. Export as CSS variables, Tailwind config, or JSON.
Open Color Palette GeneratorFrequently Asked Questions
What hex codes are in the Teal Color Palette?
The Teal Color Palette includes: Teal 50 (#F0FDFA), Teal 100 (#CCFBF1), Teal 300 (#5EEAD4), Teal 500 (#14B8A6), Teal 700 (#0F766E), Teal 900 (#134E4A).
What is the mood of the Teal Color Palette?
Teal Color Palette evokes: Clarity · Sophistication · Calm. A sophisticated teal palette from pale aqua to deep teal. Teal sits between blue and green — suggesting calm, clarity, and sophistication. Popular in healthcare, wellness, and SaaS products for its clean, trustworthy feel.
What industries use the Teal Color Palette?
The Teal Color Palette is popular in: Healthcare, SaaS, Wellness, Finance. Teal pairs exceptionally well with white and light gray backgrounds. Use deep teal for navigation and headers, lighter tones for card backgrounds and hover states.
What colours pair well with this palette?
This palette pairs well with: white, gray, coral. Teal pairs exceptionally well with white and light gray backgrounds. Use deep teal for navigation and headers, lighter tones for card backgrounds and hover states.