Vermilion
#f4320c
Brighter, cleaner red-orange for urgent accents and charts
About Vermilion
Vermilion reads like a fresh burn mark on a clean UI surface. It has that crisp, orange-tilted heat, but it doesn't carry the deeper, more reactive weight of Primal Rage or the flatter, tomato-mess feel of Reign of Tomatoes. Compared to Metroid Red, it's less glossy and less red-forward, so the signal lands as bright heat first, not warning-label intensity.
I use Vermilion for sports apps, live-event dashboards, and checkout-critical retail CTAs when the button needs to feel immediate without drifting into consequence-red. It also works for notification badges and status chips that should pop on dark gradients, but still look "product-ready" next to engineered UI elements. In motion graphics, it stays readable because the orange undertone keeps it from going too aggressive.
Quick quirk: it can look a touch harsh beside very saturated oranges in the same row, so I usually give it breathing room with charcoal, soft gray, or a calmer secondary accent. Pairing with cool neutrals keeps it from turning orange-brown.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.