CSS Utilities
--color-cobalt-violet: #8F00FF;
.bg-cobalt-violet { background-color: #8F00FF; }
.text-cobalt-violet { color: #8F00FF; }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": "#8F00FF",
"rgb": [
143,
0,
255
],
"hsl": [
274,
100,
50
],
"cmyk": [
44,
100,
0,
0
],
"luminance": 0.1306,
"contrast": {
"black": 3.61,
"white": 5.81
}
}WCAG
{
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": []
}Harmonies
{
"complementary": "#6EFF00",
"analogous": [
"#1100FF",
"#FF00EE"
],
"triadic": [
"#FF9100",
"#00FF91"
],
"tetradic": [
"#FF1100",
"#6EFF00",
"#00EEFF"
],
"splitComplementary": [
"#EEFF00",
"#00FF11"
],
"monochromatic": [
"#B85CFF",
"#8F00FF",
"#5C00A3"
]
}Variants
{
"light": "#B85CFF",
"dark": "#5C00A3",
"saturated": "#9000FF",
"desaturated": "#8D1CE3",
"pastel": "#C689F5",
"neon": "#A229FF"
}Pairings
{
"best": [
"#FFFFFF",
"#6EFF00",
"#1100FF",
"#FF00EE"
],
"avoid": [
"#8D1CE3",
"#B85CFF"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#B85CFF",
"#8D1CE3"
]
}Knowledge graph
{
"nearestColors": [
"uv-purple",
"dark-violet",
"electric-purple",
"neon-purple",
"blue-violet"
],
"generatedPalettes": [
"cobalt-violet"
],
"generatedComparisons": [
"cobalt-violet-vs-dark-violet",
"cobalt-violet-vs-uv-purple",
"electric-purple-vs-cobalt-violet",
"neon-purple-vs-cobalt-violet"
],
"relatedFamilies": [
"/colors/by-family/purple",
"/colors/by-temperature/cool",
"/colors/by-tone/vibrant"
],
"relatedTools": [
"/harmonies/cobalt-violet",
"/wcag/cobalt-violet",
"/css/colors/cobalt-violet",
"/hex/8f00ff"
],
"semanticRelations": {
"broader": [
"/colors/by-family/purple",
"/colors/by-temperature/cool",
"/colors/by-tone/vibrant"
],
"narrower": [
"/palettes/cobalt-violet"
],
"related": [
"/colors/uv-purple",
"/colors/dark-violet",
"/colors/electric-purple",
"/colors/neon-purple",
"/colors/blue-violet",
"/compare/cobalt-violet-vs-dark-violet",
"/compare/cobalt-violet-vs-uv-purple",
"/compare/electric-purple-vs-cobalt-violet",
"/compare/neon-purple-vs-cobalt-violet",
"/harmonies/cobalt-violet",
"/wcag/cobalt-violet",
"/css/colors/cobalt-violet",
"/hex/8f00ff"
]
}
}Full JSON dataset
{
"slug": "cobalt-violet",
"name": "Cobalt Violet",
"hex": "#8F00FF",
"uses": [
"historical references",
"pigment palettes",
"cultural color systems"
],
"psychology": {
"associations": [
"heritage",
"craft",
"specificity"
],
"contexts": [
"museum design",
"education",
"editorial research",
"cultural references"
],
"avoidIn": [
"generic unlabeled palette systems"
]
},
"aliases": [],
"sourceType": "curated",
"confidence": "medium",
"reviewStatus": "manual",
"sourceUrl": "https://www.colorsencyclopedia.com/assets/colors.json",
"origin": {
"type": "common",
"notes": "Curated common color reference used in design, material, cultural, and editorial color systems."
},
"family": "purple",
"temperature": "cool",
"tone": [
"vibrant"
],
"editorialNotes": "Curated internal color record with computed technical properties.",
"tags": [
"purple",
"cool",
"vibrant",
"historical-references",
"pigment-palettes",
"cultural-color-systems",
"heritage",
"craft",
"specificity"
],
"popularity": 84,
"rgb": [
143,
0,
255
],
"hsl": [
274,
100,
50
],
"cmyk": [
44,
100,
0,
0
],
"luminance": 0.1306,
"contrast": {
"black": 3.61,
"white": 5.81
},
"harmonies": {
"complementary": "#6EFF00",
"analogous": [
"#1100FF",
"#FF00EE"
],
"triadic": [
"#FF9100",
"#00FF91"
],
"tetradic": [
"#FF1100",
"#6EFF00",
"#00EEFF"
],
"splitComplementary": [
"#EEFF00",
"#00FF11"
],
"monochromatic": [
"#B85CFF",
"#8F00FF",
"#5C00A3"
]
},
"variants": {
"light": "#B85CFF",
"dark": "#5C00A3",
"saturated": "#9000FF",
"desaturated": "#8D1CE3",
"pastel": "#C689F5",
"neon": "#A229FF"
},
"wcag": {
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": []
},
"css": {
"variable": "--color-cobalt-violet: #8F00FF;",
"utility": ".bg-cobalt-violet { background-color: #8F00FF; }",
"textUtility": ".text-cobalt-violet { color: #8F00FF; }"
},
"nearestColors": [
"uv-purple",
"dark-violet",
"electric-purple",
"neon-purple",
"blue-violet"
],
"generatedPalettes": [
"cobalt-violet"
],
"generatedComparisons": [
"cobalt-violet-vs-dark-violet",
"cobalt-violet-vs-uv-purple",
"electric-purple-vs-cobalt-violet",
"neon-purple-vs-cobalt-violet"
],
"relatedFamilies": [
"/colors/by-family/purple",
"/colors/by-temperature/cool",
"/colors/by-tone/vibrant"
],
"relatedTools": [
"/harmonies/cobalt-violet",
"/wcag/cobalt-violet",
"/css/colors/cobalt-violet",
"/hex/8f00ff"
],
"semanticRelations": {
"broader": [
"/colors/by-family/purple",
"/colors/by-temperature/cool",
"/colors/by-tone/vibrant"
],
"narrower": [
"/palettes/cobalt-violet"
],
"related": [
"/colors/uv-purple",
"/colors/dark-violet",
"/colors/electric-purple",
"/colors/neon-purple",
"/colors/blue-violet",
"/compare/cobalt-violet-vs-dark-violet",
"/compare/cobalt-violet-vs-uv-purple",
"/compare/electric-purple-vs-cobalt-violet",
"/compare/neon-purple-vs-cobalt-violet",
"/harmonies/cobalt-violet",
"/wcag/cobalt-violet",
"/css/colors/cobalt-violet",
"/hex/8f00ff"
]
},
"pairings": {
"best": [
"#FFFFFF",
"#6EFF00",
"#1100FF",
"#FF00EE"
],
"avoid": [
"#8D1CE3",
"#B85CFF"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#B85CFF",
"#8D1CE3"
]
}
}
Color meaning and use
About Cobalt Violet Color
Cobalt Violet sits in the purple family with cool temperature and vibrant visual character. Cobalt Violet is a commonly used color name in design references, palettes, and editorial color systems.
Its common associations include heritage, craft, and specificity, which makes it relevant for museum design and education. In design work, Cobalt Violet is most useful for historical references, pigment palettes, and cultural color systems, especially when paired with white text for stronger contrast.
WCAG Accessibility
Contrast checks for Cobalt Violet against black and white text.