Codes & values
- Color Name
Vivid Orange - Color ID
KDF-C-16347926 - HEX
#F97316 - RGB
rgb(249, 115, 22) - RGBA
rgba(249, 115, 22, 1) - HSL
hsl(25, 95%, 53%) - HSLA
hsla(25, 95%, 53%, 1) - HSV / HSB
hsv(25, 91%, 98%) - CMYK
cmyk(0%, 54%, 91%, 2%) - Light / Dark
mid
Quick answers
- What is the HEX code for Vivid Orange?
- #F97316
- What is Vivid Orange RGB?
- rgb(249, 115, 22)
- What is Vivid Orange HSL?
- hsl(25, 95%, 53%)
- What is Vivid Orange CMYK?
- cmyk(0%, 54%, 91%, 2%)
What is Vivid Orange?
Vivid Orange is a curated orange family color at #F97316. It appears in our library with tags for ui, branding, design, web. This mid-range shade works as a primary brand or UI accent when contrast with text is verified. Temperature lean: warm — energetic, inviting, and closer to red/orange/yellow on the wheel..
Vivid Orange HEX code
The HEX code for Vivid Orange is #F97316. Paste it into CSS as color: #F97316; or background-color: #F97316;. Design tools accept the same six-digit value without the # prefix (f97316).
Vivid Orange RGB
Vivid Orange in RGB is rgb(249, 115, 22) (channels R 249, G 115, B 22). Use RGB when you need opacity via rgba(249, 115, 22, 1).
Vivid Orange HSL & HSV
HSL is hsl(25, 95%, 53%) — useful for generating lighter/darker variants by adjusting lightness. HSV/HSB is hsv(25, 91%, 98%), closer to how many digital pickers expose hue, saturation, and brightness.
Vivid Orange CMYK
Approximate CMYK for Vivid Orange is cmyk(0%, 54%, 91%, 2%). Screen HEX/RGB values are device-dependent; for print, always soft-proof in your print profile rather than relying on a web conversion alone.
Shades of Vivid Orange
Darker shades (mixed toward black): #D06012, #A64D0F, #7D3A0B, #532607, #291304. Use deeper shades for hover states, borders, and dark-mode accents.
Tints of Vivid Orange
Lighter tints (mixed toward white): #FA8A3D, #FBA264, #FCB98B, #FDD0B1, #FEE8D8. Tints work well for soft backgrounds, chips, and secondary buttons.
Colors that go with Vivid Orange
Complementary pairing: #F97316, #169CF9. Analogous neighbors: #F9162A, #F97316, #F9E516. Triadic accents: #F97316, #16F973, #7316F9. Always check text contrast when pairing.
Vivid Orange color combinations
A practical combo: primary #F97316, complementary accent #169CF9, and a neutral charcoal or off-white for text and surfaces. Split-complementary options: #F97316, #16F9E5, #162AF9.
Vivid Orange in web design
Orange is a strong CTA and promo accent. It reads energetic on light backgrounds and pairs well with deep navy or charcoal for e-commerce and food brands.
Vivid Orange in branding
Brand oranges feel approachable and action-oriented — common in marketplaces and youth-facing apps. Contrast vs white is 2.80:1 (better as a large accent or background than small body text); vs black 7.49:1.
Vivid Orange as a neon accent
Vivid Orange reads neon/electric. Prefer dark backgrounds, use sparingly for logos and nightlife creatives, and verify contrast for any overlaid text.
Frequently asked questions
- What is the HEX code for Vivid Orange?
- Vivid Orange: #F97316.
- What is Vivid Orange RGB?
- Vivid Orange: rgb(249, 115, 22).
- What is Vivid Orange HSL?
- Vivid Orange: hsl(25, 95%, 53%).
- What is Vivid Orange CMYK?
- Vivid Orange: cmyk(0%, 54%, 91%, 2%).
- What colors go with Vivid Orange?
- Try complementary #F97316, #169CF9 or analogous #F9162A, #F97316, #F9E516.
- Is Vivid Orange good for text on white?
- Not ideal for small body text (2.80:1). Use as a large heading, button, or background instead.
Accessibility snapshot
Contrast vs white: 2.80:1 (prefer large accent or background). Contrast vs black: 7.49:1. Complementary swatch: #F97316, #169CF9.
Explore related
Orange colorsColor pickerPalette generatorContrast checkerColor guidesComplete Color Code GuideHow HEX Colors WorkHEX vs RGB vs CMYK