Color Directory
Coral
A warm pink-orange named after the reef, bright without tipping into red.
#FF7F50
- HEX
- #FF7F50
- RGB
- rgb(255, 127, 80)
- HSL
- hsl(16, 100%, 66%)
Check Coral
Contrast ratios against white and black text.
WCAG asks for 4.5:1 on body text and 3:1 on text 24px or larger. Ratios are calculated from #FF7F50 in the sRGB colour space.
About this entry
What it is
A warm pink-orange named after the reef, bright without tipping into red.
Calls to action, summer branding and accents on a neutral page.
Copy & use
How to copy and use coral
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Calls to action, summer branding and accents on a neutral page.
- 03
Check the final result
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Tints & shades
A scale built from coral
Each step is mixed toward white or black from #FF7F50 in sRGB, which is what the browser does too. Useful when one colour has to cover hover states, borders and backgrounds as well as the accent itself.
Lighter 60%
#FFCCB9
rgb(255, 204, 185)
Lighter 30%
#FFA585
rgb(255, 165, 133)
- Base
Base
#FF7F50
rgb(255, 127, 80)
Darker 30%
#B35938
rgb(179, 89, 56)
Darker 60%
#663320
rgb(102, 51, 32)
Name & pairing
Where coral comes from
Named after the reef organism, whose colour comes from algae living in its tissue. It sits between pink and orange, which is why it is hard to reproduce consistently in print.
What to put beside it
Bright against teal and cream, and its natural complement is the blue-green it is found against in the sea. On a neutral it carries a call to action without shouting.
Common questions
Using coral
What is coral?
A warm pink-orange named after the reef, bright without tipping into red. Calls to action, summer branding and accents on a neutral page.
What are the colour values for Coral?
Coral is HEX #FF7F50, RGB rgb(255, 127, 80), HSL hsl(16, 100%, 66%). All three notations describe the same sRGB colour, so pick whichever your tool expects: hex for CSS and design files, RGB when you need the channels separately, HSL when you want to shift lightness or saturation without changing the hue.
Will coral work everywhere?
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Can I customise coral after copying?
Use the supplied value as a starting point, then check contrast and nearby colours in the final design. Converting between hex, RGB and HSL does not change the intended sRGB colour.
Also known as
Keep browsing