Turquoise HEX Code
The HEX code for turquoise is #40E0D0. Turquoise is a blue-green color named after the gemstone. It combines the calming properties of blue with the refreshing qualities of green, creating a balanced, tropical feel.
Turquoise Color Values
| Format | Value |
|---|---|
| HEX | #40E0D0 |
| RGB | rgb(64, 224, 208) |
| HSL | hsl(174, 72%, 56%) |
| CMYK | C:71 M:0 Y:7 K:12 |
Turquoise Shades and Variations
| Shade | HEX | Description |
|---|---|---|
| Pale Turquoise | #AFEEEE | Very light |
| Turquoise | #40E0D0 | CSS turquoise |
| Medium Turquoise | #48D1CC | Slightly darker |
| Dark Turquoise | #00CED1 | Deeper tone |
| Aquamarine | #7FFFD4 | Green-tinted |
| Teal | #008080 | Dark blue-green |
Turquoise in Design
Turquoise conveys:
- Tropical: Caribbean, ocean
- Calm: Soothing, peaceful
- Clarity: Clear thinking, communication
- Balance: Blue + green harmony
Turquoise vs Similar Colors
| Color | HEX | Bias |
|---|---|---|
| Cyan | #00FFFF | Pure blue-green |
| Turquoise | #40E0D0 | Slightly green |
| Aqua | #00FFFF | Same as cyan |
| Teal | #008080 | Dark cyan |
Using Turquoise in Design
``css
/* Tropical palette */
:root {
--turquoise-light: #AFEEEE;
--turquoise: #40E0D0;
--turquoise-dark: #00CED1;
}
/* Beach card design */
.beach-card {
background: linear-gradient(to bottom, #40E0D0, #20B2AA);
color: white;
}
/* Accent highlight */
.highlight-turquoise {
background-color: #40E0D0;
padding: 2px 6px;
border-radius: 4px;
}
`
Turquoise Color Palettes
| Theme | Primary | Secondary | Accent |
|---|---|---|---|
| Ocean | #40E0D0 | #87CEEB | #FF7F50 |
| Tropical | #40E0D0 | #98FB98 | #FFD700 |
| Spa | #AFEEEE | #E0FFFF | #008B8B |
Brands Using Turquoise
| Brand | HEX | Industry |
|---|---|---|
| Tiffany & Co | #0ABAB5 | Luxury |
| Skype | #00AFF0 | Technology |
| Vimeo | #1AB7EA | Media |
Turquoise is perfect for travel, wellness, and water-related brands seeking a refreshing, tropical aesthetic.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.