Shades of Cyan

Cyan sits at 180° on the HSL wheel, directly opposite red, and the family spans roughly 165° to 195°, from blue-green teals to cool aquas. It is one of the secondary colors of light, made from full green and full blue, and one of the process ink colors in CMYK printing. Because it combines green and blue, pure cyan is very light: its relative luminance of 0.7874 is second only to yellow among the fully saturated hues. At low lightness cyan becomes teal; at high lightness it becomes pale aqua and ice blue.

In CSS, cyan and aqua are two names for the same value, #00FFFF. Teal (#008080) is the same hue at 25% lightness, and darkcyan (#008B8B) is only slightly lighter. Turquoise (#40E0D0) sits at 174°, a touch greener, and aquamarine (#7FFFD4) pushes further toward green at 160°.

10 cyan CSS color names

Sorted from lightest to darkest by OKLCH lightness. Open any color for its codes, shades, harmonies and contrast.

Using cyan in design

Cyan and teal feel clean and technical, which suits health, water, travel and developer tools. Bright cyan is a popular accent on dark interfaces and in data visualizations, where it stands out against navy and charcoal, and teal is a common alternative to blue for info states and links in brands that want to avoid the default look.

Accessibility tip: the name can mislead. Teal #008080 with white text measures 4.77:1 and passes AA, but darkcyan #008B8B, despite the "dark" in its name, measures 4.14:1 and fails. Pure cyan on white is just 1.25:1, so keep it for backgrounds and dark-mode accents.

Other color families

Related tools