Cyan HEX Code
The HEX code for cyan is #00FFFF. Cyan is one of the primary colors in the CMYK color model and is created by combining full green and full blue with no red. It's also known as aqua and represents the opposite of red on the color wheel.
Cyan Color Values
| Format | Value |
|---|---|
| HEX | #00FFFF |
| RGB | rgb(0, 255, 255) |
| HSL | hsl(180, 100%, 50%) |
| CMYK | C:100 M:0 Y:0 K:0 |
Cyan Shades and Variations
| Shade | HEX | Description |
|---|---|---|
| Light Cyan | #E0FFFF | Very light |
| Pale Turquoise | #AFEEEE | Soft cyan |
| Aquamarine | #7FFFD4 | Green-tinted |
| Cyan / Aqua | #00FFFF | Pure cyan |
| Dark Cyan | #008B8B | Darker version |
| Teal | #008080 | Dark cyan |
| Dark Turquoise | #00CED1 | Medium dark |
Cyan in Design
Cyan conveys:
- Freshness: Clean, crisp, modern
- Technology: Digital, futuristic
- Water: Ocean, swimming pools
- Energy: Electric, vibrant
Cyan in Print (CMYK)
Cyan is one of four process colors in printing:
``
CMYK = Cyan, Magenta, Yellow, Key (Black)
Pure cyan: C:100 M:0 Y:0 K:0
`
CSS Usage
`css
.highlight {
color: cyan;
/* Same as */
color: #00FFFF;
color: aqua;
}
/* Modern cyan palette */
:root {
--cyan-50: #ECFEFF;
--cyan-500: #06B6D4;
--cyan-900: #164E63;
}
`
Cyan vs Aqua vs Teal
| Color | HEX | Brightness |
|---|---|---|
| Cyan / Aqua | #00FFFF | Full (100%) |
| Teal | #008080 | Half (50%) |
| Dark Cyan | #008B8B | ~55% |
Cyan and aqua are identical in CSS (#00FFFF).Tailwind Cyan Scale
| Level | HEX | Use Case |
|---|---|---|
| 50 | #ECFEFF | Backgrounds |
| 500 | #06B6D4 | Primary |
| 700 | #0E7490 | Dark accent |
| 900 | #164E63 | Very dark |
Cyan is highly visible and works well for digital interfaces, technology brands, and designs requiring a fresh, modern feel.A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.