Skip to content
ColorPlum

Colors · value from the CSS Color Module Level 4 (W3C)

Crimson color: hex code #DC143C, RGB and palettes

Crimson is #DC143C (RGB 220, 20, 60), the CSS named color: a strong red with a slight pink lean. White text on it measures 4.98:1, black is just under at 4.20:1, so choose white.

By Paul Gunder. Every value is computed from published standards; see how ColorPlum works.

Updated

ColorPlum swatchCrimsonmedium, vivid red
HEX
#DC143C
RGB
rgb(220, 20, 60)
HSL
hsl(348, 83%, 47%)

Best text on it: white at 4.98:1

Copy codes as
Build a paletteMake a gradientCheck contrastWallpaper

Every code for Crimson

  • HEX#DC143C
  • RGBrgb(220, 20, 60)
  • HSLhsl(348, 83%, 47%)
  • HSV348°, 91%, 86%
  • CMYK0%, 91%, 73%, 14%
  • Lablab(47.9% 71.3 35.5)
  • OKLCHoklch(57.1% 0.222 20.1)
  • Decimal14423100

Tints, shades and tones

From white to black in 10% steps, with Crimson in the middle. Tap a code to copy it.

  1. 90%#FCE8EC
  2. 80%#F8D0D8
  3. 70%#F5B9C5
  4. 60%#F1A1B1
  5. 50%#EE8A9E
  6. 40%#EA728A
  7. 30%#E75B77
  8. 20%#E34363
  9. 10%#E02C50
  10. Base#DC143C
  11. 10%#C61236
  12. 20%#B01030
  13. 30%#9A0E2A
  14. 40%#840C24
  15. 50%#6E0A1E
  16. 60%#580818
  17. 70%#420612
  18. 80%#2C040C
  19. 90%#160206

Tones (mixed with gray)

  1. 10%#D31F43
  2. 20%#CA2A4A
  3. 30%#C03450
  4. 40%#B73F57
  5. 50%#AE4A5E
  6. 60%#A55565
  7. 70%#9C606C
  8. 80%#926A72
  9. 90%#897579

Matching colors

Complementary
Analogous
Triadic
Split complementary
Tetradic (square)
Monochromatic
  • #500716
  • #960E29
  • #DC143C
  • #EF4E6E
  • #F594A7

Crimson in 3D color space

OKLab, the space ColorPlum does its math in: lightness runs up the pole, hue goes around it and saturation grows outward. The faint shell is every color a screen can show (saturation is drawn wider than lightness so hues separate). Drag to turn it.

Crimson with its complement, its triad and its tint and shade
  • Crimson
  • Triad #3CDC14
  • Triad #143CDC
  • Complement
  • 50% tint
  • 50% shade

Crimson in use

New collectionAutumn edit

Card body text stays dark for reading; crimson carries the header and the button.

Shop nowTag

Headline in Crimson

A paragraph with a link set in this color, which is dark enough for text on white.

How it looks with color-vision deficiency

A simulation (Machado and colleagues, 2009) of how the color and its complement read without one type of cone.

  • Typical color vision#DC143C
  • Protanopia (no red cones)#5C553B
  • Deuteranopia (no green cones)#8B7E35
  • Tritanopia (no blue cones)#F20029

Contrast and readability

PairingRatioWCAG 2.2
as text on white4.98:1AA AA large AAA
as text on black4.20:1AA AA large AAA
white text on it4.98:1AA AA large AAA
black text on it4.20:1AA AA large AAA
on your background4.35:1AA AA large AAA

Export

:root {
  --crimson: #dc143c;
  --crimson-rgb: 220 20 60;
  --crimson-on: #ffffff;
}
On this page

Crimson is a red with a cool, slightly pink edge. The word is usually traced to a deep red dye made from insects, and today it names a rich, saturated red. On the web it is the CSS named color crimson, #DC143C, so you can write the keyword instead of the hex code.

Numbers and names

The RGB values are 220, 20, 60: strong red, a little green and a bit more blue. HSL gives hue 348°, 83% saturation and 47% lightness; the hue just below 360° is what gives it the pink tint compared with pure red at 0°. CMYK is 0%, 91%, 73%, 14%, and the decimal form is 14423100.

The two color lists disagree here. The xkcd survey's "crimson" is #8C000F, a much darker wine-leaning red, and it sits 17.9 away from the CSS version in OKLab. The survey colors closest to the CSS crimson are "lipstick" (#D5174E, 2.7 away) and "cherry" (#CF0234, 3.1). Inside CSS, plain red (#FF0000) is 7.7 away, firebrick 8.9 and indianred 9.0. So if a design brief says crimson, check whether the swatch looks bright like this one or dark like the survey's.

Contrast

  • White on crimson: 4.98:1, which passes AA for normal text with a small margin. The same number applies to crimson as text on white.
  • Black on crimson: 4.20:1, below 4.5:1, so avoid it for small text.
  • A safer button red: the 20% shade, #B01030, gives 7.08:1 with white text, #9A0E2A gives 8.50:1 and #840C24 gives 10.19:1.
  • Pale fills: crimson on the lightest tint, #FCE8EC, measures only 4.25:1, so on pink panels use the darker #9A0E2A instead (7.24:1).

The complement is an aqua, #14DCB4. Triadic partners are green (#3CDC14) and blue (#143CDC), and analogous colors are magenta-pink #DC14A0 and orange-red #DC5014.

Worked example

You are redesigning the website for a university choir and need a main accent that suggests tradition and energy. Crimson fits, but the first mock-up has white headings on crimson bands. They pass at 4.98:1, yet the smaller subheads look thin on a phone, so you switch the band to #C61236 where white measures 5.93:1. Links in the body copy use #9A0E2A on white at 8.50:1, and the concert-date badges use the pale #FCE8EC with #9A0E2A letters. Pure crimson stays on large buttons and the logo, where its brightness is a feature.

For a deeper red compare dark red and burgundy, and for a lighter, warmer one try light coral. The red and gold color palettes show crimson-like reds in use.

Sources

  1. W3C, CSS Color Module Level 4: named colors (checked 2026-11-10) w3.org
  2. xkcd, Color survey results: the 954 most common color names (Randall Munroe, 2010; checked 2026-11-10) xkcd.com
  3. W3C, Web Content Accessibility Guidelines (WCAG) 2.2: contrast minimum (checked 2026-11-10) w3.org