Pomegranate color palette
Cut a pomegranate open and you get this: deep seed reds #C0392B and #E74C3C, a salmon pink, then the pale pith in #FADBD8 and #F9EBEA. It's one red hue from full strength to almost white, so the set is easy to use and stays coherent. The mood is fresh and appetizing. Food blogs and juice brands will find it easy to build on.
Pomegranate palette in use
Make #F9EBEA the page background and #C0392B the text and heading color. #E74C3C is the button color, and #FADBD8 and #F1948A suit cards, alerts and tags.
This pair measures 4.68:1, so it works for body text too. The button uses #E74C3C with black text.
ButtonGood for
- Food blog theme
- Juice brand label
- Heart health campaign
- Recipe card design
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 |
|---|---|---|---|
#C0392B | #F9EBEA | 4.68:1 | AA |
#C0392B | #FADBD8 | 4.19:1 | AA large |
#E74C3C | #F9EBEA | 3.29:1 | AA large |
Pomegranate palette as code
CSS variables
:root {
--pomegranate-1: #C0392B;
--pomegranate-2: #E74C3C;
--pomegranate-3: #F1948A;
--pomegranate-4: #FADBD8;
--pomegranate-5: #F9EBEA;
}Tailwind v4
@theme {
--color-pomegranate-1: #C0392B;
--color-pomegranate-2: #E74C3C;
--color-pomegranate-3: #F1948A;
--color-pomegranate-4: #FADBD8;
--color-pomegranate-5: #F9EBEA;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'pomegranate': {
100: '#C0392B',
200: '#E74C3C',
300: '#F1948A',
400: '#FADBD8',
500: '#F9EBEA',
},SCSS
$pomegranate-1: #C0392B;
$pomegranate-2: #E74C3C;
$pomegranate-3: #F1948A;
$pomegranate-4: #FADBD8;
$pomegranate-5: #F9EBEA;JSON
["#C0392B","#E74C3C","#F1948A","#FADBD8","#F9EBEA"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.