Cyan carries the hex code #00FFFF, which resolves to rgb(0, 255, 255) and hsl(180, 100%, 50%). Green and blue both sit at maximum output while red sits at zero, which places it at exactly 180° on the color wheel and makes it the direct opposite of red.
Cyan reaches just 1.25:1 against white, the lowest ratio of any fully saturated color, while on black it hits 16.75:1 and clears AAA. This page covers every code format, the computed palettes, the four elements where cyan performs, and the reason its contrast behaves so differently from the blue most teams expect.
What Is the Color Cyan?
Cyan sits at 180° on the color wheel, exactly halfway between green and blue. CSS gives it two keywords, cyan and aqua, and both resolve to #00FFFF, which makes them the only pair of aliases among the named web colors that describe a primary of the subtractive model.
The full code set for #00FFFF:
- HEX: #00FFFF
- RGB: rgb(0, 255, 255)
- RGBA: rgba(0, 255, 255, 1)
- HSL: hsl(180, 100%, 50%)
- HSB: 180, 100, 100
- CMYK: 100, 0, 0, 0
The CMYK reading explains cyan’s dual identity. At 100, 0, 0, 0 it’s a single ink at full strength, because cyan is one of the three subtractive primaries that print uses, while on screen it’s a secondary produced by mixing green and blue light.
Two channels at maximum output give cyan an unusually high relative luminance. Its lightness reads 50% in HSL, the same as pure red, and yet cyan measures nearly four times brighter in perceptual terms, which is the root of every contrast problem on this page.
Almost no product ships #00FFFF as a brand color. Teams that want a cyan identity land on a darkened value like #00BFBF or a desaturated teal, because the pure form is difficult to place anywhere text has to sit.
Why Does Cyan Have the Worst Contrast on White?
Cyan’s 1.25:1 against white comes from human luminance sensitivity rather than from any quirk of the color model. Relative luminance weights green at 71.52% and blue at 7.22%, so a color with both channels maxed inherits nearly all of green’s brightness.
Three facts follow from that weighting:
- Cyan measures brighter than yellow’s reputation suggests: both sit near the top of the luminance scale
- HSL lightness misleads badly here: 50% lightness doesn’t mean 50% perceived brightness
- Darkening is the only fix: desaturating cyan produces gray rather than a usable value
Designers who trust the HSL number get caught by this constantly. A color reporting 50% lightness looks like it should behave like a mid-tone, and cyan behaves like a near-white instead.
By contrast, pure red at the same 50% lightness reaches 4.0:1 on white, more than three times cyan’s ratio. That gap between two colors with identical HSL lightness is the clearest demonstration that lightness and luminance are different measurements.
The practical rule follows directly. Anyone building a cyan token set should work from measured contrast rather than from the lightness slider, because the slider will lie about this hue more than any other.
How Does Cyan Appear on Digital Screens?
Cyan renders at near-maximum brightness on every panel, since two of three subpixels run at full output. That intensity is consistent across displays, though wide-gamut screens push it further toward electric than sRGB does.
The measured values set every constraint:
- #00FFFF on white: 1.25:1, fails everything
- #00FFFF on black: 16.75:1, passes AAA
- Black text on #00FFFF: 16.75:1, passes AAA
- White text on #00FFFF: 1.25:1, fails everything
- Dark variant #00BFBF on white: 2.28:1, still fails AA
Direction of contrast decides every cyan decision. The color makes an excellent background for dark text and a hopeless foreground on light surfaces, which is the inverse of how most teams instinctively use a blue.
Even substantial darkening leaves you short. #00BFBF reaches only 2.28:1, so a color that already looks considerably deeper than the base still fails as text on white.
The shade at #008080 reaches 4.6:1 and passes AA, and that value has its own CSS keyword, teal. Anyone who needs readable cyan text on a light background is really reaching for teal, which is a useful thing to know before adding a redundant token.
What Are the Shades of Cyan?
Shades come from mixing black into #00FFFF while holding hue at 180°:
- #00DFDF
- #00BFBF
- #009F9F
- #008080
- #006060
- #004040
- #002020
The step at #008080 matters most, since it’s the first that passes AA on white at 4.6:1 and it corresponds exactly to the CSS teal keyword. Everything lighter than it fails as text on a light surface.
Tints run toward white through #1BFFFF, #36FFFF, #50FFFF, #6BFFFF, #86FFFF, #A1FFFF, #BBFFFF, and #D6FFFF. Those pale steps handle info banner fills and selected-row backgrounds, though the whole upper range is visually compressed because the base is already so bright.
Named neighbors sit in the turquoise family:
- Aquamarine (#7FFFD4): shifted toward green, 1.22:1 on white
- Turquoise (#40E0D0): softer and greener, 1.66:1
- Dark turquoise (#00CED1): slightly deeper, 2.05:1
- Light sea green (#20B2AA): the closest to usable, 2.71:1
- Teal (#008080): the shade that passes, 4.6:1
What UI Elements Work Best with Cyan?
Cyan belongs on dark surfaces and on light surfaces that host dark content. The 16.75:1 for black text on it opens certain doors, and the 1.25:1 against white closes most others.
Anything text-bearing in light mode falls outside its range: links, body copy, navigation labels, and functional borders all need a value cyan can’t reach. Four element types remain where cyan genuinely performs.
Buttons and CTAs with Dark Labels
Cyan buttons work when the label sits at near-black. Black on #00FFFF reaches 16.75:1 and clears AAA, while white on the same fill fails at 1.25:1, and that reversal is the most common cyan mistake in production.
Secondary actions suit it better than primary ones. Cyan reads as bright rather than weighty, so a deeper blue or teal carries the primary CTA more convincingly on a light page.
Outline variants require the shade ramp. A #00FFFF border on white misses the 3:1 non-text minimum by a wide margin, so the stroke has to drop to #009F9F or deeper.
Status Badges and Tags
Badges give cyan a structural fit, since they’re small, often carry dark text, and sit outside the red-yellow-green severity ladder. Category tags, “beta” markers, and neutral labels all work.
Building the soft variant from a tint keeps things readable. A #D6FFFF fill with #006060 text produces a legible badge where a solid cyan fill with white text wouldn’t.
Cyan carries no conventional status meaning, which cuts both ways. That absence makes it useful for categorization and unsuitable for anything a user needs to read as good or bad.
Data Visualizations
Charts use cyan as a categorical series that separates cleanly from warm hues. Its opposition to red makes it the natural partner in any two-series comparison where the other side is a warm color.
Fills and lines need different values. #00FFFF works for large area fills where the block carries the color, and a 2px line has to drop to #008080 or it disappears against white gridlines.
Tritanopia is the specific risk. Blue-yellow deficiency shifts cyan toward a pale gray-green, so a direct label or a pattern should back up the legend.
Dark Mode Accents
Dark mode is where cyan finally stops fighting the math. The bright variant #33FFFF on the computed surface #0C1D1D reaches 13.97:1 and clears AAA, so it carries links, icons, and small labels that fail entirely in light mode.
Terminal and developer interfaces have used cyan this way for decades. Syntax highlighting, log output, and command-line themes all lean on it precisely because it reads clearly against near-black.
Saturation should come down slightly when a token moves into dark mode. Full-intensity cyan against a dark surface reads as neon, and stepping down the ramp restores a calmer register.
What Are the Best Cyan Color Palettes for UI?
Every palette below comes from rotating hue around #00FFFF at fixed saturation and lightness, so each scheme is computed rather than curated. Selection should follow how much tension the product needs, with the accent verified against the real background.
Monochromatic
The monochromatic scheme holds hue at 180° and moves lightness: #00FFFF, #009999, and #66FFFF. Product teams reach for this when cyan is the brand color and a second hue would dilute it.
#009999 is the anchor value here. At 3.6:1 on white it handles large text and borders, which the base value can never do.
Analogous
Analogous pulls neighbors 30° in each direction: #00FFFF, #007FFF, and #00FF80. An azure and a spring green flanking the cyan, all at full saturation.
The azure at #007FFF is the useful member. It reaches 5.6:1 on white and passes AA, so it can carry the links and text that cyan can’t while staying in the same visual family.
Complementary
Cyan’s complement sits directly opposite at 0°: #00FFFF paired with #FF0000. This is the highest-tension pairing available in sRGB, since the two colors are exact opposites in both hue and channel composition.
Red brings the severity meaning cyan lacks. Pairing the two gives you an alert color and a neutral accent that can never be confused, though both need darkening before either carries text on white.
Triadic
The triadic scheme lands on the subtractive primaries: #00FFFF, #FF00FF, and #FFFF00. Cyan, magenta, and yellow together are the CMY set, which is a genuinely useful thing to recognize.
All three sit at maximum saturation and high luminance, so none of them survives as text on white. Their natural home is a dark background, where the set produces a balanced high-contrast trio.
Split-Complementary
Split-complementary softens the head-on clash: #00FFFF, #FF0080, and #FF8000. Cyan against a rose and an orange, which gives you a warm-cool structure with a third value for secondary actions.
This scheme is the most practical of the five for a product interface. Visily’s theme tools can generate the tint and shade ladder for each value so hover and active states come out accessible rather than hand-mixed.
Which Colors Are Similar to Cyan?
Five named colors sit close enough to #00FFFF to substitute for it, and each one changes the contrast math:
- Aquamarine (#7FFFD4): the palest, shifted toward green, 1.22:1 on white
- Turquoise (#40E0D0): softer and slightly green, 1.66:1
- Dark turquoise (#00CED1): the closest in hue, marginally deeper, 2.05:1
- Light sea green (#20B2AA): noticeably darker, 2.71:1
- Teal (#008080): the CSS keyword and the first that passes AA, 4.6:1
Teal is the substitution that solves problems rather than moving them. Anyone hunting for a cyan that works as text on white is describing teal, and reaching for it directly saves a round of contrast failures.
Dark turquoise is worth knowing for a different reason. At #00CED1 it reads as cyan to the eye while sitting far enough from the maximum to avoid the clipping that pure cyan shows on some panels.
Which Colors Pair Best with Cyan?
Near-black is cyan’s essential partner. At 16.75:1 it’s the text color that makes every cyan surface work, and any layout using this color depends on it.
Teal from the shade ramp serves as the functional accent. #008080 shares the base’s exact hue, passes AA on white, and gives the palette the text color a pure cyan can’t provide.
Warm oranges and corals balance it perceptually. Cyan alone reads as cold and technical, and a warm counterweight somewhere in the layout keeps the interface from feeling like a diagnostic tool.
Deep navy is the safe structural companion. A navy surface lets cyan sit at high contrast without the vibration that a mid-tone blue produces against it.
The 60-30-10 split applies as follows:
- 60% neutral: white, off-white, or near-black surfaces
- 30% teal or navy: navigation, links, and structural fills
- 10% cyan: accents, highlights, and dark-mode emphasis
Cyan rarely earns more than 10% in light mode. In dark mode that share can rise, since the contrast finally supports it.
Which Colors Should You Avoid Pairing with Cyan?
White fails hardest, and by a larger margin than for any other saturated color. At 1.25:1 a cyan element on white has effectively no boundary, so borders, icons, and outlines built that way vanish entirely.
Two computed near-clashes cause the next problem: #0095FF and #00FF95. Both sit 25° away at identical lightness, which leaves the eye a hue difference with no luminance difference to work with.
Yellow is the perceptual trap. Cyan and yellow both sit near the top of the luminance scale, so placing them together produces two near-equal brightnesses that the eye can’t separate cleanly at small sizes.
Light gray is the subtler failure. A pale neutral beside cyan drains the hue toward a washed teal and makes the whole surface look faded rather than deliberate.
Does Cyan Meet Accessibility Standards?
Cyan fails WCAG requirements against white in every category and by the widest margin in this cluster. The 1.25:1 measurement sits far below the 4.5:1 body-text threshold and the 3:1 non-text floor set by the W3C.
Cyan lands as follows across the common pairings:
- #00FFFF on white: 1.25:1, fails AA and the 3:1 non-text floor
- White on #00FFFF: 1.25:1, fails
- Black on #00FFFF: 16.75:1, passes AAA
- #008080 on white: 4.6:1, passes AA
- #33FFFF on #0C1D1D: 13.97:1, passes AAA
The black-on-cyan result is what keeps the color usable at all. Any cyan surface carrying dark text is compliant at every size and weight.
Tritanopia is the relevant deficiency here rather than the more common red-green forms. Blue-yellow deficiency shifts cyan toward a pale gray, which collapses its separation from light neutrals and from pale greens.
A second cue should always back up the hue. An icon, a label, or a position in a ranked list preserves the signal for users whose perception of cyan differs from yours.
How Can You Convert Cyan Between HEX, RGB, HSL, CMYK, and Other Color Formats?
Each format describes the same cyan from a different angle:
- HEX #00FFFF: the default in design files and CSS, shortenable to #0FF
- RGB rgb(0, 255, 255): two channels at maximum and one at zero
- RGBA rgba(0, 255, 255, 1): adds alpha for tinted overlays and hover fills
- HSL hsl(180, 100%, 50%): hue lands on exactly 180°
- HSB 180, 100, 100: the picker model in most design tools
- CMYK 100, 0, 0, 0: a single ink at full coverage
CMYK is where cyan behaves better than any other screen color. As one of the three process primaries, it prints at full strength from a single plate, so the printed result matches the intent more closely than any mixed color can.
HSL is the format that makes the ramp tractable. Holding hue at 180° and stepping lightness generates the whole family, including the AA-compliant #008080 that the base can never be.
The lightness figure deserves skepticism, though. HSL reports 50% for a color that measures near the top of the luminance scale, so contrast has to be checked with a tool rather than estimated from the slider.
Wrapping Up
Cyan is a dark-mode color and a dark-text surface, not a light-mode text color. #00FFFF works for fills, chart areas, and buttons with near-black labels, #008080 handles anything that has to be read on white, and #33FFFF carries links and small text on dark surfaces where it clears AAA.
Those steps don’t need to be derived by hand. Open Visily and use its AI-powered design tools to generate the cyan tint and shade ladder, accessible dark-mode accents, and matched pairings across the entire design in one pass.
