The short version
- A cyan gradient blends the bright colour halfway between green and blue with white, blue, lime, magenta or a deep navy.
- Pure screen cyan is
#00ffff, which CSS also calls aqua, and it is lighter and brighter than teal or turquoise. - White text on pure cyan has a contrast of only about 1.3 to 1, so cyan needs dark type or a much deeper background behind words.
- Cyan looks most electric on a near black or navy ground, where a small amount of it appears to glow.
- Cyan blends cleanly into blue and lime, because both are its neighbours on the colour wheel.
On this page
A cyan gradient blends the bright colour halfway between green and blue with one of its neighbours: white for ice, blue for an electric tech look, lime for freshness, magenta for a cyber feel, or a deep navy where cyan seems to glow. Pure screen cyan is #00ffff, and it is far lighter than most people expect, so the main skill is deciding where the words go. Copyable codes for each look follow, with the contrast numbers that matter.
Cyan, teal and turquoise are not the same
These three get swapped constantly, and the difference matters when you brief a designer or pick a code. CSS even names all three, and they are clearly distinct. Cyan is the brightest and the most balanced between green and blue. Turquoise is softer and a little greener, like the gemstone. Teal is much darker and calmer.
aqua / cyan, #00ffffCharacter
CSS name and hex
#00e5ffCharacter
CSS name and hex
turquoise, #40e0d0Character
teal, #008080Character
For the calmer relatives, see teal gradient and turquoise gradient. This article stays at the bright end.
Ice and pool cyan gradient codes
The light end of cyan feels like cold water and clean air. Ice is almost white with a hint of colour; glacier and pool run deeper, through bright cyan into a blue green that can carry white type at the bottom. They suit summer offers, skincare with a cooling story, drinks and anything that wants to feel refreshing.
Electric cyan on dark backgrounds
Cyan becomes electric when it sits on darkness. A small cyan light on a near black or navy ground looks like a screen, a laser or a data visualisation, which is why it is everywhere in software, gaming and science. Keep most of the frame dark and let cyan occupy a corner or an edge. The cyan blue gradient in this set is the most versatile of all, bright at one end and solidly blue at the other.
For full schemes built around this look, tech colour palettes has several, and neon gradients pushes it further towards nightlife.
Cyan with lime and with magenta
Cyan into lime passes through mint and feels sporty, fresh and optimistic. Cyan with magenta is the cyberpunk pairing: two of the three printing primaries, both at full volume. Run that one through a dark indigo middle and it feels like a neon street at night rather than a children's toy. The magenta gradient article covers the other side of this pairing.
The contrast trap: words on cyan
Cyan is one of the lightest saturated colours a screen can show. White type on pure #00ffff has a contrast of only about 1.3 to 1, which is unreadable, while black on the same cyan reaches about 16.7 to 1. White starts to work once the cyan deepens to around #0e7490, where it reaches roughly 5.4 to 1. Colour contrast and accessibility explains the ratios and the targets.
Hard to read
- White type on bright cyan
- Cyan type on a white page
- Small text across the bright middle of a gradient
- Pale blue type on ice
Easy to read
- Navy or near black type on bright cyan
- Cyan type on a navy or black page
- Small text on the deepest stop only
- White type on lagoon #0e7490 or darker
This is the kind of judgement Gradiently makes for you. Auto ink picks light or dark type for each line from the Mark's own palette, and the Mark moves its calmest, best contrasting region behind the words, so a bright cyan background never leaves white text stranded.
A cyan gradient border in CSS
On dark interfaces, cyan works beautifully as an edge rather than a fill. A gradient border keeps the card readable while adding the electric feel. This uses two backgrounds, one clipped to the padding and one to the border, so it keeps rounded corners.
.card {
border: 2px solid transparent;
border-radius: 16px;
background:
linear-gradient(#0b1220, #0b1220) padding-box,
linear-gradient(135deg, #00e5ff 0%, #2563eb 100%) border-box;
color: #e6f9ff;
}More techniques, including animated borders, are in CSS gradient border.
Where a cyan gradient fits
Cyan is a natural choice for software launches, developer tools, gaming, swimwear, drinks and anything that wants to feel fast or cold. On launch day, keep one cyan look across the announcement post, the link preview and the changelog banner so people recognise it in every feed. SaaS startup branding shows how to build a whole identity around one bright colour like this.
A launch post for X at 1600×900. White type on the dark side, with the cyan light kept away from the words.
Questions people ask
What is the hex code for cyan?
Pure screen cyan is #00ffff, also called aqua in CSS. A slightly bluer, more comfortable electric cyan is #00e5ff.
What is the difference between cyan and teal?
Cyan is bright and light, halfway between green and blue. Teal, #008080 in CSS, is a much darker and calmer blue green.
What text colour works on a cyan background?
Navy or near black on bright cyan. White only works on deep cyans such as #0e7490 or darker.
What colours go well with a cyan gradient?
Blue and lime blend cleanly because they are cyan's neighbours. Magenta makes a bold cyberpunk pairing, and navy or black makes cyan glow.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile