Crimson Color (#DC143C)

#DC143Crgb(220, 20, 60)

Crimson is a CSS named color defined as hex code #DC143C. Crimson is a deep, vivid red with a slight lean toward pink, a few degrees past pure red on the color wheel toward magenta. It reads as richer and less harsh than pure red.

Color Overview & Formats

CSS: crimsonLuminance: 0.1604
HEX
#DC143C
RGB
rgb(220, 20, 60)
HSL
hsl(348, 83%, 47%)
Crimson (#DC143C) Color Format Conversions
FormatSyntax / ValuesNotesAction
HEX#DC143C6-digit hex web code
RGBrgb(220, 20, 60)Red, Green, Blue channels (0-255)
HSLhsl(348, 83%, 47%)Hue (348°), Saturation (83%), Lightness (47%)
HSV / HSBhsv(348, 91%, 86%)Hue, Saturation (91%), Value/Brightness (86%)
CMYKcmyk(0%, 91%, 73%, 14%)Digital mathematical approximation (non-print)
OKLCHoklch(0.571 0.222 20.1)Perceptually uniform color space (CSS Color 4 approximation)
CSS Implementation & Quick Steps
background-color: #DC143C; /* or crimson */
  1. Select color format: Choose the desired format (HEX #DC143C, RGB, or HSL).
  2. Copy the code: Click the copy button or press Tab+Enter to store in clipboard.
  3. Pair with white text: White text on Crimson reaches 4.99:1 (WCAG AA).

What Colors Go With Crimson?

These 6 colors all go well with Crimson (#DC143C), and each one is a standard CSS named color. The ratio is the WCAG 2.2 contrast of that color on Crimson: at 4.5:1 or above it works for text; below that, use it for backgrounds and accents.

White

#FFFFFF
4.99:1Text-safe

The natural text color on crimson buttons and banners.

Black

#000000
4.21:1Background / accent

A dramatic, high-contrast partner for editorial and sports layouts.

Gold

#FFD700
3.56:1Background / accent

A rich, regal accent for crests, borders and headlines.

Light Gray

#D3D3D3
3.33:1Background / accent

A cool neutral that calms the intensity of crimson.

Ivory

#FFFFF0
4.95:1Text-safe

A warm off-white for backgrounds around crimson elements.

Navy

#000080
3.21:1Background / accent

A deep blue that makes crimson feel formal and traditional.

Harmonious Palettes & Tints

The palettes below are algorithmically generated across standard intervals based on Crimson (HSL 348°). Each group offers full palette copy and live preview:

Complementary Harmony

Hue rotated 180 degrees on the HSL wheel (348° to 168°), keeping the original saturation and lightness.

Crimson
#DC143C
Complement (168°)
#14DCB4
Live UI Component Mockup
Component Header SampleWhite text on Crimson: 4.99:1 (WCAG AA).
Button style preview

Analogous Harmony

Hues 30 degrees either side (318° and 18°), keeping the original saturation and lightness.

Analogous (318°)
#DC14A0
Crimson
#DC143C
Analogous (18°)
#DC5014
Live UI Component Mockup
Component Header SampleWhite text on Crimson: 4.99:1 (WCAG AA).
Button style preview

Triadic Harmony

Hues spaced evenly by 120 degrees (108° and 228°), keeping the original saturation and lightness.

Crimson
#DC143C
Triadic (108°)
#3CDC14
Triadic (228°)
#143CDC
Live UI Component Mockup
Component Header SampleWhite text on Crimson: 4.99:1 (WCAG AA).
Button style preview

Tints & Shades

Mixed with white (tints) and black (shades) in sRGB at 60% and 30%.

Tint 60%
#F1A1B1
Tint 30%
#E75B77
Crimson
#DC143C
Shade 30%
#9A0E2A
Shade 60%
#580818
Live UI Component Mockup
Component Header SampleWhite text on Crimson: 4.99:1 (WCAG AA).
Button style preview

WCAG 2.2 Text Readability & Contrast Check

Under WCAG 2.2 criteria, regular body text requires at least 4.5:1 (AA) and large text requires at least 3.0:1. The table below displays calculated contrast ratios:

Text Contrast Ratios on Crimson (#DC143C)
Foreground ColorContrast RatioNormal Text (AA)Large Text (AA)Normal Text AAA (>= 7.0:1)
Pure Black (#000000)
4.21:1FailPassFail
Pure White (#FFFFFF)
4.99:1PassPassFail
Dark Charcoal (#212529)
3.09:1FailPassFail
Mid Gray (#666666)
1.15:1FailFailFail

Interactive Contrast Tester

Enter text foreground and background colors to verify WCAG legibility:

Calculated Ratio:
4.99:1
Normal: Pass AALarge: Pass AAA
Large Heading Sample (18pt Bold)

This is sample body text rendered directly to verify contrast and readability.

Crimson Background Download

Download standard 1920x1080 solid desktop wallpaper or generate mobile wallpaper:

Crimson 1920x1080 solid color background wallpaper previewStandard Wallpaper: 1920x1080 PNG (#DC143C)

Download Options

All wallpaper files precisely match the W3C standard color value:

Download 1920x1080 PNG

CSS Standard & Usage Notes

crimson = #dc143c (rgb(220, 20, 60))
W3C CSS Color 4

UI Design & Accessibility Guidelines

Use it for buttons, sale banners, university and sports branding, and headlines. On Crimson, white text passes WCAG AA at every size (4.99:1); black text passes only for large text (4.21:1).

Published: · Modified: · Editorial: SwatchAtlas Editorial Team

Frequently Asked Questions (FAQ)

Can I use black text on Crimson?

Only for large text. Black text on Crimson has a WCAG 2.2 contrast ratio of 4.21:1: enough for large text (3:1) but below the 4.5:1 needed for body text.

Can I use white text on Crimson?

Yes. White text on Crimson has a WCAG 2.2 contrast ratio of 4.99:1, which passes AA (4.5:1) for all text sizes but not the stricter AAA level (7:1) for body text.

What colors go with Crimson?

White, Black, Gold, Light Gray, Ivory and Navy all go well with Crimson. White (4.99:1) and Ivory (4.95:1) have enough contrast for text on Crimson; Black, Gold, Light Gray and Navy work better as a background or accent.

What is the difference between crimson and red?

Crimson (#DC143C) is slightly darker than red (#FF0000) and leans toward pink, with a hue of 348° against 0° for pure red. Pure red has no green or blue at all, while crimson carries a little of both.