Teal family
Cyan color
A pale, bright teal leaning green. The reference cyan is #00FFFF, as defined by the CSS named color.
| HEX | #00FFFF | |
|---|---|---|
| RGB | rgb(0, 255, 255) | |
| HSL | hsl(180, 100%, 50%) | |
| HSV | hsv(180, 100%, 100%) | |
| OKLCH | oklch(90.5% 0.155 194.8) | |
| CMYK* | 100, 0, 0, 0 |
* CMYK is a simple conversion without a print profile; ask your printer for exact values.
What color is cyan?
Cyan is the colour between green and blue and one of the three primaries of printing (the C in CMYK). Its name comes from the Greek kyanos, dark blue. On a screen it is made of full green and full blue light, #00FFFF, the same value as the CSS keyword aqua.
Cyan hex codes by source
Color names are not standardized, so the same name can point to different colors. Here is every definition of cyan in our three sources, with how close each one is to the reference.
| Name | HEX | Source | Compared with the reference |
|---|---|---|---|
| Cyan | #00FFFF | CSS named color | Reference shown on this page |
| Cyan | #00FFFF | xkcd Color Survey | Same color |
| Cyan | #00FFFF | Color Names (meodai) | Same color |
Cyan vs Aqua
#00FFFF
#00FFFF
Identical in CSS. Printers' cyan ink is darker than the screen colour. In numbers: the two are 100% similar (OKLab distance 0.000). See Aqua for its own codes.
Colors similar to cyan
The closest named colors to #00FFFF across all three sources, with their similarity in OKLab.
Tints and shades of cyan
The same hue from light to dark, generated in OKLab so the steps look even. Click a step to copy its HEX code.
Colors that go with cyan
Classic color-wheel combinations built on #00FFFF, computed in OKLCH so the partners keep the same lightness and intensity. Each swatch shows the nearest common name.
Complementary
Analogous
Triadic
Split complementary
Cyan with white and black text
WCAG asks for a contrast of at least 4.5:1 for body text (AA) and 3:1 for large text. On a cyan background, black text is the better choice.
Use cyan in CSS
.cyan {
color: #00FFFF;
/* or */ color: rgb(0 255 255);
/* or */ color: hsl(180 100% 50%);
/* or */ color: oklch(90.5% 0.155 194.8);
/* CSS keyword */ color: cyan;
}