CSS Utilities
--color-soft-coral: #F7A8A8;
.bg-soft-coral { background-color: #F7A8A8; }
.text-soft-coral { color: #F7A8A8; }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": "#F7A8A8",
"rgb": [
247,
168,
168
],
"hsl": [
0,
83,
81
],
"cmyk": [
0,
32,
32,
3
],
"luminance": 0.5061,
"contrast": {
"black": 11.12,
"white": 1.89
}
}WCAG
{
"AA": [
"#000000",
"#1A1A1A",
"#36454F"
],
"AAA": [
"#000000",
"#1A1A1A"
]
}Harmonies
{
"complementary": "#A6F7F7",
"analogous": [
"#F7A6CF",
"#F7CFA6"
],
"triadic": [
"#A6F7A6",
"#A6A6F7"
],
"tetradic": [
"#CFF7A6",
"#A6F7F7",
"#CFA6F7"
],
"splitComplementary": [
"#A6F7CF",
"#A6CFF7"
],
"monochromatic": [
"#FFFAFA",
"#F7A8A8",
"#EF5252"
]
}Variants
{
"light": "#FFFAFA",
"dark": "#EF5252",
"saturated": "#FF9E9E",
"desaturated": "#ECB1B1",
"pastel": "#FFFFFF",
"neon": "#FFC7C7"
}Pairings
{
"best": [
"#000000",
"#A6F7F7",
"#F7A6CF",
"#F7CFA6"
],
"avoid": [
"#ECB1B1",
"#FFFAFA"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#FFFAFA",
"#ECB1B1"
]
}Knowledge graph
{
"nearestColors": [
"pastel-coral",
"lotus-pink",
"melon",
"salmon-pink",
"flamingo-pink"
],
"generatedPalettes": [
"soft-coral"
],
"generatedComparisons": [
"flamingo-pink-vs-soft-coral",
"lotus-pink-vs-soft-coral",
"pastel-coral-vs-soft-coral",
"salmon-pink-vs-soft-coral"
],
"relatedFamilies": [
"/colors/by-family/red",
"/colors/by-temperature/warm",
"/colors/by-tone/pastel"
],
"relatedTools": [
"/harmonies/soft-coral",
"/wcag/soft-coral",
"/css/colors/soft-coral",
"/hex/f7a8a8"
],
"semanticRelations": {
"broader": [
"/colors/by-family/red",
"/colors/by-temperature/warm",
"/colors/by-tone/pastel"
],
"narrower": [
"/palettes/soft-coral"
],
"related": [
"/colors/pastel-coral",
"/colors/lotus-pink",
"/colors/melon",
"/colors/salmon-pink",
"/colors/flamingo-pink",
"/compare/flamingo-pink-vs-soft-coral",
"/compare/lotus-pink-vs-soft-coral",
"/compare/pastel-coral-vs-soft-coral",
"/compare/salmon-pink-vs-soft-coral",
"/harmonies/soft-coral",
"/wcag/soft-coral",
"/css/colors/soft-coral",
"/hex/f7a8a8"
]
}
}Full JSON dataset
{
"slug": "soft-coral",
"name": "Soft Coral",
"hex": "#F7A8A8",
"uses": [
"soft UI backgrounds",
"pastel palettes",
"gentle product design"
],
"psychology": {
"associations": [
"softness",
"care",
"lightness"
],
"contexts": [
"wellness",
"beauty",
"children products",
"lifestyle"
],
"avoidIn": [
"high-contrast operational alerts"
]
},
"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": "red",
"temperature": "warm",
"tone": [
"pastel"
],
"editorialNotes": "Curated internal color record with computed technical properties.",
"tags": [
"red",
"warm",
"pastel",
"soft-ui-backgrounds",
"pastel-palettes",
"gentle-product-design",
"softness",
"care",
"lightness"
],
"popularity": 84,
"rgb": [
247,
168,
168
],
"hsl": [
0,
83,
81
],
"cmyk": [
0,
32,
32,
3
],
"luminance": 0.5061,
"contrast": {
"black": 11.12,
"white": 1.89
},
"harmonies": {
"complementary": "#A6F7F7",
"analogous": [
"#F7A6CF",
"#F7CFA6"
],
"triadic": [
"#A6F7A6",
"#A6A6F7"
],
"tetradic": [
"#CFF7A6",
"#A6F7F7",
"#CFA6F7"
],
"splitComplementary": [
"#A6F7CF",
"#A6CFF7"
],
"monochromatic": [
"#FFFAFA",
"#F7A8A8",
"#EF5252"
]
},
"variants": {
"light": "#FFFAFA",
"dark": "#EF5252",
"saturated": "#FF9E9E",
"desaturated": "#ECB1B1",
"pastel": "#FFFFFF",
"neon": "#FFC7C7"
},
"wcag": {
"AA": [
"#000000",
"#1A1A1A",
"#36454F"
],
"AAA": [
"#000000",
"#1A1A1A"
]
},
"css": {
"variable": "--color-soft-coral: #F7A8A8;",
"utility": ".bg-soft-coral { background-color: #F7A8A8; }",
"textUtility": ".text-soft-coral { color: #F7A8A8; }"
},
"nearestColors": [
"pastel-coral",
"lotus-pink",
"melon",
"salmon-pink",
"flamingo-pink"
],
"generatedPalettes": [
"soft-coral"
],
"generatedComparisons": [
"flamingo-pink-vs-soft-coral",
"lotus-pink-vs-soft-coral",
"pastel-coral-vs-soft-coral",
"salmon-pink-vs-soft-coral"
],
"relatedFamilies": [
"/colors/by-family/red",
"/colors/by-temperature/warm",
"/colors/by-tone/pastel"
],
"relatedTools": [
"/harmonies/soft-coral",
"/wcag/soft-coral",
"/css/colors/soft-coral",
"/hex/f7a8a8"
],
"semanticRelations": {
"broader": [
"/colors/by-family/red",
"/colors/by-temperature/warm",
"/colors/by-tone/pastel"
],
"narrower": [
"/palettes/soft-coral"
],
"related": [
"/colors/pastel-coral",
"/colors/lotus-pink",
"/colors/melon",
"/colors/salmon-pink",
"/colors/flamingo-pink",
"/compare/flamingo-pink-vs-soft-coral",
"/compare/lotus-pink-vs-soft-coral",
"/compare/pastel-coral-vs-soft-coral",
"/compare/salmon-pink-vs-soft-coral",
"/harmonies/soft-coral",
"/wcag/soft-coral",
"/css/colors/soft-coral",
"/hex/f7a8a8"
]
},
"pairings": {
"best": [
"#000000",
"#A6F7F7",
"#F7A6CF",
"#F7CFA6"
],
"avoid": [
"#ECB1B1",
"#FFFAFA"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#FFFAFA",
"#ECB1B1"
]
}
}
Color meaning and use
About Soft Coral Color
Soft Coral sits in the red family with warm temperature and pastel visual character. Soft Coral is a commonly used color name in design references, palettes, and editorial color systems.
Its common associations include softness, care, and lightness, which makes it relevant for wellness and beauty. In design work, Soft Coral is most useful for soft ui backgrounds, pastel palettes, and gentle product design, especially when paired with black text for stronger contrast.
WCAG Accessibility
Contrast checks for Soft Coral against black and white text.