A bright cyan, black text passes AA
What color is cyan?
The CSS named color cyan is #00ffff, or rgb(0 255 255): a bright cyan in plain words. Black text on it reaches 16.75:1, passing WCAG AAA, and Recolor (recolor.page) can put it on a real page.
Last updated
| Format | Value |
|---|---|
| Keyword | cyan, the same as aqua |
| Hex | #00ffff |
| RGB | rgb(0 255 255) |
| HSL | hsl(180 100% 50%) |
| OKLCH | oklch(90.5% 0.155 194.8) |
| Nearest Tailwind color | cyan-300 #53eafd, 0.057 away in OKLab |
| White text | 1.25:1: AA fails, AAA fails, large text fails |
| Black text | 16.75:1: AA passes, AAA passes, large text passes |
About cyan
A bright cyan is the plain description of cyan: OKLCH lightness 90.5%, chroma 0.155, hue 194.8 degrees. It shares its value with aqua: two keywords, one color.
Its HSL lightness, 50%, says little about how light cyan looks; OKLCH, made to match the eye, measures 90.5%, 41 points away. No CSS keyword matches it; aquamarine (#7fffd4) is the nearest, 0.068 away in OKLab, a clear step off.
Black text on cyan measures 16.75:1, past the 7:1 of WCAG AAA, while white text manages only 1.25:1. Its neighbors in the hue-sorted list of names are aqua and powderblue.
The closest Tailwind 4.3.3 color is cyan-300, 0.057 away in OKLab, so bg-cyan-300 comes near; bg-[#00ffff] gives the color itself.
Tints and shades
- #e7ffff
- #cdffff
- #b1ffff
- #90ffff
- #66ffff
- #00ffff
- #00c8c8
- #009494
- #006363
- #003636
- #000f0f
From light to dark: 5 toward white and 5 toward black, mixed in OKLCH a sixth of the way at a time with the hue kept. A step that would repeat its neighbor is left out.
A palette around it
- #00ffff
- #396464
- #e1aac5
- #2c1f18
- #a7668e
Recolor's generator, with cyan locked as swatch 1 and the seed taken from its hex, drew a split-complementary palette, built on the two hues beside its opposite: #396464, #e1aac5, #2c1f18, #a7668e. Open it in Recolor.
Using cyan
As a text color, cyan on a black page gives the same 16.75:1.
.notice {
background-color: cyan; /* #00ffff */
color: black; /* 16.75:1 */
}Common questions
Does white text pass WCAG AA on cyan?
No. White text measures 1.25:1 on cyan, under AA's 4.5:1; black text measures 16.75:1 and passes.
Can cyan be written in OKLCH?
Yes: oklch(90.5% 0.155 194.8), computed from #00ffff. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to cyan?
No. The nearest, aquamarine (#7fffd4), is 0.068 away in OKLab, a different color.