Cyan

What color is cyan?

Cyan is a bright and vibrant color that sits directly between blue and green on the color wheel. It falls within the cool-toned spectrum and has a clear, water-like quality. While similar to electric blue, cyan features a slightly greener undertone, resulting in a cooler and more subdued hue.

What does cyan look like on digital screens?

Cyan is defined by the following color codes and values to ensure consistency across various digital platforms and devices.

• HEX code: #00FFFF
• RGB value: 0% red, 100% green, and 100% blue

Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.

How should I effectively use cyan in UI design?

Here are some ways to use cyan in your designs:

• Promote tranquility. Cyan’s refreshing cool tone is perfect for websites or apps promoting relaxation, productivity, or mental well-being.
• Highlight key elements. Cyan’s vibrancy draws attention to important elements like links, buttons, or menu items.
• Convey creativity and innovation. Tech companies and brands targeting a younger audience often use cyan to create a sense of freshness.

Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.

What are similar colors to cyan?

For variations within the same bright blue-green spectrum as cyan, consider:

• Electric blue (#00F0FF) is similar to cyan in vibrancy but leans more blue.
• Aqua (#00FFF0) sways more green but shares a similar cool tone to cyan.
• Turquoise (#40E0D0) is a similar blue-green shade but is greener and darker than cyan.

What colors go with cyan?

To complement cyan, consider pairing it with:

• White (#FFFFFF) creates a clean and airy contrast, highlighting cyan’s brightness.
• Navy blue (#000080) adds a touch of sophistication to a monochromatic palette.
• Yellow (#FFFF00) is a complementary pairing to cyan, creating a high-energy feel.
• Gunmetal (#353E43) is a dark gray that gives cyan a modern, dramatic effect.
• Pastel red (#FF746C) is a soft counterpoint to cyan’s coolness, creating an eye-catching combination.

Pairing cyan with complementary colors like magenta and yellow creates bold, eye-catching designs. For something more relaxed, pair it with shades of blue or neutrals like gray and beige.

What colors conflict with cyan?

While cyan is  bright and cool-toned, it may clash with:

• Mimosa (#F2B949) is a yellow that leans warm due to its orange undertones, which clashes with cyan’s cool-toned nature.
• Sage (#BBB791) is a muted green that can appear dull next to cyan’s brightness, creating a lack of contrast.
• Maroon (#550000) can overpower cyan, making it look unbalanced.
• Brown (#895129) can muddy the vibrancy of cyan, creating a heavy feel.

What does cyan symbolize?

In Chinese culture, cyan is a lucky color associated with hope and honor. Chinese mythology features the Azure Dragon (often depicted in cyan hues) as the guardian of the East, symbolizing spring, nature, and vital energy.

In color psychology, cyan is associated with serenity and mental clarity. Its cool tones are thought to enhance concentration and promote a tranquil and focused atmosphere, making it ideal for environments where calmness and clear thinking are goals. The color's connection to refreshing natural scenes, like tropical waters and frosty landscapes, helps evoke a sense of liveliness and rejuvenation.

In UI design, cyan’s vibrancy can draw attention to essential elements. Its clean and modern aesthetic fits well with contemporary design trends, adding a fresh, dynamic look to digital interfaces.

What’s the history of cyan?

The word “cyan” comes from the ancient Greek word “kyanos,” which referred to a deep blue mineral used to create pigment. This pigment was prized for its rich color and was used to create luxurious blue dyes for textiles and artwork.

The word “cyan” to describe the color is relatively new. It was first used in English in 1879 by a printer and photographer Edward Steichen. He used it to describe one of the colors in his print of the solar spectrum. This was significant because it made a clear distinction between cyan and the broader category of blue-green hues.

Today, cyan is used as a primary color in the CMYK color model for printing. This model relies on cyan, magenta, yellow, and black to create the spectrum of  printed colors.

Color variations

Shades

Tints

Tones

Hues

Color harmonies

Custom palettes

Accessibility

Contrast checker

Color simulations

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

Color conversion

The hexadecimal color #00FFFF, known as cyan, has RGB values of R:0 G:255, B:255 and CMYK values of C:100, M:0, Y:0, K:0.