Codes & values
- Color Name
Orange 500 - Color ID
KDF-C-16750592 - HEX
#FF9800 - RGB
rgb(255, 152, 0) - RGBA
rgba(255, 152, 0, 1) - HSL
hsl(36, 100%, 50%) - HSLA
hsla(36, 100%, 50%, 1) - HSV / HSB
hsv(36, 100%, 100%) - CMYK
cmyk(0%, 40%, 100%, 0%) - Light / Dark
mid
Quick answers
- What is the HEX code for Orange 500?
- #FF9800
- What is Orange 500 RGB?
- rgb(255, 152, 0)
- What is Orange 500 HSL?
- hsl(36, 100%, 50%)
- What is Orange 500 CMYK?
- cmyk(0%, 40%, 100%, 0%)
What is Orange 500?
Orange 500 is a curated orange family color at #FF9800. It appears in our library with tags for ui, web, design, button. 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..
Orange 500 HEX code
The HEX code for Orange 500 is #FF9800. Paste it into CSS as color: #FF9800; or background-color: #FF9800;. Design tools accept the same six-digit value without the # prefix (ff9800).
Orange 500 RGB
Orange 500 in RGB is rgb(255, 152, 0) (channels R 255, G 152, B 0). Use RGB when you need opacity via rgba(255, 152, 0, 1).
Orange 500 HSL & HSV
HSL is hsl(36, 100%, 50%) — useful for generating lighter/darker variants by adjusting lightness. HSV/HSB is hsv(36, 100%, 100%), closer to how many digital pickers expose hue, saturation, and brightness.
Orange 500 CMYK
Approximate CMYK for Orange 500 is cmyk(0%, 40%, 100%, 0%). 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 Orange 500
Darker shades (mixed toward black): #D57F00, #AA6500, #804C00, #553300, #2A1900. Use deeper shades for hover states, borders, and dark-mode accents.
Tints of Orange 500
Lighter tints (mixed toward white): #FFA92B, #FFBA55, #FFCC80, #FFDDAA, #FFEED5. Tints work well for soft backgrounds, chips, and secondary buttons.
Colors that go with Orange 500
Complementary pairing: #FF9800, #0067FF. Analogous neighbors: #FF1800, #FF9800, #E7FF00. Triadic accents: #FF9800, #00FF98, #9800FF. Always check text contrast when pairing.
Orange 500 color combinations
A practical combo: primary #FF9800, complementary accent #0067FF, and a neutral charcoal or off-white for text and surfaces. Split-complementary options: #FF9800, #00E7FF, #1800FF.
Orange 500 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.
Orange 500 in branding
Brand oranges feel approachable and action-oriented — common in marketplaces and youth-facing apps. Contrast vs white is 2.16:1 (better as a large accent or background than small body text); vs black 9.74:1.
Frequently asked questions
- What is the HEX code for Orange 500?
- Orange 500: #FF9800.
- What is Orange 500 RGB?
- Orange 500: rgb(255, 152, 0).
- What is Orange 500 HSL?
- Orange 500: hsl(36, 100%, 50%).
- What is Orange 500 CMYK?
- Orange 500: cmyk(0%, 40%, 100%, 0%).
- What colors go with Orange 500?
- Try complementary #FF9800, #0067FF or analogous #FF1800, #FF9800, #E7FF00.
- Is Orange 500 good for text on white?
- Not ideal for small body text (2.16:1). Use as a large heading, button, or background instead.
Accessibility snapshot
Contrast vs white: 2.16:1 (prefer large accent or background). Contrast vs black: 9.74:1. Complementary swatch: #FF9800, #0067FF.
Explore related
Orange colorsColor pickerPalette generatorContrast checkerColor guidesComplete Color Code GuideHow HEX Colors WorkHEX vs RGB vs CMYK