Bold combinationsOpposites attract

Red and Teal Color Combination

Teal is close to the complement of red, so each color makes the other look more saturated — deliberate tension, best kept to focal points.

Hex codes #FF0000 and #008080 — a opposites attract pair with a 1.19:1 contrast ratio between the two colors.

Values for this combination

Red
RGB
rgb(255, 0, 0)
HSL
hsl(0, 100%, 50%)
Hex
#FF0000
Teal
RGB
rgb(0, 128, 128)
HSL
hsl(180, 100%, 25%)
Hex
#008080

Contrast between Red and Teal

Contrast ratio 1.19:1. This only decides whether one color of the pair can carry text on the other — the colors themselves always work side by side.

AA · Normal text (≥ 4.5:1)FAIL
AA · Large text (≥ 3:1)FAIL
AAA · Normal text (≥ 7:1)FAIL
AAA · Large text (≥ 4.5:1)FAIL
Aa

Teal text on a Red surface, at 1.19:1.

Aa

Red text on a Teal surface, at 1.19:1.

Where this pair works

  • Pop art posters
  • Product labels
  • Kids brands

Give Red (#FF0000) roughly 60% of the surface, Teal (#008080) about 30%, and leave the last 10% for the neutral below. That split is what keeps a two-color combination from turning into a fight.

A five-color set from this pair

Red and Teal as a working palette: a pale tint of the lighter color for backgrounds, both colors as they are, a deep shade of the darker color for text and a neutral for everything in between.

  • Pale tint#fae1e1backgrounds and large surfaces · closest to MistyRose
  • Primary#FF0000the dominant color · closest to Red
  • Secondary#008080the accent color · closest to Teal
  • Deep shade#004d4dtext, borders and icons · closest to DeepJungleGreen
  • Neutral#f6f4f4dividers and quiet surfaces · closest to WhiteSmoke

Explore Red and Teal on their own

More color combinations

Red and Teal are a opposites attract pair: teal is close to the complement of red, so each color makes the other look more saturated — deliberate tension, best kept to focal points.

Frequently asked questions

Yes — this pair is used for pop art posters, product labels, kids brands. The two colors measure 1.19:1 against each other, which means the two should sit side by side as surfaces rather than as text and background.

Good to know

  • Every value on this page is calculated from #FF0000 and #008080 — nothing is hardcoded.
  • Build a longer palette out of Red or Teal in the palette generator, or test your own text pair in the contrast checker.

Put this combination to work

Turn Red and Teal into a full palette, a gradient or a set of shades — or check the pair against WCAG.

From the blog