Shades of Coral

25 coral color codes with names

Black text 8.4:1

Coral

HEX: #FF7F50
RGB: rgb(255, 127, 80)
HSL: hsl(16, 100%, 66%)
CMYK: 0%, 50%, 69%, 0%

Use it: Scale Wheel Contrast Gradient

Black text 8.1:1

Light Coral

HEX: #F08080
RGB: rgb(240, 128, 128)
HSL: hsl(0, 79%, 72%)
CMYK: 0%, 47%, 47%, 6%

Use it: Scale Wheel Contrast Gradient

Black text 8.5:1

Coral Pink

HEX: #F88379
RGB: rgb(248, 131, 121)
HSL: hsl(5, 90%, 72%)
CMYK: 0%, 47%, 51%, 3%

Use it: Scale Wheel Contrast Gradient

Black text 7.6:1

Living Coral

HEX: #FF6F61
RGB: rgb(255, 111, 97)
HSL: hsl(5, 100%, 69%)
CMYK: 0%, 56%, 62%, 0%

Use it: Scale Wheel Contrast Gradient

Black text 6.0:1

Coral Red

HEX: #FF4040
RGB: rgb(255, 64, 64)
HSL: hsl(0, 100%, 63%)
CMYK: 0%, 75%, 75%, 0%

Use it: Scale Wheel Contrast Gradient

Black text 8.3:1

Salmon

HEX: #FA8072
RGB: rgb(250, 128, 114)
HSL: hsl(6, 93%, 71%)
CMYK: 0%, 49%, 54%, 2%

Use it: Scale Wheel Contrast Gradient

Black text 9.1:1

Dark Salmon

HEX: #E9967A
RGB: rgb(233, 150, 122)
HSL: hsl(15, 72%, 70%)
CMYK: 0%, 36%, 48%, 9%

Use it: Scale Wheel Contrast Gradient

Black text 10.5:1

Light Salmon

HEX: #FFA07A
RGB: rgb(255, 160, 122)
HSL: hsl(17, 100%, 74%)
CMYK: 0%, 37%, 52%, 0%

Use it: Scale Wheel Contrast Gradient

Black text 7.6:1

Bittersweet

HEX: #FE6F5E
RGB: rgb(254, 111, 94)
HSL: hsl(6, 99%, 68%)
CMYK: 0%, 56%, 63%, 0%

Use it: Scale Wheel Contrast Gradient

Black text 6.9:1

Sunset Orange

HEX: #FD5E53
RGB: rgb(253, 94, 83)
HSL: hsl(4, 98%, 66%)
CMYK: 0%, 63%, 67%, 1%

Use it: Scale Wheel Contrast Gradient

Black text 10.6:1

Vivid Tangerine

HEX: #FFA089
RGB: rgb(255, 160, 137)
HSL: hsl(12, 100%, 77%)
CMYK: 0%, 37%, 46%, 0%

Use it: Scale Wheel Contrast Gradient

Black text 7.0:1

Burnt Sienna

HEX: #E97451
RGB: rgb(233, 116, 81)
HSL: hsl(14, 78%, 62%)
CMYK: 0%, 50%, 65%, 9%

Use it: Scale Wheel Contrast Gradient

Black text 6.7:1

Terra Cotta

HEX: #E2725B
RGB: rgb(226, 114, 91)
HSL: hsl(10, 70%, 62%)
CMYK: 0%, 50%, 60%, 11%

Use it: Scale Wheel Contrast Gradient

Black text 12.8:1

Melon

HEX: #FEBAAD
RGB: rgb(254, 186, 173)
HSL: hsl(10, 98%, 84%)
CMYK: 0%, 27%, 32%, 0%

Use it: Scale Wheel Contrast Gradient

Black text 5.8:1

Copper Red

HEX: #CB6D51
RGB: rgb(203, 109, 81)
HSL: hsl(14, 54%, 56%)
CMYK: 0%, 46%, 60%, 20%

Use it: Scale Wheel Contrast Gradient

Black text 6.6:1

Orange Soda

HEX: #FA5B3D
RGB: rgb(250, 91, 61)
HSL: hsl(10, 95%, 61%)
CMYK: 0%, 64%, 76%, 2%

Use it: Scale Wheel Contrast Gradient

Black text 7.5:1

Outrageous Orange

HEX: #FF6E4A
RGB: rgb(255, 110, 74)
HSL: hsl(12, 100%, 65%)
CMYK: 0%, 57%, 71%, 0%

Use it: Scale Wheel Contrast Gradient

Black text 8.4:1

Middle Red

HEX: #E58E73
RGB: rgb(229, 142, 115)
HSL: hsl(14, 69%, 67%)
CMYK: 0%, 38%, 50%, 10%

Use it: Scale Wheel Contrast Gradient

Black text 7.4:1

Pastel Red

HEX: #FF6961
RGB: rgb(255, 105, 97)
HSL: hsl(3, 100%, 69%)
CMYK: 0%, 59%, 62%, 0%

Use it: Scale Wheel Contrast Gradient

Black text 7.5:1

Begonia

HEX: #FA6E79
RGB: rgb(250, 110, 121)
HSL: hsl(355, 93%, 71%)
CMYK: 0%, 56%, 52%, 2%

Use it: Scale Wheel Contrast Gradient

Black text 6.0:1

Fire Opal

HEX: #E95C4B
RGB: rgb(233, 92, 75)
HSL: hsl(6, 78%, 60%)
CMYK: 0%, 61%, 68%, 9%

Use it: Scale Wheel Contrast Gradient

Black text 6.2:1

Tart Orange

HEX: #FB4D46
RGB: rgb(251, 77, 70)
HSL: hsl(2, 96%, 63%)
CMYK: 0%, 69%, 72%, 2%

Use it: Scale Wheel Contrast Gradient

Black text 6.7:1

Fiery Rose

HEX: #FF5470
RGB: rgb(255, 84, 112)
HSL: hsl(350, 100%, 66%)
CMYK: 0%, 67%, 56%, 0%

Use it: Scale Wheel Contrast Gradient

Black text 14.3:1

Peach (Crayola)

HEX: #FFCBA4
RGB: rgb(255, 203, 164)
HSL: hsl(26, 100%, 82%)
CMYK: 0%, 20%, 36%, 0%

Use it: Scale Wheel Contrast Gradient

Black text 7.8:1

Peach Echo

HEX: #F7786B
RGB: rgb(247, 120, 107)
HSL: hsl(6, 90%, 69%)
CMYK: 0%, 51%, 57%, 3%

Use it: Scale Wheel Contrast Gradient

Coral color scale, 50 to 950

A Tailwind-style scale built from Coral (#FF7F50), evenly spaced in OKLCH lightness. Paste any other coral to build its own scale, or click a swatch for its codes and contrast.

Coral Step 400 Your color keeps its exact value at step 400, where its lightness naturally falls. The other ten steps are built around it.

Coral

Step 400 · your color

On white 2.49:1 Fail On black 8.40:1 AAA

HEX#FF7F50

RGBrgb(255, 127, 80)

HSLhsl(16, 100%, 66%)

CMYKcmyk(0%, 50%, 69%, 0%)

Send to Color Wheel Contrast Checker

Tints mixed with white

Shades mixed with black

Tones mixed with gray

Click any swatch to see its codes and contrast. Tints, shades and tones are simple RGB mixes, the classic way painters and print designers make them.

Contrast on swatchesEach step shows its best text color level and ratio ON

:root {
  --brand-50: #fcf5f3;
  --brand-100: #f9e6e0;
  --brand-200: #f7d1c3;
  --brand-300: #f9b097;
  --brand-400: #ff7f50;
  --brand-500: #ef5500;
  --brand-600: #c74500;
  --brand-700: #a53800;
  --brand-800: #82310f;
  --brand-900: #662912;
  --brand-950: #3f1b0d;
}

Next: blend 50 into 950 in the Gradient Generator, test every pair in the Accessible Color Palette, check 900 on 100 with the Contrast Checker or find matching colors on the Color Wheel.

Adobe ASE · 11 colorsMeasuring the file size...

What coral means

Coral feels lively, warm and friendly. It has the energy of orange and the softness of pink, so it feels inviting rather than loud.

The color is named after the skeletons of marine coral. Pantone chose Living Coral (#FF6F61) as its Color of the Year for 2019, partly to draw attention to endangered coral reefs.

Coral is popular in summer fashion, wedding palettes and lifestyle brands that want warmth without the urgency of red.

Tips for using coral in design

Accent on teal or navy. Coral glows next to cool colors - try it with teal or navy.

Check white text. Most corals are too light for small white text. Darken the shade or use dark text - verify in the Contrast Checker.

Sunset gradients. Coral into pink or peach makes a warm, soft gradient - try it in the Gradient Generator.

Coral color palettes

See coral in complete, ready-made palettes - each one with codes and downloads.

Want a palette built around one exact coral? Start from it in the AI Color Palette Generator or pull colors from a photo with the Image Color Picker.

Frequently Asked Questions

Coral is #FF7F50, which is rgb(255, 127, 80) and hsl(16, 100%, 66%). For print it is about 0% cyan, 50% magenta, 69% yellow and 0% black. It is also a CSS color keyword, so you can simply write coral in your stylesheet.

There is no fixed number - any coral can be made lighter, darker or more muted. This page lists 25 named shades, from Peach (Crayola) (#FFCBA4) to Copper Red (#CB6D51). The generator on this page makes a full 50-950 scale and unlimited tints, shades and tones from any coral.

Coral (#FF7F50) has a contrast ratio of 2.49:1 on white and 8.40:1 on black, so it reads best on dark backgrounds or with dark text on top of it. None of the named coral shades here reach the 4.5:1 minimum on white, so use coral as a background with dark text instead. Test any pair with the Contrast Checker.

Both. Coral sits between pink and orange - CSS coral (#FF7F50) leans orange, while Coral Pink (#F88379) and Light Coral (#F08080) lean pink.

Salmon (#FA8072) is a little pinker and softer than coral (#FF7F50), like the flesh of the fish. Coral is more orange and vivid.

Living Coral (#FF6F61) is Pantone's Color of the Year 2019 - a lively orange-pink with a golden undertone.

25 coral color codes with names

Coral

Light Coral

Coral Pink

Living Coral

Coral Red

Salmon

Dark Salmon

Light Salmon

Bittersweet

Sunset Orange

Vivid Tangerine

Burnt Sienna

Terra Cotta

Melon

Copper Red

Orange Soda

Outrageous Orange

Middle Red

Pastel Red

Begonia

Fire Opal

Tart Orange

Fiery Rose

Peach (Crayola)

Peach Echo

Coral color scale, 50 to 950

Colors that go with coral

What coral means

Tips for using coral in design

Coral color palettes

Frequently Asked Questions

More color shades

Guides & Tutorials