Explore the base color
Review HEX, RGB, HSL, and HSV for turquoise, then browse shades, tints, tones, and hues.
Color tools
Turquoise color codes
Turquoise color codes for #40E0D0 — HEX, RGB, HSL, HSV, shades, named turquoises, and copy-ready CSS.
Loading tool…
Loading Preparing tool…
How to use
Follow these steps for a clear answer.
Pick a variation or named shade
Click a generated strip or a CSS named turquoise shade to load codes and harmonies.
Copy for CSS
Copy HEX, rgb(), hsl(), or the keyword—and check contrast on white and black.
Color formulas
Core relationships used by this color tool.
iHSV (or HSB) keeps hue with saturation and value; HSL uses lightness. Named shades in this family follow CSS Color Module keywords.
Example colors
Common picks with formula and result.
ϟ
color: turquoise;Base turquoise
CSS keyword
#40E0D0 · rgb(64, 224, 208)
ϟ
mediumturquoiseRelated shade
Family neighbor
#48D1CC
ϟ
background-color: #40E0D0;UI accent
Background use
Pair with readable text
ϟ
H + 180°Complement direction
Harmony hint
Toward coral/rose
Turquoise color family specification
Version 1.0.0
- Definition
- Turquoise in CSS centers on the keyword turquoise (#40E0D0 / rgb(64, 224, 208) / hsl(174°, 72%, 56%)). Designers use turquoise families for tropical, calm, and jewel-like on screens.
- What it calculates
- Turquoise family variations (shades, tints, tones, hues), named CSS shades, harmony sets, HEX/RGB/HSL/HSV codes, and contrast vs white/black.
- Inputs
- Selected variation chip, named shade, or harmony swatch
- Section mode (variations, named shades, harmonies)
- Outputs
- HEX, RGB, HSL, HSV
- Optional CSS keyword
- Contrast ratios on white and black
- Formula
Shades/tints/tones adjust HSL L or S from base H; harmonies offset H on the hue circleTurquoise sits between cyan and green—ideal for travel, wellness, and fresh brand accents.
For full keyword search across all hues, use HTML color codes. For palette generation, try the color scheme generator or color wheel.
:root { --turquoise: #40e0d0; --turquoise-deep: #00ced1; --turquoise-soft: #afeeee; } .banner { background-color: var(--turquoise); color: #ffffff; }- Popular CSS turquoises
Name HEX RGB Feel turquoise #40E0D0 64, 224, 208 Base keyword mediumturquoise #48D1CC 72, 209, 204 Mid tone darkturquoise #00CED1 0, 206, 209 Dark shade paleturquoise #AFEEEE 175, 238, 238 Light tint aqua #00FFFF 0, 255, 255 Named shade teal #008080 0, 128, 128 Named shade aquamarine #7FFFD4 127, 255, 212 Named shade cadetblue #5F9EA0 95, 158, 160 Named shade cyan #00FFFF 0, 255, 255 Named shade darkcyan #008B8B 0, 139, 139 Dark shade lightcyan #E0FFFF 224, 255, 255 Light tint lightseagreen #20B2AA 32, 178, 170 Light tint i Related hues may appear in Named shades when useful for turquoise-adjacent palettes.- Assumptions
- Base keyword turquoise = #40E0D0 in sRGB.
- Named list uses CSS Color Module keywords in/near the turquoise family.
- Tool runs locally; nothing is uploaded.
- Units
- HEX: #RRGGBB
- RGB: 0–255
- HSL/HSV: hue degrees; S/L/V percent
- Boundary conditions
- Lightness/saturation steps stay within visible ranges (~0–100%).
- Hue offsets wrap modulo 360°.
- Example
- turquoise → #40E0D0; complementary toward coral/rose
- Validation cases
- turquoise → #40E0D0
- teal → #008080
- shade of turquoise → same hue, lower lightness
- tint of turquoise → same hue, higher lightness
- Sources
- CSS Color Module named colors (turquoise family)
- Classical shade/tint/tone and hue-harmony geometry
- WCAG relative-luminance contrast
- Calculation version
- 1.0.0
Related tools
Frequently asked questions
Key distinctions behind the tool.
What is the hex code for turquoise?
The CSS named color turquoise is #40E0D0, equal to rgb(64, 224, 208) and hsl(174°, 72%, 56%).
What is the difference between turquoise and teal?
Turquoise is brighter and greener. Teal is darker and more muted.
What colors go with turquoise?
White, sand, and navy support turquoise. Soft pinks create beachy pairs. Always check text contrast.
Is turquoise good for body text?
Turquoise on white may be borderline for small text—darken or increase weight for labels.
How do I use turquoise in CSS?
Use color: turquoise;, color: #40E0D0;, or color: rgb(64, 224, 208); on any property that accepts a <color> value, including background-color and border-color.