Cyan Colors
Every shade of cyan in one reference — from pale sky and ice to turquoise, aqua and deep teal. Each color shows HEX, RGB and HSL values you can copy in one click.
Cyan color reference
A systematic cyan scale with hex, RGB and HSL values.
| Name | HEX | RGB | HSL | |
|---|---|---|---|---|
| Cyan 100 | #CFFAFE |
207, 250, 254 | 183°, 96%, 90% | |
| Cyan 200 | #A5F3FC |
165, 243, 252 | 187°, 94%, 82% | |
| Cyan 300 | #67E8F9 |
103, 232, 249 | 188°, 92%, 69% | |
| Cyan 400 | #22D3EE |
34, 211, 238 | 188°, 86%, 53% | |
| Cyan 500 | #06B6D4 |
6, 182, 212 | 189°, 94%, 43% | |
| Cyan 600 | #0891B2 |
8, 145, 178 | 192°, 91%, 36% | |
| Cyan 700 | #0E7490 |
14, 116, 144 | 193°, 82%, 31% | |
| Cyan 800 | #155E75 |
21, 94, 117 | 193°, 70%, 27% | |
| Cyan 900 | #164E63 |
22, 78, 99 | 194°, 64%, 24% | |
| Cyan 950 | #083344 |
8, 51, 68 | 198°, 79%, 15% |
Named cyans and teals
Common named cyans from CSS and design practice.
Complementary and harmonious colors
Cyan sits at 180° on the color wheel. Here are the relationships that pair well with cyan.
| Relationship | Angle | Example hue |
|---|---|---|
| Complementary | 180° | Red |
| Split-complementary | 150° / 210° | Orange / Rose |
| Triadic | 120° / 240° | Magenta / Yellow |
| Analogous | −30° / +30° | Green / Blue |
Cyan in design and accessibility
Cyan sits between green and blue on the color wheel, blending the calm of both. It reads as fresh, clean, technological and aquatic. Alongside magenta and yellow, cyan is one of the three primary colors in the subtractive CMY model used by printers, and it is a core color in the RGB additive system used by screens.
Common uses in interfaces
- Tech and data visualization — the default “second color” after blue.
- Aquatic and travel brands — pools, water, resorts, spas.
- Social and communication apps — historically associated with chat and messaging.
- Gradients — cyan to purple and cyan to pink are among the most popular.
Accessibility notes
Mid cyans have low contrast on white: #06B6D4 reaches about 2.7:1 and fails AA. Darker cyans work better as text — #0E7490 reaches about 4.6:1 (AA), and #155E75 reaches about 6.9:1 (AAA Large). Cyan is best used as an accent, icon color or background, especially in dark themes where it becomes very readable.
Frequently asked questions
What is the purest cyan hex code?
Pure cyan is #00FFFF — RGB (0, 255, 255) at hue 180°. It is a primary in the CMY subtractive model and a secondary in the RGB additive model. Because it is so bright, most production cyans are slightly muted, like #06B6D4 or #0891B2.
What colors go well with cyan?
Neutrals — white, gray, navy, slate — form a natural pairing. Its complementary is red or orange. Analogous partners are green and blue. Cyan with magenta or pink produces a modern, vibrant combination used in many tech and creative brands. Deep teal with warm terracotta feels earthy and refined.
What is the complementary color of cyan?
Red or orange. Cyan at 180° is opposite red at 0°. Split-complementary partners are orange and rose. Full-saturation cyan on red vibrates visually; softening either end — muted teal on coral — produces a more professional combination.
Is cyan accessible for text?
Mid cyans fail contrast on white and should not be used for body text. Darker cyans work: #0E7490 reaches about 4.6:1 (AA) and #155E75 reaches about 6.9:1 (AAA Large). On dark backgrounds, lighter cyans like #22D3EE are excellent for links, icons and accents.
How do I generate a full cyan scale?
Use our shades generator. Enter any cyan as the base and it produces an 11-step 50–950 scale ready for CSS variables or Tailwind configs.