ChromaWell

Cyan Shades

Every named color in the cyan family, with computed conversions and contrast data — membership derived by computed hue, not a hand-maintained list. 51 colors shown below.

Quick facts (computed from this family's 51 members)

  • Average lightness: 52%
  • Average saturation: 88%
  • 14 of 51 pass WCAG AA as normal text on white
  • 37 of 51 pass WCAG AA as normal text on black
  • Lightest named member: LightCyan
  • Darkest named member: dark teal
  • Most saturated member: Aqua

The color science

Cyan sits at 175-195°, directly opposite red on a traditional color wheel, which makes it red's complementary — a fact print production relies on directly, since CMYK printing uses cyan ink specifically because it absorbs (subtracts) red light while reflecting blue and green wavelengths back to the eye. The name is a 19th-century coinage from Greek 'kyanos' (dark blue), even though modern cyan reads as a bright blue-green rather than dark blue — a naming drift that happened as pigment and ink usage diverged from the original Greek sense of the word over time. Cyan ink specifically became a fixed standard once four-color offset printing consolidated on the CMYK model in the 20th century, a genuinely different origin story from most other named colors here, which trace back to natural pigments, dyes, or objects rather than a deliberately engineered industrial-process standard. Before CMYK consolidated as the dominant subtractive model, earlier color-printing processes experimented with different primary-ink sets entirely, and cyan's specific position as one of the four standardized process colors is a 20th-century industrial standardization outcome rather than an inevitable or ancient choice.

Common uses in design

Cyan is rare as a primary brand color (it reads as slightly 'unfinished' or clinical to many Western audiences, closer to a raw material than a considered palette choice) but common as a highlight/accent within tech and data-visualization interfaces, where its high contrast against dark backgrounds makes it a favorite for dark-mode UI accents and terminal/code-editor themes built for developers who spend long hours looking at the screen. Retro-futurist and synthwave-inspired visual design also leans on cyan heavily, typically paired with magenta against a dark background, drawing on decades of neon-sign and early-computer-display aesthetic associations rather than any natural-material color reference. Early CRT and LCD monitor calibration test patterns also used pure cyan alongside the other primary and secondary colors as a standard reference swatch, giving the hue a long, largely invisible history in display-engineering contexts well before it became a deliberate aesthetic choice. Broadcast television's classic color-bars test pattern, still recognizable today even to people who've never worked in video production, includes a full-saturation cyan bar specifically because it sits at one extreme corner of the displayable color gamut, making gamut and calibration errors easy to spot at a glance. Scientific and technical data visualization also reaches for cyan disproportionately often as one end of a diverging color scale, commonly paired with a warm orange or red at the other end, since the two sit far enough apart on the wheel to read as clearly opposite values even to viewers with common forms of color-vision deficiency.

Accessibility notes

Cyan on white backgrounds is one of the hardest light-hue combinations to make WCAG-compliant — even moderately saturated cyans struggle to clear 3:1 against white — so it performs far better as light text on a dark background (where it commonly exceeds AA and even AAA) than the reverse, which is exactly why cyan shows up so often in dark-themed interfaces and so rarely in light ones. Because cyan and sky blue sit fairly close together on the wheel despite being classified as separate families on this site, a design system using both as distinct tokens benefits from an explicit perceptual-distance check rather than relying on the two names alone to guarantee visual separation. Dark-mode-first products in particular benefit from testing a candidate cyan against several different near-black surface values rather than a single reference dark background, since the exact darkness and any faint hue cast in the surface color can shift a borderline cyan's measured contrast ratio more than designers often expect.

Named examples

Cyan itself is a directly named CSS color and an exact synonym for Aqua (#00FFFF) — both keywords map to the identical hex value, a deliberate CSS Color Module decision to support both the print/color-theory term and the more casual, everyday 'aqua' term used outside technical contexts. DarkTurquoise and PaleTurquoise extend the family with a genuinely separate naming lineage — turquoise traces to a gemstone traded through Turkey historically, an entirely different real-world reference from cyan's print-industry and 'aqua' water-descriptive roots. LightCyan sits at the very pale end of the family, close enough to white that it's most useful as a subtle background tint rather than as a recognizably 'cyan' accent in its own right.

Building a cyan design-token scale

Cyan-family tokens show up disproportionately often in code-editor and terminal color schemes (Solarized, Dracula, and Nord all include a dedicated cyan slot distinct from their blue) because it stays legible without muddying against a near-black background at moderate saturation, exactly the environment most syntax-highlighting themes are designed for. Outside dev-tool UI, a full cyan token scale is unusual in general product design systems; it's more often a single accent value than a full ramp, reserved for links or interactive elements specifically in dark-mode contexts where its dark-background contrast performance is strongest. Because cyan is so strongly associated with technical and developer-facing UI specifically, a consumer-facing product adopting it as a primary brand color should expect at least some audience association with 'tech tooling' baked into the choice, whether or not that's the intended positioning.

Every cyan in the dataset