Cyan Color: Hex Code, Palettes & Meaning | Figma (2024)

Home

Colors

Cyan

Everything you need to know about cyan to inspire your next design.

Launch in Figma Now

Read about Cyan

Pick a palette type

What color iscyan?

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 subduedhue.

Cyan Color: Hex Code, Palettes & Meaning | Figma (1)Cyan Color: Hex Code, Palettes & Meaning | Figma (2)

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 anddevices.

  • HEX code: #00FFFF
  • RGB value: 0% red, 100% green, and100%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 UIdesign?

Here are some ways to use cyan in yourdesigns:

  • 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, ormenuitems.
  • Convey creativity and innovation. Tech companies and brands targeting a younger audience often use cyan to create a sense offreshness.

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 tocyan?

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

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

What colors go withcyan?

To complement cyan, consider pairing itwith:

  • 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 grayandbeige.

What colors conflict withcyan?

While cyan is bright and cool-toned, it mayclashwith:

  • 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 ofcontrast.
  • Maroon (#550000) can overpower cyan, making it look unbalanced.
  • Brown (#895129) can muddy the vibrancy of cyan, creating aheavyfeel.

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 vitalenergy.

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 ofcyan?

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 andartwork.

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 printedcolors.

Color variations

Shades

Tints

Tones

Hues

Color harmonies

Complementary

Analogous

Monochromatic

Split

Triadic

Square

Custom palettes

Cyan Serenity

Neon Earth

Cool Revival

Accessibility

Contrast checker

Large Text
Figma
Normal Text
How you design, align, and build matters. Do it together with Figma.

1.25:1

WCAG 2.2 Simple Contrast

Normal Text

Fail
AA
4.5:1

Fail
AAA
7:1

Large Text

Fail
AA
3:1

Fail
AAA
4.5:1
Large Text
Figma
Normal Text
How you design, align, and build matters. Do it together with Figma.

16.75:1

WCAG 2.2 Simple Contrast

Normal Text

Pass
AA
4.5:1

Pass
AAA
7:1

Large Text

Pass
AA
3:1

Pass
AAA
4.5:1

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.

VALUECSS
HEX00FFFF#00FFFF
RGB DECIMAL0, 255, 255RGB(0,255,255)
RGB PERCENTAGE0, 100, 100RGB(0%,100%,100%)
CMYK100, 0, 0, 0
HSL180°, 100, 50HSL(180°, 100%, 50%)
HSV (OR HSB)180°, 100, 100
WEB SAFE00FFFF#00FFFF
CIE-LAB91.113, -48.088, -14.131
XYZ53.801, 78.733, 106.95
xyY0.225, 0.329, 78.733
CIE-LCH91.113, 50.121, 196.376
CIE-LUV91.113, -70.477, -15.204
HUNTER-LAB88.732, -47.045, -9.359
BINARY00000000, 11111111, 11111111
iOS - SwiftUIColor(red: 0, green: 1, blue: 1)
iOS - UIKitUIColor(red: 0, green: 1, blue: 1, alpha: 1)
Android - ComposeColor(0x00FFFF)

Keep learning

Figma color wheelWant to find the perfect complementary or analogous colors to match cyan?Learn moreElectric BlueDive into the tropical color of electric blue.Learn moreMint BlueDiscover the invigorating effect of mint blue.Learn more
Cyan Color: Hex Code, Palettes & Meaning | Figma (2024)
Top Articles
Latest Posts
Article information

Author: Neely Ledner

Last Updated:

Views: 5640

Rating: 4.1 / 5 (62 voted)

Reviews: 85% of readers found this page helpful

Author information

Name: Neely Ledner

Birthday: 1998-06-09

Address: 443 Barrows Terrace, New Jodyberg, CO 57462-5329

Phone: +2433516856029

Job: Central Legal Facilitator

Hobby: Backpacking, Jogging, Magic, Driving, Macrame, Embroidery, Foraging

Introduction: My name is Neely Ledner, I am a bright, determined, beautiful, adventurous, adventurous, spotless, calm person who loves writing and wants to share my knowledge and understanding with you.