CSS named color

Coral

#FF7F50
HEX#ff7f50
RGBrgb(255, 127, 80)
HSLhsl(16, 100%, 66%)
OKLCHoklch(73.51% 0.1680 40.25)
NAMEcoral

Palette

Complementary

180° on the color wheel
Complement
#52D1FF

Analogous

±30° around the base hue
Left
#FF527A
Right
#FFD752

Triadic

±120° for harmonic contrast
Triad 1
#52FF80
Triad 2
#8052FF

Shades

Lighter and darker variants
Lightest
#FFF8F5
Lighter
#FFCBB8
Base
#FF7F50
Coral
Darker
#EB3F00
Darkest
#9E2A00

CSS usage

By name
color: coral;
background-color: coral;
By HEX
color: #ff7f50;
background-color: #ff7f50;
By RGB
color: rgb(255, 127, 80);
background-color: rgb(255, 127, 80);
By HSL
color: hsl(16, 100%, 66%);
background-color: hsl(16, 100%, 66%);

WCAG contrast vs white

Aa
2.50:1
Below minimum

WCAG contrast vs black

Aa
8.40:1
AAA

Related colors

FAQ — Coral

What is the HEX code for Coral?

The HEX code for Coral is #FF7F50. It's one of the 148 named CSS colors and can be used directly in CSS as color: coral; or color: #ff7f50;

What is Coral in RGB?

Coral in RGB is rgb(255, 127, 80) — red 255, green 127, blue 80.

What is Coral in HSL?

Coral in HSL is hsl(16, 100%, 66%) — hue 16°, saturation 100%, lightness 66%.

What is the complementary color of Coral?

The complementary color (directly opposite Coral on the color wheel) is #52D1FF. The two together produce maximum contrast.

Is white text readable on Coral?

The WCAG contrast ratio against white (#FFFFFF) is 2.50:1, and against black (#000000) it's 8.40:1. White text is more readable. WCAG recommends at least 4.5:1 for body text.

← All colors & converter