Paprika color palette
A spice rack in five jars. Dark brick #8B1A1A and red #C0392B are smoked paprika, #E74C3C is fresh tomato, #E67E22 is a warm orange and #F1C40F is saffron. It's all warm and fairly saturated, and the yellow gives it a bright end that keeps it from getting heavy. Tapas bars and spice brands can use it on menus and jar labels.
Paprika palette in use
Use a cream background with #8B1A1A for text and headings. #C0392B makes the button, #E67E22 the hover state, and #F1C40F works for price tags and badges with dark red text.
This pair measures 5.59:1, so it works for body text too. The button uses #E74C3C with black text.
ButtonGood for
- Tapas bar menu
- Spice jar labels
- BBQ sauce packaging
- Food festival poster
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 |
|---|---|---|---|
#8B1A1A | #F1C40F | 5.59:1 | AA |
#C0392B | #F1C40F | 3.27:1 | AA large |
#8B1A1A | #E67E22 | 3.26:1 | AA large |
Paprika palette as code
CSS variables
:root {
--paprika-1: #8B1A1A;
--paprika-2: #C0392B;
--paprika-3: #E74C3C;
--paprika-4: #E67E22;
--paprika-5: #F1C40F;
}Tailwind v4
@theme {
--color-paprika-1: #8B1A1A;
--color-paprika-2: #C0392B;
--color-paprika-3: #E74C3C;
--color-paprika-4: #E67E22;
--color-paprika-5: #F1C40F;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'paprika': {
100: '#8B1A1A',
200: '#C0392B',
300: '#E74C3C',
400: '#E67E22',
500: '#F1C40F',
},SCSS
$paprika-1: #8B1A1A;
$paprika-2: #C0392B;
$paprika-3: #E74C3C;
$paprika-4: #E67E22;
$paprika-5: #F1C40F;JSON
["#8B1A1A","#C0392B","#E74C3C","#E67E22","#F1C40F"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.