Cyan Color Hex Code, RGB & HSL Values

What is the meaning of the Cyan color?

Cyan is a bright, electric blue-green color, a primary hue in CMYK printing. It is highly futuristic, resembling glowing displays and clean digital water, often used in technology, science, and futuristic brand identities.

How to use the Cyan color hex code in HTML & CSS?

To style elements with Cyan on a website, use the hex code #00FFFF in your HTML/CSS. Adding background-color: #00FFFF; will render the color. In Tailwind CSS, you can apply this shade dynamically using classes like bg-[#00FFFF] or configuring it as a color variable in your configuration file.

What are the RGB and HSL codes of Cyan?

In the digital sRGB spectrum, the Cyan color code is mapped to RGB values of Red: 0, Green: 255, and Blue: 255. In the HSL system, it registers at hue angle 180°, saturation 100%, and lightness index 50%. It represents a balanced medium tone characterized by a highly vivid, intense, and brilliant shade.

CMYK print profiles for Cyan color

To reproduce the named shade Cyan in print systems, the CMYK ink configuration requires 100% Cyan, 0% Magenta, 0% Yellow, and 0% black. These neutral color boundaries serve as solid structural backgrounds, layouts, and typography grids.

Red Channel 0

Green Channel 255

Blue Channel 255

Luminance 0.787

⇄ Cyan Color Space Conversions

Click to copy format

HEX Color Code #00FFFF

RGB (Red Green Blue) rgb(0, 255, 255)

HSL (Hue Sat Light) hsl(180°, 100%, 50%)

CMYK (Commercial Print) cmyk(100%, 0%, 0%, 0%)

HSV / HSB Values hsv(180°, 100%, 100%)

Decimal Color Code 65535

CSS Custom Variable --color-hex: #00FFFF;

Tailwind CSS Utility bg-[#00FFFF]

CSS Named Color cyan

◎ Contrast & Accessibility (WCAG 2.1) Check

White Text on Background

White text readability test with #00FFFF

Small body copy preview

Black Text on Background

Black text readability test with #00FFFF

Small body copy preview

◈ Complementary & Analogous Harmonies

Computed dynamically

▤ Shades & Tints Generator Matrix

Copy shade hex values instantly

Darker Shades (Adding Black)

Lighter Tints (Adding White)

{ } CSS Custom Properties (Variables)

Copy CSS Styles

/* CSS Custom Properties for Cyan */
--color-hex: #00FFFF;
--color-rgb: rgb(0, 255, 255);
--color-hsl: hsl(180deg, 100%, 50%);
--color-name: cyan;

Aa Known Color Aliases

✦ Cyan Color Meaning

In design psychology, Cyan is classified as a cyan shade, inheriting its psychological associations. The cyan hue sits at the intersection of blue's calm reliability and green's vitality, creating a color that communicates both clarity and refreshment. It is strongly associated with clean water, fresh air, and modern technology. In printing, cyan is one of the four CMYK process colors, making it fundamental to all color reproduction. Technologically, cyan interfaces feel clean and futuristic, which is why it appears in HUD displays, medical equipment interfaces, and sci-fi aesthetics. Aqua and turquoise variations carry tropical connotations, evoking clear lagoons and vacation freshness. Brands use cyan to signal transparency, innovation, and environmental consciousness.

Emotions & Associations

InnovationCleanlinessClarityCalm

Industries

TourismEnvironmentalHealthcare