CSS named color
IndianRed #CD5C5C
IndianRed (CSS keyword indianred) has the hex code #CD5C5C and the RGB value rgb(205, 92, 92): a medium, moderately saturated red.
A muted, brick-like red. The CSS Color 4 specification notes that it was originally named after a red pigment from India and that the name has been found offensive, so it is kept only for compatibility.
Color codes for IndianRed
| CSS keyword | indianred |
|---|---|
| HEX | #CD5C5C |
| RGB | rgb(205, 92, 92) |
| HSL | hsl(0, 53%, 58%) |
| HWB | hwb(0 36% 20%) |
| OKLCH | oklch(61.5% 0.144 22.2) |
| CMYK (naive, no ICC profile) | cmyk(0%, 55%, 55%, 20%) |
| Decimal | 13,458,524 |
| Hue family | Reds |
Contrast and accessibility
On indianred, black text has a contrast ratio of 5.28:1 and passes AA for normal text; white text reaches 3.97: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.
| Pair | Ratio | AA | AA large | AAA | AAA large | APCA Lc |
|---|---|---|---|---|---|---|
| Black text on indianred | 5.28:1 | Pass | Pass | Fail | Pass | 37.6 |
| White text on indianred | 3.97:1 | Fail | Pass | Fail | Fail | −72.0 |
| Indianred text on white | 3.97:1 | Fail | Pass | Fail | Fail | 66.5 |
| Indianred text on black | 5.28:1 | Pass | Pass | Fail | Pass | −35.1 |
Tints and shades
Each step mixes indianred with white (tints) or black (shades) in gamma-encoded sRGB, the same result as color-mix(in srgb, indianred, white 25%) in CSS.
Tints (mixed with white)
- 5%
#d06464 - 15%
#d57474 - 25%
#da8585 - 35%
#df9595 - 45%
#e4a5a5 - 55%
#e9b6b6 - 65%
#eec6c6 - 75%
#f3d6d6 - 85%
#f8e7e7 - 95%
#fdf7f7
Shades (mixed with black)
- 5%
#c35757 - 15%
#ae4e4e - 25%
#9a4545 - 35%
#853c3c - 45%
#713333 - 55%
#5c2929 - 65%
#482020 - 75%
#331717 - 85%
#1f0e0e - 95%
#0a0505
Color harmonies
Rotating the hue in OKLCH while keeping lightness and chroma, indianred's complementary color is #009AA5 (close to darkcyan), its analogous colors are #C45C8D and #C66720, and its triadic partners are #4B9A45 and #5482DB. For text on top, black gives the higher contrast.
| Harmony | Rotation | Color |
|---|---|---|
| Complementary | +180° | #009aa5 |
| Analogous | −30°, +30° | #c45c8d#c66720 |
| Triadic | +120°, +240° | #4b9a45#5482db |
| Split-complementary | +150°, +210° | #009f7b#0091cc |
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?
IndianRed 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
| Color | HEX | ΔE OK |
|---|---|---|
| chocolate | #d2691e | 7.6 |
| palevioletred | #db7093 | 8.2 |
| crimson | #dc143c | 9.0 |
Nearest Tailwind v4 colors
| Color | HEX | ΔE OK |
|---|---|---|
| orange-700 | #ca3500 | 9.3 |
| amber-700 | #bb4d00 | 9.5 |
| red-500 | #fb2c36 | 9.6 |
Code snippets
.element {
color: indianred;
background-color: #cd5c5c;
border-color: rgb(205 92 92);
outline-color: oklch(61.5% 0.144 22.2);
}<div class="bg-[#cd5c5c] text-black">...</div>
/* or register it once in your CSS (Tailwind v4) */
@theme {
--color-indianred: #cd5c5c;
}
/* then use bg-indianred, text-indianred, border-indianred */import SwiftUI
extension Color {
static let indianred = Color(red: 0.804, green: 0.361, blue: 0.361)
}import androidx.compose.ui.graphics.Color
val Indianred = Color(0xFFCD5C5C)import 'package:flutter/material.dart';
const indianred = Color(0xFFCD5C5C);<!-- res/values/colors.xml -->
<color name="indianred">#CD5C5C</color>Frequently asked questions
- What is the hex code for indianred?
- The hex code for indianred is #CD5C5C. The same color is rgb(205, 92, 92), hsl(0, 53%, 58%) and oklch(61.5% 0.144 22.2), and in CSS you can also write the keyword indianred directly.
- Is indianred a warm or cool color?
- IndianRed 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 indianred?
- Rotating the hue in OKLCH while keeping lightness and chroma, indianred's complementary color is #009AA5 (close to darkcyan), its analogous colors are #C45C8D and #C66720, and its triadic partners are #4B9A45 and #5482DB. For text on top, black gives the higher contrast.
- Can you use white text on indianred?
- White text on indianred has a contrast ratio of 3.97:1, which passes AA only for large text (24 px, or 18.66 px bold, and up) under WCAG 2.2. Black text reaches 5.28:1 and passes AA for normal text but not AAA. In APCA terms that is Lc −72.0 for white and Lc 37.6 for black.
- What is the RGB value of indianred?
- IndianRed is rgb(205, 92, 92): red 205, green 92 and blue 92 on the 0 to 255 scale, or 80.4%, 36.1% and 36.1%. As a decimal integer it is 13458524.
Last reviewed by Arielton Oberek.