CSS Color: Coral
Named CSS color Coral — #FF7F50 in HEX, rgb(255, 127, 80) in RGB, hsl(16, 100%, 66%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Coral | color: Coral; |
| HEX | #FF7F50 | color: #FF7F50; |
| RGB | rgb(255, 127, 80) | color: rgb(255, 127, 80); |
| HSL | hsl(16, 100%, 66%) | color: hsl(16, 100%, 66%); |
About Coral
Coral is a vibrant orange-red color that sits at 16 degrees on the hue wheel. With full saturation and 66% lightness, it has a warm, tropical feel that is both eye-catching and inviting. The hex value `#FF7F50` features maximum red intensity with moderate green and blue.
Coral was Pantone's Color of the Year in 2019, cementing its place in modern design trends. In web design, Coral is a popular accent color for buttons, icons, and highlights. Its warmth makes it especially effective in lifestyle brands, travel websites, and food-related applications.
For accessibility, Coral achieves approximately 3.0:1 contrast against white, which is sufficient only for large text under WCAG AA. For better readability, pair Coral with very dark backgrounds where it can achieve contrast ratios above 6:1.
Coral is closely related to Salmon and Tomato but occupies a sweet spot between them — more orange than Salmon, less red than Tomato. It pairs beautifully with teal (its complement), navy, cream, and soft white. In Tailwind CSS, `orange-400` is the closest standard match.
FAQ
What is the hex code for Coral?
The CSS named color Coral has the hex code #FF7F50. You can use it in CSS as color: #FF7F50; or simply color: Coral;.
What is Coral in RGB?
In RGB notation, Coral is rgb(255, 127, 80). Use it in CSS as color: rgb(255, 127, 80);.
What is Coral in HSL?
In HSL notation, Coral is hsl(16, 100%, 66%). Use it in CSS as color: hsl(16, 100%, 66%);.
What color category is Coral?
Coral belongs to the Orange color family in the CSS named colors specification.
Can I use the name "Coral" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Coral; or background-color: Coral; directly in your stylesheet. Named colors are case-insensitive.
Related Colors
Try in Color Converter
Convert Coral to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →