Skip to content

CSS named color

LightCoral #F08080

LightCoral (CSS keyword lightcoral) has the hex code #F08080 and the RGB value rgb(240, 128, 128): a light, moderately saturated red.

LightCoral#F08080

A soft pinkish red, less saturated and pinker than coral and closer to a dusty rose. It is often used for gentle error or warning backgrounds.

Color codes for LightCoral

Color codes for LightCoral
CSS keywordlightcoral
HEX#F08080
RGBrgb(240, 128, 128)
HSLhsl(0, 79%, 72%)
HWBhwb(0 50% 6%)
OKLCHoklch(72.5% 0.138 21)
CMYK (naive, no ICC profile)cmyk(0%, 47%, 47%, 6%)
Decimal15,761,536
Hue familyReds

Contrast and accessibility

On lightcoral, black text has a contrast ratio of 8.10:1 and passes AAA at any text size; white text reaches 2.59:1.

WCAG 2.2 contrast ratios (success criteria 1.4.3 and 1.4.6: AA needs 4.5:1 for normal text and 3:1 for large text, AAA needs 7:1 and 4.5:1). APCA Lc is the lightness contrast from the APCA-W3 0.0.98G model proposed for WCAG 3; a higher absolute value is more readable, and Lc 75 is its suggested minimum for body text.

Contrast and accessibility
PairRatioAAAA largeAAAAAA largeAPCA Lc
Black text on lightcoral8.10:1PassPassPassPass53.8
White text on lightcoral2.59:1FailFailFailFail−55.4
Lightcoral text on white2.59:1FailFailFailFail50.2
Lightcoral text on black8.10:1PassPassPassPass−51.7

Tints and shades

Each step mixes lightcoral with white (tints) or black (shades) in gamma-encoded sRGB, the same result as color-mix(in srgb, lightcoral, white 25%) in CSS.

Tints (mixed with white)

  1. 5%
    #f18686
  2. 15%
    #f29393
  3. 25%
    #f4a0a0
  4. 35%
    #f5acac
  5. 45%
    #f7b9b9
  6. 55%
    #f8c6c6
  7. 65%
    #fad3d3
  8. 75%
    #fbdfdf
  9. 85%
    #fdecec
  10. 95%
    #fef9f9

Shades (mixed with black)

  1. 5%
    #e47a7a
  2. 15%
    #cc6d6d
  3. 25%
    #b46060
  4. 35%
    #9c5353
  5. 45%
    #844646
  6. 55%
    #6c3a3a
  7. 65%
    #542d2d
  8. 75%
    #3c2020
  9. 85%
    #241313
  10. 95%
    #0c0606

Color harmonies

Rotating the hue in OKLCH while keeping lightness and chroma, lightcoral's complementary color is #00BFC9 (close to darkturquoise), its analogous colors are #E680B1 and #E98A4F, and its triadic partners are #73BB67 and #74A5FC. For text on top, black gives the higher contrast.

Color harmonies
HarmonyRotationColor
Complementary+180°#00bfc9
Analogous−30°, +30°#e680b1#e98a4f
Triadic+120°, +240°#73bb67#74a5fc
Split-complementary+150°, +210°#1ac19a#26b4ec

Computed in OKLCH: the hue is rotated by 180° (complementary), ±30° (analogous), ±120° (triadic) and 180° ±30° (split-complementary) while lightness and chroma stay fixed. Results that fall outside sRGB are brought back with the CSS Color 4 gamut mapping algorithm. Because this uses OKLCH, the values differ from tools that rotate hue in HSL, but every color keeps the same perceived lightness.

Warm or cool?

LightCoral is a warm color: its hue is 0° on the HSL wheel, in the red, orange and yellow range (0° to about 70°, plus reds above 330°) that is conventionally called warm.

Nearest named and Tailwind colors

Distance is ΔE OK, the Euclidean distance in OKLab multiplied by 100. Values under about 2 are hard to tell apart side by side.

Nearest CSS named colors

Nearest CSS named colors
ColorHEXΔE OK
salmon#fa80722.5
darksalmon#e9967a5.5
coral#ff7f506.0

Nearest Tailwind v4 colors

Nearest Tailwind v4 colors
ColorHEXΔE OK
red-400#ff64675.7
rose-400#ff637e6.2
red-300#ffa2a28.7

Code snippets

CSS
.element {
  color: lightcoral;
  background-color: #f08080;
  border-color: rgb(240 128 128);
  outline-color: oklch(72.5% 0.138 21);
}
Tailwind CSS
<div class="bg-[#f08080] text-black">...</div>

/* or register it once in your CSS (Tailwind v4) */
@theme {
  --color-lightcoral: #f08080;
}
/* then use bg-lightcoral, text-lightcoral, border-lightcoral */
SwiftUI
import SwiftUI

extension Color {
  static let lightcoral = Color(red: 0.941, green: 0.502, blue: 0.502)
}
Jetpack Compose
import androidx.compose.ui.graphics.Color

val Lightcoral = Color(0xFFF08080)
Flutter
import 'package:flutter/material.dart';

const lightcoral = Color(0xFFF08080);
Android XML
<!-- res/values/colors.xml -->
<color name="lightcoral">#F08080</color>

Frequently asked questions

What is the hex code for lightcoral?
The hex code for lightcoral is #F08080. The same color is rgb(240, 128, 128), hsl(0, 79%, 72%) and oklch(72.5% 0.138 21), and in CSS you can also write the keyword lightcoral directly.
Is lightcoral a warm or cool color?
LightCoral is a warm color: its hue is 0° on the HSL wheel, in the red, orange and yellow range (0° to about 70°, plus reds above 330°) that is conventionally called warm.
What colors go with lightcoral?
Rotating the hue in OKLCH while keeping lightness and chroma, lightcoral's complementary color is #00BFC9 (close to darkturquoise), its analogous colors are #E680B1 and #E98A4F, and its triadic partners are #73BB67 and #74A5FC. For text on top, black gives the higher contrast.
Can you use white text on lightcoral?
White text on lightcoral has a contrast ratio of 2.59:1, which fails AA even for large text under WCAG 2.2. Black text reaches 8.10:1 and passes both AA and AAA. In APCA terms that is Lc −55.4 for white and Lc 53.8 for black.
What is the RGB value of lightcoral?
LightCoral is rgb(240, 128, 128): red 240, green 128 and blue 128 on the 0 to 255 scale, or 94.1%, 50.2% and 50.2%. As a decimal integer it is 15761536.

Last reviewed by Arielton Oberek.