If you’ve come across the color code #40E0D0, you’ve just found one of the most refreshing and calming colors out there—Turquoise. This unique mix of blue and green is not only popular in design and fashion, but it also has deep connections to nature, peace, and creativity.
In this guide, we’ll explore everything about the #40E0D0 color in easy terms—how it looks, how it works in CSS, what colors go well with it, and where you can use it in everyday design.
What is #40E0D0 Color?
The hex code #40E0D0 represents a color called Turquoise. It’s a soft, medium-bright shade that’s a mix of green and blue.
RGB Breakdown:
- Red: 64
- Green: 224
- Blue: 208
This means that Turquoise has a low amount of red, and a high amount of green and blue. That’s why it appears more like a sea-green or aqua color.
In percentages:
- Red: 12.90%
- Green: 45.16%
- Blue: 41.94%
What Does It Look Like?
Turquoise feels like a blend of tropical ocean waters and clear skies. It’s light and cool, making it easy on the eyes. People often describe it as peaceful, calm, and refreshing. Whether it’s used in home decor or on a website, it gives off a clean, modern, and friendly vibe.
Color Models of #40E0D0
Understanding how a color works across different color models can help designers, developers, or anyone interested in color science.
1. HSL (Hue, Saturation, Lightness)
- Hue: 0.48 (about 174 degrees)
- Saturation: 0.72
- Lightness: 0.56
This means the hue is close to green-blue. Saturation is high, so the color is vivid. Lightness is moderate—neither too dark nor too light.
2. HSV (Hue, Saturation, Value)
- Hue: 174°
- Saturation: 71%
- Value: 88%
This model shows how vibrant the color appears. A value of 88% means it’s quite bright.
3. CMYK (Cyan, Magenta, Yellow, Black)
- Cyan: 71%
- Magenta: 0%
- Yellow: 7%
- Black: 12%
This breakdown is useful for printing. Since there’s no magenta, and only a little yellow and black, the main ingredient is cyan.
How #40E0D0 Looks in CSS
If you’re using this color on a website or in digital design, here are some CSS examples:
cssCopyEdit.mybgcolor {
background-color: #40e0d0;
}
.myforecolor {
color: #40e0d0;
}
.mybordercolor {
border: 3px solid #40e0d0;
}
You can also add text shadows and box shadows using this color:
cssCopyEdit.textShadowHex {
text-shadow: 4px 4px 2px #40e0d0;
}
.divShadow {
box-shadow: 1px 1px 3px 2px #40e0d0;
}
These effects add depth and style to your web elements.
How Turquoise Appears on Backgrounds
On White Background:
Turquoise looks fresh and modern. It’s easy to read and gives a clean look.
htmlCopyEdit<p style="color:#40e0d0">Text here</p>
On Black Background:
The color stands out more and pops brightly, giving a futuristic and high-contrast effect.
Shades and Tints of #40E0D0
Shades are darker versions of the color, while tints are lighter.
Shades of Turquoise:
- #39c9bb
- #2c9c91
- #195953
- #061614
- #000000 (pure black)
Tints of Turquoise:
- #53e3d4
- #8cece2
- #b2f2ec
- #ebfbfa
- #ffffff (pure white)
These are perfect for creating visual depth or subtle gradients.
Related and Matching Colors
Here are some related colors you can pair with #40E0D0:
- Analogous Colors (next to each other on the color wheel):
- #40a0e0 (Sky Blue)
- #40e080 (Mint Green)
- Triadic Colors (form a triangle on the color wheel):
- #d040e0 (Lavender Purple)
- #e0d040 (Pastel Yellow)
- Complementary Color:
- #e04050 (a coral/red color)
Use these for creating beautiful and balanced color schemes.
Color in Binary, Octal, Decimal, and Hex
If you love numbers or coding, here’s how #40E0D0 breaks down:
Base Conversions:
| Base | Red | Green | Blue |
|---|---|---|---|
| Binary | 01000000 | 11100000 | 11010000 |
| Octal | 100 | 340 | 320 |
| Decimal | 64 | 224 | 208 |
| Hex | 40 | E0 | D0 |
Popular Uses of Turquoise (#40E0D0)
Turquoise is used in many places due to its versatility:
- Interior Design: Walls, cushions, vases for a calm look
- Web Design: Buttons, icons, or backgrounds to create a clean and modern interface
- Fashion: Dresses, jewelry, and shoes, especially in summer
- Logos and Branding: Gives a feeling of freshness and friendliness
- Artwork and Illustration: Common in water or nature-themed pieces
Is #40E0D0 a Web-Safe Color?
The closest web-safe color is #33CCCC. While not a perfect match, it gives a similar appearance and is considered safe for older browsers.
Color Psychology: What Does Turquoise Mean?
In color psychology, turquoise represents:
- Calmness
- Healing
- Clarity
- Refreshing energy
It’s often linked to water and sky, which gives people a sense of peace and creativity. That’s why it’s popular in spas, meditation websites, and mental health branding.
Final Thoughts
#40E0D0, or Turquoise, is more than just a pretty color—it brings a sense of relaxation, freshness, and balance. Whether you’re using it in graphic design, web development, home decor, or fashion, it adds a clean and modern touch. Its balance between blue and green makes it perfect for almost any project that needs a calm but energetic look.
If you’re building a color palette, designing a website, or just picking out paint colors, turquoise is always a safe and stylish choice.
