CSS Utilities
--color-turquoise: #40E0D0;
.bg-turquoise { background-color: #40E0D0; }
.text-turquoise { color: #40E0D0; }Machine-readable data
Machine-Readable Color Data (JSON)
Perfect for CSS, design systems, automation, and AI ingestion.
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#40E0D0",
"rgb": [
64,
224,
208
],
"hsl": [
174,
72,
56
],
"cmyk": [
71,
0,
7,
12
],
"luminance": 0.5896,
"contrast": {
"black": 12.79,
"white": 1.64
}
}WCAG
{
"AA": [
"#000000",
"#1A1A1A",
"#36454F"
],
"AAA": [
"#000000",
"#1A1A1A"
]
}Harmonies
{
"complementary": "#E03E4E",
"analogous": [
"#3EE07F",
"#3E9FE0"
],
"triadic": [
"#CF3EE0",
"#E0CF3E"
],
"tetradic": [
"#7F3EE0",
"#E03E4E",
"#9FE03E"
],
"splitComplementary": [
"#E03E9F",
"#E07F3E"
],
"monochromatic": [
"#8DECE3",
"#40E0D0",
"#1BA799"
]
}Variants
{
"light": "#8DECE3",
"dark": "#1BA799",
"saturated": "#25F8E3",
"desaturated": "#57C7BC",
"pastel": "#B3EAE5",
"neon": "#47FFED"
}Pairings
{
"best": [
"#000000",
"#E03E4E",
"#3EE07F",
"#3E9FE0"
],
"avoid": [
"#57C7BC",
"#8DECE3"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#8DECE3",
"#57C7BC"
]
}Knowledge graph
{
"nearestColors": [
"medium-turquoise",
"aquamarine-blue",
"verdigris",
"medium-aquamarine",
"dark-turquoise"
],
"generatedPalettes": [
"turquoise"
],
"generatedComparisons": [
"medium-turquoise-vs-turquoise",
"teal-vs-turquoise",
"turquoise-vs-aquamarine-blue"
],
"relatedFamilies": [
"/colors/by-family/cyan",
"/colors/by-temperature/cool",
"/colors/by-tone/bright",
"/colors/by-tone/vibrant"
],
"relatedTools": [
"/harmonies/turquoise",
"/wcag/turquoise",
"/css/colors/turquoise",
"/hex/40e0d0"
],
"semanticRelations": {
"broader": [
"/colors/by-family/cyan",
"/colors/by-temperature/cool",
"/colors/by-tone/bright",
"/colors/by-tone/vibrant"
],
"narrower": [
"/palettes/turquoise"
],
"related": [
"/colors/medium-turquoise",
"/colors/aquamarine-blue",
"/colors/verdigris",
"/colors/medium-aquamarine",
"/colors/dark-turquoise",
"/compare/medium-turquoise-vs-turquoise",
"/compare/teal-vs-turquoise",
"/compare/turquoise-vs-aquamarine-blue",
"/harmonies/turquoise",
"/wcag/turquoise",
"/css/colors/turquoise",
"/hex/40e0d0"
]
}
}Full JSON dataset
{
"slug": "turquoise",
"name": "Turquoise",
"hex": "#40E0D0",
"family": "cyan",
"temperature": "cool",
"tone": [
"bright",
"vibrant"
],
"uses": [
"travel",
"summer palettes",
"playful interfaces"
],
"psychology": {
"associations": [
"freshness",
"water",
"energy"
],
"contexts": [
"travel",
"beach brands",
"lifestyle"
],
"avoidIn": [
"formal legal or finance brands"
]
},
"aliases": [],
"sourceType": "standard",
"confidence": "high",
"sourceUrl": "https://www.w3.org/TR/css-color-4/#named-colors",
"reviewStatus": "auto",
"editorialNotes": "Generated from CSS named color data and computed color-system properties.",
"origin": {
"type": "css",
"notes": "Standard CSS named color."
},
"tags": [
"cyan",
"cool",
"bright",
"vibrant",
"travel",
"summer-palettes",
"playful-interfaces",
"freshness",
"water",
"energy"
],
"popularity": 69,
"rgb": [
64,
224,
208
],
"hsl": [
174,
72,
56
],
"cmyk": [
71,
0,
7,
12
],
"luminance": 0.5896,
"contrast": {
"black": 12.79,
"white": 1.64
},
"harmonies": {
"complementary": "#E03E4E",
"analogous": [
"#3EE07F",
"#3E9FE0"
],
"triadic": [
"#CF3EE0",
"#E0CF3E"
],
"tetradic": [
"#7F3EE0",
"#E03E4E",
"#9FE03E"
],
"splitComplementary": [
"#E03E9F",
"#E07F3E"
],
"monochromatic": [
"#8DECE3",
"#40E0D0",
"#1BA799"
]
},
"variants": {
"light": "#8DECE3",
"dark": "#1BA799",
"saturated": "#25F8E3",
"desaturated": "#57C7BC",
"pastel": "#B3EAE5",
"neon": "#47FFED"
},
"wcag": {
"AA": [
"#000000",
"#1A1A1A",
"#36454F"
],
"AAA": [
"#000000",
"#1A1A1A"
]
},
"css": {
"variable": "--color-turquoise: #40E0D0;",
"utility": ".bg-turquoise { background-color: #40E0D0; }",
"textUtility": ".text-turquoise { color: #40E0D0; }"
},
"nearestColors": [
"medium-turquoise",
"aquamarine-blue",
"verdigris",
"medium-aquamarine",
"dark-turquoise"
],
"generatedPalettes": [
"turquoise"
],
"generatedComparisons": [
"medium-turquoise-vs-turquoise",
"teal-vs-turquoise",
"turquoise-vs-aquamarine-blue"
],
"relatedFamilies": [
"/colors/by-family/cyan",
"/colors/by-temperature/cool",
"/colors/by-tone/bright",
"/colors/by-tone/vibrant"
],
"relatedTools": [
"/harmonies/turquoise",
"/wcag/turquoise",
"/css/colors/turquoise",
"/hex/40e0d0"
],
"semanticRelations": {
"broader": [
"/colors/by-family/cyan",
"/colors/by-temperature/cool",
"/colors/by-tone/bright",
"/colors/by-tone/vibrant"
],
"narrower": [
"/palettes/turquoise"
],
"related": [
"/colors/medium-turquoise",
"/colors/aquamarine-blue",
"/colors/verdigris",
"/colors/medium-aquamarine",
"/colors/dark-turquoise",
"/compare/medium-turquoise-vs-turquoise",
"/compare/teal-vs-turquoise",
"/compare/turquoise-vs-aquamarine-blue",
"/harmonies/turquoise",
"/wcag/turquoise",
"/css/colors/turquoise",
"/hex/40e0d0"
]
},
"pairings": {
"best": [
"#000000",
"#E03E4E",
"#3EE07F",
"#3E9FE0"
],
"avoid": [
"#57C7BC",
"#8DECE3"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#8DECE3",
"#57C7BC"
]
}
}
Color meaning and use
About Turquoise Color
Turquoise sits in the cyan family with cool temperature and bright and vibrant visual character. Standard CSS named color.
Its common associations include freshness, water, and energy, which makes it relevant for travel and beach brands. In design work, Turquoise is most useful for travel, summer palettes, and playful interfaces, especially when paired with black text for stronger contrast.
WCAG Accessibility
Contrast checks for Turquoise against black and white text.