Aqua HEX Code
The HEX code for aqua is #00FFFF. Aqua is identical to cyan in CSS—both represent the same color created by combining full green and full blue with no red. The name "aqua" evokes water and freshness.
Aqua 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 |
Aqua vs Cyan
In CSS, aqua and cyan are the same color:
``css
.element {
color: aqua; /* #00FFFF */
color: cyan; /* #00FFFF */
}
`
Aqua Shades and Variations
| Shade | HEX | Description |
|---|---|---|
| Light Cyan | #E0FFFF | Very light |
| Aquamarine | #7FFFD4 | Green-tinted |
| Aqua / Cyan | #00FFFF | Pure aqua |
| Dark Cyan | #008B8B | Darker |
| Teal | #008080 | Half brightness |
Aqua in Design
Aqua conveys:
Water: Ocean, pools, freshness- Clarity: Clean, pure
- Technology: Digital, modern
- Coolness: Refreshing, calm
Using Aqua in Design
`css
/* Aqua theme */
:root {
--aqua-light: #E0FFFF;
--aqua: #00FFFF;
--aqua-dark: #008B8B;
}
/* Water-themed gradient */
.water {
background: linear-gradient(to bottom, #00FFFF, #008B8B);
}
/* Aqua glow effect */
.glow-aqua {
box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}
`
Aqua Color Palettes
| Theme | Primary | Secondary | Accent |
|---|---|---|---|
| Ocean | #00FFFF | #00CED1 | #20B2AA |
| Pool | #00FFFF | #AFEEEE | #00BFFF |
| Tech | #00FFFF | #0EA5E9 | #06B6D4 |
Aqua Accessibility
Pure aqua has low contrast on white backgrounds:
| Combination | Contrast | WCAG |
|---|---|---|
| Aqua on white | 1.25:1 | Fail |
| Aqua on dark | Good | Pass |
Use darker aqua shades like teal (#008080) for accessible text.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.