CSS Color: Crimson
Named CSS color Crimson — #DC143C in HEX, rgb(220, 20, 60) in RGB, hsl(348, 83%, 47%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Crimson | color: Crimson; |
| HEX | #DC143C | color: #DC143C; |
| RGB | rgb(220, 20, 60) | color: rgb(220, 20, 60); |
| HSL | hsl(348, 83%, 47%) | color: hsl(348, 83%, 47%); |
About Crimson
Crimson is a deep, rich red with a slight pink undertone. Its hex value `#DC143C` translates to RGB values of 220 red, 20 green, and 60 blue, placing it at 348 degrees on the HSL color wheel — just slightly toward the pink end of the spectrum.
Named after the deep red dye produced from kermes insects, Crimson has a more sophisticated and luxurious feel than pure Red. It is widely used in branding for fashion, wine, and premium products. In web design, Crimson works well for call-to-action buttons where pure red feels too aggressive.
Crimson achieves a contrast ratio of approximately 5.6:1 against white, which passes WCAG AA for normal text. This makes it a practical alternative to pure Red when you need a bold red that also meets accessibility requirements for text.
In Tailwind CSS, `rose-600` or `red-700` are the closest matches. Crimson pairs beautifully with gold, ivory, and dark navy. It is a popular choice for error states that need to feel less alarming than a harsh pure red.
FAQ
What is the hex code for Crimson?
The CSS named color Crimson has the hex code #DC143C. You can use it in CSS as color: #DC143C; or simply color: Crimson;.
What is Crimson in RGB?
In RGB notation, Crimson is rgb(220, 20, 60). Use it in CSS as color: rgb(220, 20, 60);.
What is Crimson in HSL?
In HSL notation, Crimson is hsl(348, 83%, 47%). Use it in CSS as color: hsl(348, 83%, 47%);.
What color category is Crimson?
Crimson belongs to the Red color family in the CSS named colors specification.
Can I use the name "Crimson" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Crimson; or background-color: Crimson; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert Crimson to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →