What Colors Go with Cyan? Color Pairings That Make the Most of Vivid Light Blue
Cyan is a vivid color between blue and green. In CSS, the named color cyan is defined as #00FFFF and is a synonym of aqua. This article uses that pure cyan #00FFFF as a concrete example and shows how to keep its vivid character without making text or controls difficult to distinguish.
Separate cyan from large surfaces with deeper supporting colors
In CSS HSL (Hue, Saturation, and Lightness), cyan #00FFFF is hsl(180 100% 50%): hue 180 degrees, saturation 100%, and lightness 50%. It is therefore a fully saturated color positioned between green and blue. Instead of spreading the same intensity across the whole interface, use off-white or pale cool colors for large surfaces and reserve deeper colors for text and primary actions.
HueRoll’s guide to complementary and analogous colors explains that nearby hues are useful for continuity, while more distant hues work better as accents. With cyan, pale blue-green and gray can cover larger areas. If you add a warm hue, keeping it to a small area helps prevent two strong colors from competing.
Three colors that help vivid cyan work in a layout
| Color | HEX | Role | How to use it |
|---|---|---|---|
| Cool white | #F6FAFA | Page background | Creates a near-white surface so cyan can stay limited to decoration and important focal points. |
| Pale blue-gray | #D9E5E7 | Cards and supporting surfaces | Keeps a cool-color connection while separating a card from the page background without a harsh break. |
| Soft sand | #F2E3D5 | Small warm surface | Adds a temperature shift in a badge or small information panel when an all-cool palette feels too uniform. |
For body text, dark slate #183237 has a contrast ratio of about 12.88:1 on cool white #F6FAFA, about 10.52:1 on pale blue-gray #D9E5E7, and about 10.79:1 on soft sand #F2E3D5. All three exceed the WCAG 2.2 (Web Content Accessibility Guidelines) minimum of 4.5:1 for normal-size text.
Pure cyan #00FFFF should not automatically be used as normal text on a light page. Against cool white #F6FAFA, its contrast ratio is only about 1.19:1. White text #FFFFFF on cyan #00FFFF is also only about 1.25:1. If cyan is used as a filled surface, dark slate #183237 on it reaches about 10.80:1.
For primary links or a CTA (call-to-action button), deep teal #005B66 is a more reliable choice. Its contrast ratio is about 7.43:1 against cool white #F6FAFA, about 6.07:1 against pale blue-gray #D9E5E7, and about 6.22:1 against soft sand #F2E3D5. White text #FFFFFF on deep teal #005B66 has a ratio of about 7.81:1.
Vivid accent:#00FFFF / Background:#F6FAFA / Supporting surface:#D9E5E7 / Action color:#005B66
Separate the color that attracts attention from the color used for controls
Because cyan #00FFFF has very low contrast against a light page, it works better there for decoration, one chart series, or interior icon color when that color is not required to understand the meaning. If a cyan-filled control must be identifiable against a light background, add a deep teal #005B66 border or another non-color cue so the control boundary does not depend on cyan alone.
The 60–30–10 approach can also be used as a loose hierarchy rather than an exact pixel formula: let the light background occupy the largest area, use a supporting color in a medium role, and keep vivid cyan comparatively small. Do not communicate selected versus unselected states or other meanings through color alone; combine color with 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 cyan, start with tints and analogous colors for background candidates, then compare shades for action 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.