Colors EncyclopediaUse this color
Create with Coral
Open a professional color tool with #FF7F50 already applied. Each configuration stays canonical to the tool and can be adjusted or shared.
Generate palette & CSS variablesCreate 50–950 tokens and export CSS, SCSS, JSON, or Tailwind.Open configured tool →Open in Gradient StudioStart with Coral and its complementary color.Open configured tool →Mix this colorBlend it with a complementary color and copy color-mix() CSS.Open configured tool →Check contrastOpen the strongest black or white background pairing.Open configured tool →Accessible combinationsReview AA and AAA text options, alternatives, warnings, and UI guidance.Open configured tool →Create glass surfaceUse this color as the tint for a translucent UI panel.Open configured tool →
CSS Utilities
--color-coral: #FF7F50;
.bg-coral { background-color: #FF7F50; }
.text-coral { color: #FF7F50; }Color history, meaning and use · Editorially reviewed
About Coral Color
Coral became a color reference through the pink, red, and orange materials historically used for jewelry and decoration. Living corals are far more varied than the single warm pink-orange implied by a color swatch: Smithsonian resources describe colors produced by coral proteins, symbiotic algae, and pigments associated with microbial partners.
In contemporary design, Coral works as a softened warm accent between pink and orange. Its biological reference gives it an immediate connection with reefs, summer palettes, cosmetics, hospitality, and editorial illustration, while its warmth can make it more approachable than a saturated red.
The color name is inspired by selected coral materials and imagery; it should not be read as a statement that living coral has one standard color.
WCAG Accessibility
Contrast checks for Coral against black and white text.
Black text8.4:1AA Pass
White text2.5:1AA Fail
Downloadable color reference infographic
Coral Color Reference Infographic
Save a high-resolution infographic of Coral, including its color values, coordinated palette, and black and white text contrast.
Color Harmonies
Variants
Pairings
Machine-readable data
Machine-Readable Color Data (JSON)
Perfect for CSS, design systems, automation, and AI ingestion.
Luminance0.3702
Black text8.4:1AA Pass
White text2.5:1AA Fail
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#FF7F50",
"rgb": [
255,
127,
80
],
"hsl": [
16,
100,
66
],
"cmyk": [
0,
50,
69,
0
],
"luminance": 0.3702,
"contrast": {
"black": 8.4,
"white": 2.5
}
}WCAG
{
"AA": [
"#000000",
"#1A1A1A"
],
"AAA": [
"#000000"
]
}Harmonies
{
"complementary": "#52D1FF",
"analogous": [
"#FF527A",
"#FFD752"
],
"triadic": [
"#52FF80",
"#8052FF"
],
"tetradic": [
"#7AFF52",
"#52D1FF",
"#D752FF"
],
"splitComplementary": [
"#52FFD7",
"#527AFF"
],
"monochromatic": [
"#FFC3AD",
"#FF7F50",
"#F54100"
]
}Variants
{
"light": "#FFC3AD",
"dark": "#F54100",
"saturated": "#FF8052",
"desaturated": "#EC8965",
"pastel": "#FCDFD5",
"neon": "#FF9E7A"
}Pairings
{
"best": [
"#000000",
"#52D1FF",
"#FF527A",
"#FFD752"
],
"avoid": [
"#EC8965",
"#FFC3AD"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#FFC3AD",
"#EC8965"
]
}Knowledge graph
{
"nearestColors": [
"burnt-sienna",
"tomato",
"coral-reef",
"terracotta",
"salmon"
],
"generatedPalettes": [
"coral"
],
"generatedComparisons": [
"burnt-sienna-vs-coral",
"coral-vs-tomato"
],
"relatedFamilies": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/vibrant",
"/colors/by-tone/bright"
],
"relatedTools": [
"/harmonies/coral",
"/wcag/coral",
"/css/colors/coral",
"/hex/ff7f50",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/vibrant",
"/colors/by-tone/bright"
],
"narrower": [
"/palettes/coral"
],
"related": [
"/colors/burnt-sienna",
"/colors/tomato",
"/colors/coral-reef",
"/colors/terracotta",
"/colors/salmon",
"/compare/burnt-sienna-vs-coral",
"/compare/coral-vs-tomato",
"/harmonies/coral",
"/wcag/coral",
"/css/colors/coral",
"/hex/ff7f50",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "coral",
"name": "Coral",
"hex": "#FF7F50",
"family": "orange",
"temperature": "warm",
"tone": [
"vibrant",
"bright"
],
"uses": [
"calls to action",
"summer palettes",
"friendly branding"
],
"psychology": {
"associations": [
"warmth",
"friendliness",
"energy"
],
"contexts": [
"consumer apps",
"hospitality",
"lifestyle"
],
"avoidIn": [
"strict institutional systems"
]
},
"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": [
"orange",
"warm",
"vibrant",
"bright",
"calls-to-action",
"summer-palettes",
"friendly-branding",
"warmth",
"friendliness",
"energy"
],
"popularity": 69,
"rgb": [
255,
127,
80
],
"hsl": [
16,
100,
66
],
"cmyk": [
0,
50,
69,
0
],
"luminance": 0.3702,
"contrast": {
"black": 8.4,
"white": 2.5
},
"harmonies": {
"complementary": "#52D1FF",
"analogous": [
"#FF527A",
"#FFD752"
],
"triadic": [
"#52FF80",
"#8052FF"
],
"tetradic": [
"#7AFF52",
"#52D1FF",
"#D752FF"
],
"splitComplementary": [
"#52FFD7",
"#527AFF"
],
"monochromatic": [
"#FFC3AD",
"#FF7F50",
"#F54100"
]
},
"variants": {
"light": "#FFC3AD",
"dark": "#F54100",
"saturated": "#FF8052",
"desaturated": "#EC8965",
"pastel": "#FCDFD5",
"neon": "#FF9E7A"
},
"wcag": {
"AA": [
"#000000",
"#1A1A1A"
],
"AAA": [
"#000000"
]
},
"css": {
"variable": "--color-coral: #FF7F50;",
"utility": ".bg-coral { background-color: #FF7F50; }",
"textUtility": ".text-coral { color: #FF7F50; }"
},
"nearestColors": [
"burnt-sienna",
"tomato",
"coral-reef",
"terracotta",
"salmon"
],
"generatedPalettes": [
"coral"
],
"generatedComparisons": [
"burnt-sienna-vs-coral",
"coral-vs-tomato"
],
"relatedFamilies": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/vibrant",
"/colors/by-tone/bright"
],
"relatedTools": [
"/harmonies/coral",
"/wcag/coral",
"/css/colors/coral",
"/hex/ff7f50",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/vibrant",
"/colors/by-tone/bright"
],
"narrower": [
"/palettes/coral"
],
"related": [
"/colors/burnt-sienna",
"/colors/tomato",
"/colors/coral-reef",
"/colors/terracotta",
"/colors/salmon",
"/compare/burnt-sienna-vs-coral",
"/compare/coral-vs-tomato",
"/harmonies/coral",
"/wcag/coral",
"/css/colors/coral",
"/hex/ff7f50",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#000000",
"#52D1FF",
"#FF527A",
"#FFD752"
],
"avoid": [
"#EC8965",
"#FFC3AD"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#FFC3AD",
"#EC8965"
]
}
}