Romantic Thriller to Brandy Bear Gradient
CSS
background: linear-gradient(90deg, #a2101b 0%, #aa5412 100%);
From Romantic Thriller (#A2101B) to Brandy Bear (#AA5412). The two hues are 31° apart on the color wheel, close enough that the blend stays clean without a muddy middle.
Colors along the gradient
| Name | HEX | RGB | HSL | CMYK | |
|---|---|---|---|---|---|
| Romantic Thriller | #A2101B | 162, 16, 27 | 355°, 82%, 35% | 0, 90, 83, 36 | |
| 25% (near Tomato Sunrise) | #A42119 | 164, 33, 25 | 3°, 74%, 37% | 0, 80, 85, 36 | |
| 50% (near Sugo Della Nonna) | #A63217 | 166, 50, 23 | 11°, 76%, 37% | 0, 70, 86, 35 | |
| 75% (near Donkey Kong) | #A84314 | 168, 67, 20 | 19°, 79%, 37% | 0, 60, 88, 34 | |
| Brandy Bear | #AA5412 | 170, 84, 18 | 26°, 81%, 37% | 0, 51, 89, 33 |
Halfway along, the gradient is #A63217, closest to the named color Sugo Della Nonna. The stops are mixed in RGB, the way browsers draw a linear gradient by default.
Text on this gradient
White text reads best on both ends, so one text color works across the whole gradient. The two end colors have a contrast ratio of 1.52:1, so the change is gentle.
Other ways to use it
- Top to bottom:
linear-gradient(180deg, #a2101b, #aa5412) - Diagonal:
linear-gradient(135deg, #a2101b, #aa5412) - Radial, from the center out:
radial-gradient(circle, #a2101b, #aa5412) - Tailwind CSS:
bg-gradient-to-r from-[#a2101b] to-[#aa5412]
Gradients like this work well for page headers, buttons, cards and slide backgrounds. Keep body text on a solid color for the best readability.
Questions
What are the HEX codes of the Romantic Thriller to Brandy Bear gradient?
It starts at #A2101B (Romantic Thriller) and ends at #AA5412 (Brandy Bear), with #A63217 in the middle.
How do I reverse the gradient?
Swap the two colors or change the angle from 90deg to 270deg: linear-gradient(270deg, #a2101b, #aa5412) runs from Brandy Bear on the left to Romantic Thriller on the right.