Teal & Gold color palette
Three teals, from a deep #008080 to a bright aqua #48D1CC, set against gold #FFD700 and orange. Teal and gold sit nearly opposite each other on the color wheel, so the warm accents glow. It can look luxurious or beachy depending on how much gold you use. Boutique hotels and wedding planners can both get a lot from it.
Teal & Gold palette in use
Use white or cream as the background with #008080 for headings and text. #FFA500 makes the button color, #FFD700 adds trim and icons, and #20B2AA and #48D1CC fill bands and cards.
This pair measures 14.97:1, so it works for body text too. The button uses #FFA500 with black text.
ButtonGood for
- Boutique hotel branding
- Wedding planner website
- Wealth management deck
- Mediterranean restaurant menu
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#008080 | #FFD700 | 3.40:1 | AA large |
Teal & Gold palette as code
CSS variables
:root {
--teal-and-gold-1: #008080;
--teal-and-gold-2: #20B2AA;
--teal-and-gold-3: #48D1CC;
--teal-and-gold-4: #FFD700;
--teal-and-gold-5: #FFA500;
}Tailwind v4
@theme {
--color-teal-and-gold-1: #008080;
--color-teal-and-gold-2: #20B2AA;
--color-teal-and-gold-3: #48D1CC;
--color-teal-and-gold-4: #FFD700;
--color-teal-and-gold-5: #FFA500;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'teal-and-gold': {
100: '#008080',
200: '#20B2AA',
300: '#48D1CC',
400: '#FFD700',
500: '#FFA500',
},SCSS
$teal-and-gold-1: #008080;
$teal-and-gold-2: #20B2AA;
$teal-and-gold-3: #48D1CC;
$teal-and-gold-4: #FFD700;
$teal-and-gold-5: #FFA500;JSON
["#008080","#20B2AA","#48D1CC","#FFD700","#FFA500"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.