Vivid Orange
#ff5f00
Crisp medium-light orange with a punchier heat
About Vivid Orange
Vivid Orange feels like a freshly printed orange label on a bright warehouse sign, not a worn, embery highlight. It's punchy and clean, but it doesn't lunge as sharply forward as Vibrant Orange. Compared with Molten Core, it stays lighter and more controlled, with less furnace weight. And against Safety Orange, it's more saturated and a touch more pushy in the red direction, so it reads as "go now" rather than just "notice."
I use it for checkout and in-app CTA emphasis when the UI needs the one you reach for warmth that holds its shape on mid-tones. It's strong for retail ordering, food delivery action states, and streaming overlays where the accent has to stay legible without borrowing the deeper heat of the ember oranges. It also works well in dashboards and finance apps for status pills or priority markers that should feel immediate but not heavy.
Quirk: on very warm off-whites, it can look louder than you expect. Pair it with cooler grays or slightly deeper browns so the orange stays crisp, not spicy.
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.