CSS Color: Cyan
Named CSS color Cyan — #00FFFF in HEX, rgb(0, 255, 255) in RGB, hsl(180, 100%, 50%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Cyan | color: Cyan; |
| HEX | #00FFFF | color: #00FFFF; |
| RGB | rgb(0, 255, 255) | color: rgb(0, 255, 255); |
| HSL | hsl(180, 100%, 50%) | color: hsl(180, 100%, 50%); |
About Cyan
Cyan (also known as Aqua in CSS) is a pure blue-green at maximum intensity. At hex `#00FFFF`, both green and blue channels are at 255 with zero red. It sits at 180 degrees on the hue wheel with full saturation and 50% lightness — the complement of Red.
In web design, Cyan is a vivid, attention-grabbing color that works best as an accent on dark backgrounds. It is iconic in sci-fi interfaces, cyberpunk aesthetics, and tech-forward designs. Think of Tron's signature glow or terminal-themed websites.
Accessibility is very poor on light backgrounds — Cyan achieves only about 1.3:1 contrast against white. It should never be used for text on light surfaces. Against dark backgrounds, it provides excellent contrast (approximately 17.4:1 against black) and high visibility.
Cyan is identical to Aqua in CSS (`#00FFFF`). It is the bright counterpart to Teal, which is the same hue at 25% lightness. In Tailwind CSS, `cyan-400` provides a close match. Cyan pairs well with dark charcoal, deep navy, magenta, and black.
FAQ
What is the hex code for Cyan?
The CSS named color Cyan has the hex code #00FFFF. You can use it in CSS as color: #00FFFF; or simply color: Cyan;.
What is Cyan in RGB?
In RGB notation, Cyan is rgb(0, 255, 255). Use it in CSS as color: rgb(0, 255, 255);.
What is Cyan in HSL?
In HSL notation, Cyan is hsl(180, 100%, 50%). Use it in CSS as color: hsl(180, 100%, 50%);.
What color category is Cyan?
Cyan belongs to the Blue color family in the CSS named colors specification.
Can I use the name "Cyan" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Cyan; or background-color: Cyan; directly in your stylesheet. Named colors are case-insensitive.
Related Colors
Try in Color Converter
Convert Cyan to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →