What Colors Go with Teal? Color Pairings for a Modern Look
Teal is a deep blue-green that works well as a brand color or a strong accent in web design. In CSS, the named color teal is defined as #008080. This article uses that teal #008080 as the base color and pairs it with soft white, cool gray, and warm sand. The goal is to keep teal visually present while using lightness and area to create a clean, modern-looking palette.
Control teal with area and lightness rather than adding more vivid colors
In CSS HSL (Hue, Saturation, and Lightness), saturation describes color intensity and lightness describes how light or dark a color is. Teal #008080 has a hue of 180 degrees, saturation of 100%, and lightness of about 25%. Because it is a deep, saturated color, it is easier to organize the page when large surfaces stay light and low in saturation while teal is concentrated in headings, branding, and selected emphasis.
HueRoll’s guide to complementary and analogous colors also notes that hue distance alone does not complete a palette; saturation, lightness, area, and text contrast matter too. With teal, soft white and cool gray create quiet surfaces, while a small amount of warm sand adds contrast without turning the palette into a competition between strong colors.
Three color pairings for a modern teal palette
| Color | HEX | Role | How to use it |
|---|---|---|---|
| Soft white | #F7FAF9 | Page background | Keeps the largest surface nearly white so teal can stand out in headings and brand accents. |
| Cool gray | #E1E8E7 | Cards and supporting surfaces | Keeps a subtle blue-green connection while lowering saturation and separating one layer from the background. |
| Warm sand | #E8D9C2 | Small accent | Adds restrained warmth in badges or small information areas. |
For body text, dark charcoal #243233 has a contrast ratio of about 12.66:1 on soft white #F7FAF9, about 10.70:1 on cool gray #E1E8E7, and about 9.59:1 on warm sand #E8D9C2. All three exceed the WCAG 2.2 (Web Content Accessibility Guidelines) minimum of 4.5:1 for normal-size text.
Teal #008080 has about 4.55:1 contrast on soft white #F7FAF9, but only about 3.84:1 on cool gray #E1E8E7 and about 3.44:1 on warm sand #E8D9C2. If teal is used for normal-size text, the actual background needs to be checked. White text #FFFFFF on teal #008080 has a contrast ratio of about 4.77:1.
For primary links or a CTA (call-to-action button), deeper teal #005F5F is a more reliable choice. Its contrast ratio is about 7.14:1 against soft white #F7FAF9, about 6.03:1 against cool gray #E1E8E7, and about 5.40:1 against warm sand #E8D9C2. White text #FFFFFF on deep teal #005F5F has a contrast ratio of about 7.49:1.
Main color:#008080 / Background:#F7FAF9 / Supporting surface:#E1E8E7 / Action color:#005F5F
For a modern look, separate the brand color from the action color
On a service page or dashboard, soft white can cover the page background, cool gray can support cards, warm sand can appear in small information areas, teal can be used for headings and brand accents, and deep teal can be reserved for the primary button. This creates a clear hierarchy without adding unnecessary colors.
The 60–30–10 approach can be used as a loose hierarchy rather than an exact pixel formula: let the background occupy the largest area, supporting colors a medium area, and the main or action color a smaller focal role. Do not communicate selection or importance through color alone; add text labels, icons, underlines, borders, or other visible cues.
HueRoll lets you review tints, shades, complementary and analogous colors, other harmony suggestions, and 60–30–10 candidates from a selected color. After choosing teal, use tints for background candidates, shades for action colors, and analogous or complementary suggestions for supporting colors. HueRoll’s contrast section compares the selected color only with white and black, so the arbitrary two-color contrast ratios shown in this article were calculated separately.