CSS Utilities
--color-hot-magenta: #FF1DCE;
.bg-hot-magenta { background-color: #FF1DCE; }
.text-hot-magenta { color: #FF1DCE; }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": "#FF1DCE",
"rgb": [
255,
29,
206
],
"hsl": [
313,
100,
56
],
"cmyk": [
0,
89,
19,
0
],
"luminance": 0.2659,
"contrast": {
"black": 6.32,
"white": 3.32
}
}WCAG
{
"AA": [
"#000000",
"#1A1A1A"
],
"AAA": []
}Harmonies
{
"complementary": "#1FFF4F",
"analogous": [
"#BF1FFF",
"#FF1F5E"
],
"triadic": [
"#CEFF1F",
"#1FCEFF"
],
"tetradic": [
"#FFBF1F",
"#1FFF4F",
"#1F5EFF"
],
"splitComplementary": [
"#5EFF1F",
"#1FFFBF"
],
"monochromatic": [
"#FF7AE2",
"#FF1DCE",
"#C20098"
]
}Variants
{
"light": "#FF7AE2",
"dark": "#C20098",
"saturated": "#FF1FCE",
"desaturated": "#E637C0",
"pastel": "#F8A5E6",
"neon": "#FF47D7"
}Pairings
{
"best": [
"#000000",
"#1FFF4F",
"#BF1FFF",
"#FF1F5E"
],
"avoid": [
"#E637C0",
"#FF7AE2"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#FF7AE2",
"#E637C0"
]
}Knowledge graph
{
"nearestColors": [
"neon-pink",
"fuchsia",
"magenta",
"deep-pink",
"fluorescent-pink"
],
"generatedPalettes": [
"hot-magenta"
],
"generatedComparisons": [
"hot-magenta-vs-fuchsia",
"hot-magenta-vs-neon-pink"
],
"relatedFamilies": [
"/colors/by-family/pink",
"/colors/by-temperature/warm",
"/colors/by-tone/vibrant"
],
"relatedTools": [
"/harmonies/hot-magenta",
"/wcag/hot-magenta",
"/css/colors/hot-magenta",
"/hex/ff1dce"
],
"semanticRelations": {
"broader": [
"/colors/by-family/pink",
"/colors/by-temperature/warm",
"/colors/by-tone/vibrant"
],
"narrower": [
"/palettes/hot-magenta"
],
"related": [
"/colors/neon-pink",
"/colors/fuchsia",
"/colors/magenta",
"/colors/deep-pink",
"/colors/fluorescent-pink",
"/compare/hot-magenta-vs-fuchsia",
"/compare/hot-magenta-vs-neon-pink",
"/harmonies/hot-magenta",
"/wcag/hot-magenta",
"/css/colors/hot-magenta",
"/hex/ff1dce"
]
}
}Full JSON dataset
{
"slug": "hot-magenta",
"name": "Hot Magenta",
"hex": "#FF1DCE",
"uses": [
"neon accents",
"event graphics",
"high-energy digital design"
],
"psychology": {
"associations": [
"energy",
"visibility",
"motion"
],
"contexts": [
"gaming",
"music events",
"sportswear",
"nightlife"
],
"avoidIn": [
"long reading interfaces"
]
},
"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": "pink",
"temperature": "warm",
"tone": [
"vibrant"
],
"editorialNotes": "Curated internal color record with computed technical properties.",
"tags": [
"pink",
"warm",
"vibrant",
"neon-accents",
"event-graphics",
"high-energy-digital-design",
"energy",
"visibility",
"motion"
],
"popularity": 84,
"rgb": [
255,
29,
206
],
"hsl": [
313,
100,
56
],
"cmyk": [
0,
89,
19,
0
],
"luminance": 0.2659,
"contrast": {
"black": 6.32,
"white": 3.32
},
"harmonies": {
"complementary": "#1FFF4F",
"analogous": [
"#BF1FFF",
"#FF1F5E"
],
"triadic": [
"#CEFF1F",
"#1FCEFF"
],
"tetradic": [
"#FFBF1F",
"#1FFF4F",
"#1F5EFF"
],
"splitComplementary": [
"#5EFF1F",
"#1FFFBF"
],
"monochromatic": [
"#FF7AE2",
"#FF1DCE",
"#C20098"
]
},
"variants": {
"light": "#FF7AE2",
"dark": "#C20098",
"saturated": "#FF1FCE",
"desaturated": "#E637C0",
"pastel": "#F8A5E6",
"neon": "#FF47D7"
},
"wcag": {
"AA": [
"#000000",
"#1A1A1A"
],
"AAA": []
},
"css": {
"variable": "--color-hot-magenta: #FF1DCE;",
"utility": ".bg-hot-magenta { background-color: #FF1DCE; }",
"textUtility": ".text-hot-magenta { color: #FF1DCE; }"
},
"nearestColors": [
"neon-pink",
"fuchsia",
"magenta",
"deep-pink",
"fluorescent-pink"
],
"generatedPalettes": [
"hot-magenta"
],
"generatedComparisons": [
"hot-magenta-vs-fuchsia",
"hot-magenta-vs-neon-pink"
],
"relatedFamilies": [
"/colors/by-family/pink",
"/colors/by-temperature/warm",
"/colors/by-tone/vibrant"
],
"relatedTools": [
"/harmonies/hot-magenta",
"/wcag/hot-magenta",
"/css/colors/hot-magenta",
"/hex/ff1dce"
],
"semanticRelations": {
"broader": [
"/colors/by-family/pink",
"/colors/by-temperature/warm",
"/colors/by-tone/vibrant"
],
"narrower": [
"/palettes/hot-magenta"
],
"related": [
"/colors/neon-pink",
"/colors/fuchsia",
"/colors/magenta",
"/colors/deep-pink",
"/colors/fluorescent-pink",
"/compare/hot-magenta-vs-fuchsia",
"/compare/hot-magenta-vs-neon-pink",
"/harmonies/hot-magenta",
"/wcag/hot-magenta",
"/css/colors/hot-magenta",
"/hex/ff1dce"
]
},
"pairings": {
"best": [
"#000000",
"#1FFF4F",
"#BF1FFF",
"#FF1F5E"
],
"avoid": [
"#E637C0",
"#FF7AE2"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#FF7AE2",
"#E637C0"
]
}
}
Color meaning and use
About Hot Magenta Color
Hot Magenta sits in the pink family with warm temperature and vibrant visual character. Hot Magenta is a commonly used color name in design references, palettes, and editorial color systems.
Its common associations include energy, visibility, and motion, which makes it relevant for gaming and music events. In design work, Hot Magenta is most useful for neon accents, event graphics, and high-energy digital design, especially when paired with black text for stronger contrast.
WCAG Accessibility
Contrast checks for Hot Magenta against black and white text.