Home
Colors
Cyan
Everything you need to know about cyan to inspire your next design.
Launch in Figma Now
Read about Cyan
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.
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.
VALUE | CSS | |
---|---|---|
HEX | 00FFFF | #00FFFF |
RGB DECIMAL | 0, 255, 255 | RGB(0,255,255) |
RGB PERCENTAGE | 0, 100, 100 | RGB(0%,100%,100%) |
CMYK | 100, 0, 0, 0 | |
HSL | 180°, 100, 50 | HSL(180°, 100%, 50%) |
HSV (OR HSB) | 180°, 100, 100 | |
WEB SAFE | 00FFFF | #00FFFF |
CIE-LAB | 91.113, -48.088, -14.131 | |
XYZ | 53.801, 78.733, 106.95 | |
xyY | 0.225, 0.329, 78.733 | |
CIE-LCH | 91.113, 50.121, 196.376 | |
CIE-LUV | 91.113, -70.477, -15.204 | |
HUNTER-LAB | 88.732, -47.045, -9.359 | |
BINARY | 00000000, 11111111, 11111111 | |
iOS - SwiftUI | Color(red: 0, green: 1, blue: 1) | |
iOS - UIKit | UIColor(red: 0, green: 1, blue: 1, alpha: 1) | |
Android - Compose | Color(0x00FFFF) |