Crimson Background
#DC143C · rgb(220, 20, 60)
About the crimson background
Crimson (#DC143C) dials pure red back to rgb(220, 20, 60) and nudges it toward pink. The result is a deep, dramatic red with more sophistication and less alarm — the red of sports teams, roses and classic university colors.
It keeps nearly all of red's energy but reads as more considered, which makes it a strong brand and hero-section background where pure #FF0000 would feel like a warning.
What to use a crimson background for
- Sports teams and university branding
- Dramatic hero sections and campaign backgrounds
- Fashion and beauty brand accents
- Error states that need a calmer red
How to use crimson in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page crimson background */
body {
margin: 0;
background-color: #DC143C;
}
/* A single section or element */
.hero {
background-color: rgb(220, 20, 60);
} Crimson shades and tints
Click any swatch to copy it. Tints mix crimson with white; shades mix it with black.
Crimson background FAQ
What's the difference between red and crimson?
Crimson #DC143C is darker and cooler than pure red #FF0000, with green and blue channels slightly lit. In practice crimson feels deeper and more elegant; red feels louder and more urgent.
Is crimson the same as CSS 'crimson'?
Yes — crimson is a named CSS color keyword that resolves to exactly #DC143C in all browsers, so `background-color: crimson` and the hex code are interchangeable.
What is the hex code for crimson?
Crimson is #DC143C in hexadecimal, rgb(220, 20, 60) in RGB and hsl(348, 83%, 47%) in HSL. Paste #DC143C into any CSS background-color property to use it.
How do I set a crimson background in CSS?
Add background-color: #DC143C; to any element, or apply it to the whole page: body { background-color: #DC143C; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(220, 20, 60) — with identical results.