Color guide · Warm colors

Coral Color

Coral sits between a sunny orange and a soft red. It works especially well when a design needs a warm focal point without filling the whole screen with red. The CSS color is bright and specific; the everyday color name covers a wider range of pink-orange shades.

A lively orange with a pink edge#FF7F50CSS keyword: coral

Coral color codes

HEX#FF7F50
RGBrgb(255, 127, 80)
HSLhsl(16.1, 100%, 65.7%)
CSS keywordcoral

RGB values use the 0–255 scale. HSL values are rounded to one decimal place for display. CSS Color: named colors ↗

The name & the reference

What makes coral interesting?

The name invites a marine comparison, but a coral reef is not a single-colored landscape. NOAA explains that symbiotic algae contribute to coral color; stressed corals can lose these algae and become pale. Our orange-pink swatch is a web standard, not a biological definition of healthy coral.

Read the reference: NOAA: coral color and bleaching ↗

Things with coral tones

These illustrated references explore a color family. Objects vary; none is a claim of an exact #FF7F50 match.

Illustrated placeholder · image coming later

Reef-inspired branches

Pink-orange coral forms are one reference, but actual species and lighting produce many different colors.

Illustrated placeholder · image coming later

Peach skin

The blush on a peach offers a softer orange-pink direction for a food or summer palette.

Illustrated placeholder · image coming later

Glazed ceramics

A coral glaze can become the small warm accent in an otherwise neutral room.

A practical color study

Make a warm focal point

Coral and teal work best when they have unequal jobs. Let teal describe the surrounding space and coral identify the subject. In a reef-inspired game scene, use coral in the foreground and a darker blue-green silhouette behind it; pale orange highlights can suggest sunlight without making every branch equally bright.

A coral card on ivory needs a visible boundary. In a text-heavy design, use the warm color in a small icon or header rather than coloring the entire reading area.

Ideas for using coral

01

Web interfaces

Use coral for a featured card or highlight, with dark text. Do not assume white button labels will pass contrast.

02

Game art

Try coral on treasure, fins or sunset clouds. Reserve a different shape or icon for damage warnings so the same hue does not carry conflicting meanings.

03

Illustration and interiors

Pair a coral accent with blue-green surroundings and a restrained cream base. Start with one accent object before spreading the color across every surface.

Watch out: A full coral background can compete with photos and small labels. Give it quiet neighbors and test the actual foreground color.

Tints, shades & companion hues

These tints and shades are simple sRGB channel mixes with white or black. They are useful starting points, not perceptually equal steps or guaranteed accessible pairs. Select a swatch to copy its hex code.

Hue companions

Calculated in HSL with the same saturation and lightness. Complementary and analogous colors suggest hue relationships; they do not promise contrast.

Palettes featuring coral

Coastal Coral

A warm subject in cool surroundings

Explore palette →

See the palette at work

Palette preview studio

Compare two colors →

Try a website, a game scene, a poster or a room. Pick a role, then select a swatch to repaint it. These are schematic design previews, not rendered materials or a game engine.

Text is automatically chosen as black or white for opaque preview surfaces. This does not certify your exported palette for every use.

Color & craftStories · Studio
A thoughtful starting point

Make something worth exploring.

A clear reading surface, one useful accent and room for the details.

Explore the collection →
Design notesNew ideasSmall details

Try it in context

Live design & contrast preview

Change the surface and text independently. The text result uses opaque sRGB colors; it does not evaluate your entire page.

8.40:1 · AAA normal text

AA normal text needs 4.5:1; AA large text needs 3:1. Large text means at least 18 pt, or 14 pt bold. Ratios are assessed before rounding. This is a text check, not a complete accessibility audit. W3C: understanding text contrast ↗

A little color goes a long way

Your next good idea

Try a readable heading, a short paragraph and a clear action on this surface.

Example action →Static design sample · use the controls to change it

Compare coral with another color →

Questions about coral

Is coral more orange or pink?

This CSS anchor is orange-pink. Clothing, paint and natural materials sold as coral may lean further toward either side.

Will this look the same in print?

No exact print match is promised. Paper, ink, color profiles and lighting affect the result. Use a physical proof when a precise material match matters.

Can I use these codes in a website or game?

Yes. Copy the exact code, give it a clear role in your palette and test text contrast. Add labels or shapes when color communicates important information.

Keep exploring

Explore warm colors →

#FFD700
Warm colors

Gold

A clear yellow for highlights and celebration

Explore color →
#008080
Blue & blue-green colors

Teal

A deep balance of blue and green

Explore color →
#40E0D0
Blue & blue-green colors

Turquoise

A bright blue-green for open, light compositions

Explore color →

A color name is a starting point

Digital codes describe sRGB colors. Natural objects, paint, ink and screens can look different under different lighting or calibration. Visual references illustrate color families rather than exact measured matches. Placeholder illustrations are clearly labeled. Design ideas are suggestions, not universal claims about emotion or culture.

Pick colors from an image · Convert a color · Check a complete text pair · Suggest a color guide