Uwarp

Coral color

Coral is #FF7F50. Copy the codes, shades, and contrast below.

Build shades

Codes

CSS keyword coral resolves to this hex.

  • HEX#FF7F50
  • RGB255, 127, 80
  • HSL16, 100%, 66%
  • CMYK0, 50, 69, 0

Shades and tints

Ten steps toward black, then ten toward white. The outlined stop is #FF7F50.

  • 1A0D08

  • 331910

  • 4D2618

  • 663320

  • 804028

  • 994C30

  • B35938

  • CC6640

  • E67248

  • Base

  • FF8C62

  • FF9973

  • FFA585

  • FFB296

  • FFBFA8

  • FFCCB9

  • FFD9CB

  • FFE5DC

  • FFF2EE

Palettes from this hex

Hue rotations of #FF7F50. Open the scheme generator to edit a set.

Open scheme generator

  • Complementary

    • #FF8052
    • #52D1FF

  • Analogous

    • #FF527A
    • #FF8052
    • #FFD752

  • Triadic

    • #FF8052
    • #52FF80
    • #8052FF

  • Tetradic

    • #FF8052
    • #7AFF52
    • #52D1FF
    • #D752FF

Contrast

Ratios use #FF7F50 against white (#FFFFFF) and near-black (#161616). AA means 4.5:1 for body text.

Open contrast checker

  • On white

    2.50:1

    Fails AA

  • On near-black

    7.24:1

    AAA

  • White text on this color

    2.50:1

    Fails AA

  • Near-black text on this color

    7.24:1

    AAA

How to use coral

CSS coral is #FF7F50. It is a light red-orange: full red, about half green, and a smaller blue channel. Searches for coral color and coral shades land on this family, not on the pink-beige some interior brands call coral. The CSS keyword is the unambiguous one for stylesheets.

#FF7F50 is a fill color. Small dark text can work on it. White text generally does not. Read the contrast panel before you put a label on a coral button. The shade ramp is the practical answer to coral shades: each step mixes toward black and keeps the same hue, so you can pick a deeper coral for text and keep #FF7F50 for the fill. Analogous colors run from orange into red. Dark red (#8B0000) is the darker cousin if you need a heading that still feels related. Gold is the warm neighbor for highlights. Do not mix coral with a second light orange at the same size. One of them should be a shade or a tint, not a peer.

Nearby colors

Frequently Asked Questions

Quick answers about this tool—open a question to read more.

Sources

Where this swatch and the CSS keyword note come from.