Crimson & Gold color palette
Three reds, from bright crimson #DC143C to a deep #8B0000, with gold #FFD700 and cream #FFF8DC. Red and gold together read as celebration and tradition, which is why the pairing turns up in team jerseys and Lunar New Year decorations. Cream gives you a clean background so the reds don't have to fill the page. Sports teams and pizzerias can use it without changing a thing.
Crimson & Gold palette in use
Run #8B0000 text over a #FFF8DC background. #DC143C makes the main button, #FFD700 adds trim and badges, and #B22222 suits headers and hover states.
This pair measures 9.39:1, so it works for body text too. The button uses #DC143C with white text.
ButtonGood for
- Sports team merchandise
- Lunar New Year promo
- Pizzeria menu
- Restaurant signage
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#8B0000 | #FFF8DC | 9.39:1 | AAA |
#8B0000 | #FFD700 | 7.13:1 | AAA |
#B22222 | #FFF8DC | 6.26:1 | AA |
#B22222 | #FFD700 | 4.76:1 | AA |
#DC143C | #FFF8DC | 4.68:1 | AA |
#DC143C | #FFD700 | 3.55:1 | AA large |
Crimson & Gold palette as code
CSS variables
:root {
--crimson-and-gold-1: #DC143C;
--crimson-and-gold-2: #B22222;
--crimson-and-gold-3: #8B0000;
--crimson-and-gold-4: #FFD700;
--crimson-and-gold-5: #FFF8DC;
}Tailwind v4
@theme {
--color-crimson-and-gold-1: #DC143C;
--color-crimson-and-gold-2: #B22222;
--color-crimson-and-gold-3: #8B0000;
--color-crimson-and-gold-4: #FFD700;
--color-crimson-and-gold-5: #FFF8DC;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'crimson-and-gold': {
100: '#DC143C',
200: '#B22222',
300: '#8B0000',
400: '#FFD700',
500: '#FFF8DC',
},SCSS
$crimson-and-gold-1: #DC143C;
$crimson-and-gold-2: #B22222;
$crimson-and-gold-3: #8B0000;
$crimson-and-gold-4: #FFD700;
$crimson-and-gold-5: #FFF8DC;JSON
["#DC143C","#B22222","#8B0000","#FFD700","#FFF8DC"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.