A bright cyan, black text passes AA
What color is aqua?
aqua is a bright cyan: #00ffff in hex, rgb(0 255 255). Black text on it reaches 16.75:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.
Last updated
| Format | Value |
|---|---|
| Keyword | aqua, the same as cyan |
| 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 aqua
Measured in OKLCH, aqua comes out at lightness 90.5%, chroma 0.155 and hue 194.8 degrees: a bright cyan. aqua and cyan are two names for one color, #00ffff. It is one of the 16 named colors that CSS Color 4 traces to the VGA palette, by way of HTML; most of the others came from the X11 color system.
HSL puts its lightness at 50% and OKLCH at 90.5%, 41 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. The nearest CSS named color, aquamarine (#7fffd4), is 0.068 away in OKLab: related, but plainly a different color.
Black on aqua reads at 16.75:1, enough for AAA body text; white reaches 1.25:1 and should stay off it. In the hue-sorted table of named colors it sits between paleturquoise and cyan.
In Tailwind CSS 4.3.3 the nearest default color is cyan-300 (#53eafd), 0.057 away in OKLab; for the exact color, an arbitrary value such as bg-[#00ffff] works.
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
Around aqua as swatch 1, Recolor's generator made a split-complementary palette, built on the two hues beside its opposite: #396464, #e1aac5, #2c1f18, #a7668e, drawn from a seed fixed by its hex. Open it in Recolor.
Using aqua
As a text color, aqua on a black page gives the same 16.75:1.
.notice {
background-color: aqua; /* #00ffff */
color: black; /* 16.75:1 */
}Common questions
Does white text pass WCAG AA on aqua?
No. White text measures 1.25:1 on aqua, under AA's 4.5:1; black text measures 16.75:1 and passes.
Can aqua 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 aqua?
No. The nearest, aquamarine (#7fffd4), is 0.068 away in OKLab, a different color.