Cyan color guide
HEX
#00FFFF
RGB
0, 255, 255
HSL
180°, 100%, 50%
HSV
180°, 100%, 100%
Equal parts blue and green in additive mixing, cyan is unmistakably synthetic on screens — the complement's complement on many color wheels. #00FFFF pops against warm oranges in classic complementary drama. In print, it is one of the four process inks.
Best for
Product launches, promotional banners, and e-commerce storefronts.
Accessibility
Check contrast before using cyan for text-heavy layouts, especially on low-contrast backgrounds.
How does cyan compare to nearby colors?
What is the difference between cyan and electric blue?
Cyan (#00FFFF) lands deeper on the value scale than Electric Blue (#7DF9FF), so the first impression is about darkness before hue. Cyan gives the palette a more grounded center of gravity, which matters if headlines, UI chrome, or darker sections need to feel settled. Use cyan if the palette needs to feel more anchored; switch to electric blue when the darker version starts to close the page down too much.
What color is cyan?
In CMYK printing, cyan (C) is a process primary; in RGB displays, #00FFFF is a full-green, full-blue additive mix. Common in diagnostics UI, sci-fi palettes, and pool-water imagery.
What is the hex code for cyan?
| Format | Value |
|---|---|
| HEX | #00FFFF |
| RGB | rgb(0, 255, 255) |
| HSL | hsl(180°, 100%, 50%) |
| HSV / HSB | hsv(180°, 100%, 100%) |
| CMYK (approx.) | cmyk(100%, 0%, 0%, 0%) |
Convert Cyan to other color formats
Open the color converter with Cyan (#00FFFF) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Cyan in the color converter →What does cyan mean in design?
Cyan is often associated with modernity, clarity, and digital freshness, sometimes with a clinical or futuristic edge. Compared with blue or electric blue, it tends to read as greener, cooler, and more screen-native.
How do I use cyan in code?
| CSS (hex) | color: #00FFFF; |
| CSS (rgb) | color: rgb(0, 255, 255); |
| CSS (hsl) | color: hsl(180, 100%, 50%); |
| RGB % | rgb(0%, 100%, 100%) |
| Tailwind | text-[#00FFFF] |
| SwiftUI | Color(red: 0.000, green: 1.000, blue: 1.000) |
| UIKit | UIColor(red: 0.000, green: 1.000, blue: 1.000, alpha: 1.0) |
| Android | Color.rgb(0, 255, 255) |
| Compose | Color(0xFF00FFFF) |
| Web Safe | #00FFFF |
Is cyan accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 1.25:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaBlack text on this color | 16.75:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on white | 1.25:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on black | 16.75:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does cyan look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with cyan
Charcoal turns cyan from purely energetic into something more adult and controlled by adding depth without another hue fight.
Gold gives cyan a warmer highlight, which helps the palette feel more tactile and less screen-native than it would with only neutrals.
Cream takes the hard digital edge off cyan and makes the color feel more printed, paper-backed, and approachable.
What colors clash with cyan
Neon Green turns cyan into something closer to screen glow than surface color, which is a mismatch for most editorial, product, or deck work.
With cyan, magenta introduces a second emotional story instead of reinforcing the first one, so the palette can feel internally split.
How should I use cyan in design?
- •Cyan has the saturation to lead a brand palette — strong enough for buttons, headers, and packaging without drifting into pastel or dark territory.
- •Warm touches like gold or coral bring out cyan's cooler character by contrast, while staying with cool neighbors creates a calmer, more unified feel.
- •Vivid colors like cyan work best as punctuation in a layout: CTAs, key metrics, or a single hero element. Surrounding neutrals keep it from fatiguing the viewer.
What are good cyan palettes?
Fresh canvas
Product launches, promotional banners, and e-commerce storefronts.
Honey and cream
Personal branding, portfolio websites, and resume designs.
Design with cyan in Moda
Create a presentation or document using cyan as your accent color. Moda's AI applies your color palette automatically.
Create a design with cyan →What are the shades and tints of cyan?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for cyan?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Turquoise
Turquoise is almost the same hue as cyan; the real difference is value, with turquoise feeling more open and surface-friendly.
Electric Blue
Electric Blue tracks close to cyan in hue, but the value shift changes where each one earns its place: electric blue is easier to use for backgrounds, tints, and softer supporting areas, while cyan holds onto accents, stronger hierarchy, and firmer structure.
Azure
Azure is useful when cyan is the right weight but the wrong mood: the swap changes temperature and finish more than contrast.
Spring Green
Spring Green occupies a similar depth to cyan, though it pushes the family toward a more cool reading and a different material feel.
Ocean Blue
Ocean Blue stays in the same color family as cyan, but the change in value moves it into different layout jobs, especially once backgrounds, charts, or section dividers enter the system.
Frequently asked questions
What is the hex code for cyan?
The hex code for cyan is #00FFFF. In RGB, that's 0 red, 255 green, and 255 blue. The approximate CMYK equivalent is 100% cyan, 0% magenta, 0% yellow, and 0% key (black).
Is cyan a warm or cool color?
Cyan reads as cool. It settles naturally beside blues, greens, silver, and charcoal, and feels more animated when paired with warm accents like gold, coral, or rust.
Is cyan better as an accent or a full-palette color?
Cyan is usually best when it leads in short bursts rather than covering everything. It can headline a palette, but most layouts work better when the color handles accents, highlights, or one main hero role instead of every surface.
How should I use cyan in a design?
Cyan is vivid enough to work best in controlled doses such as CTAs, highlighted metrics, chart accents, or a single hero element. Surround it with quieter neutrals so it does not exhaust the layout.
Can I use cyan for text or backgrounds?
Cyan works better with dark text than white text. Black text reaches 16.75:1 contrast on the swatch, which makes the color more usable as a background or highlight surface than as a dark panel.
More blue colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Blue colors
Compare cyan with other blue tones.
Green colors
Explore nearby color families to build stronger palettes and contrasts.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Purple colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.