Using Pumpkin in design
HEX
#FF7518
RGB
255, 117, 24
HSL
24°, 100%, 55%
HSV
24°, 91%, 100%
A bold, deep orange that skews toward red while staying unmistakably "pumpkin" — ripe gourd, harvest displays, and autumn graphics. #FF7518 holds saturation better than pastels, so it performs strongly in posters, seasonal packaging, and iconography. It feels festive and graphic without drifting into brown.
Best for
Mobile app interfaces, onboarding screens, and light-mode UI themes.
Accessibility
Check contrast before using pumpkin for text-heavy layouts, especially on low-contrast backgrounds.
How does pumpkin compare to nearby colors?
What color is pumpkin?
Pumpkins are iconic in North American autumn culture, so the color name carries strong seasonal retail and illustration cues. It is also a common shorthand for "rich orange."
What is the hex code for pumpkin?
| Format | Value |
|---|---|
| HEX | #FF7518 |
| RGB | rgb(255, 117, 24) |
| HSL | hsl(24°, 100%, 55%) |
| HSV / HSB | hsv(24°, 91%, 100%) |
| CMYK (approx.) | cmyk(0%, 54%, 91%, 0%) |
Convert Pumpkin to other color formats
Open the color converter with Pumpkin (#FF7518) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Pumpkin in the color converter →What does pumpkin mean in design?
Pumpkin tends to read as cozy, festive, and outdoorsy — often linked to harvest imagery rather than tropical fruit brightness. Compared with pure orange, pumpkin usually feels deeper and more autumnal; compared with mango, it is typically less yellow and less tropical.
How do I use pumpkin in code?
| CSS (hex) | color: #FF7518; |
| CSS (rgb) | color: rgb(255, 117, 24); |
| CSS (hsl) | color: hsl(24, 100%, 55%); |
| RGB % | rgb(100%, 46%, 9%) |
| Tailwind | text-[#FF7518] |
| SwiftUI | Color(red: 1.000, green: 0.459, blue: 0.094) |
| UIKit | UIColor(red: 1.000, green: 0.459, blue: 0.094, alpha: 1.0) |
| Android | Color.rgb(255, 117, 24) |
| Compose | Color(0xFFFF7518) |
| Web Safe | #FF6600 |
Is pumpkin accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 2.69:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaBlack text on this color | 7.81:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on white | 2.69:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on black | 7.81:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does pumpkin look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with pumpkin
When pumpkin is already bright, charcoal absorbs some of the visual heat and keeps the combination closer to food, promotion, and social-first graphics than to novelty graphics.
Because pumpkin already carries warmth, navy blue gives the pair a steadier backbone and keeps it closer to packaging and campaign work than to one-note seasonal color.
With a vivid pumpkin, cream is gentler than white, so the palette keeps warmth and avoids looking overlit.
Teal shifts pumpkin away from a purely warm read and makes the combination feel more considered in real layouts.
Sage Green helps pumpkin feel more complete in practice because the pairing combines citrus-bright qualities with sage and moss support instead of leaving the source color to do every job alone.
What colors clash with pumpkin
With pumpkin, Neon Green pushes the work toward novelty or screen-effect territory faster than most brand or editorial systems can tolerate.
Magenta remaps pumpkin too aggressively, dragging it away from food, promotion, and social-first graphics and into a brighter, more performative palette.
How should I use pumpkin in design?
- •Use pumpkin where you need a clear, ownable color — logos, primary CTAs, and hero sections where it carries the visual identity.
- •Pair pumpkin with cool accents (navy, sage, steel blue) for sharp contrast, or keep it with other warm tones (cream, gold, tan) for a cohesive, editorial feel.
- •Pumpkin's high saturation makes it most effective in small doses — buttons, chart highlights, notification badges, and social media accents.
What are good pumpkin palettes?
Light touch
Mobile app interfaces, onboarding screens, and light-mode UI themes.
Design with pumpkin in Moda
Create a presentation or document using pumpkin as your accent color. Moda's AI applies your color palette automatically.
Create a design with pumpkin →What are the shades and tints of pumpkin?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for pumpkin?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Persimmon
Persimmon is almost the same hue as pumpkin; the real difference is value, with persimmon feeling more grounded and anchor-ready.
Mango
Mango is almost the same hue as pumpkin; the real difference is value, with mango feeling more open and surface-friendly.
Burnt Orange
Burnt Orange tracks close to pumpkin in hue, but the value shift changes where each one earns its place: burnt orange is easier to use for headlines, anchors, and darker sections, while pumpkin holds onto lighter surfaces and more open applications.
Coral
Coral stays very close to pumpkin in hue, but it lands lighter, which makes it better for backgrounds, tints, and softer supporting areas than for accents, stronger hierarchy, and firmer structure.
Orange
Orange lives in the same neighborhood as pumpkin, but the finish shift is enough to make one feel better for food, promotion, and social-first graphics and the other for a different visual context.
Frequently asked questions
What is the hex code for pumpkin?
The hex code for pumpkin is #FF7518. In RGB, that's 255 red, 117 green, and 24 blue. The approximate CMYK equivalent is 0% cyan, 54% magenta, 91% yellow, and 0% key (black).
Is pumpkin a warm or cool color?
Pumpkin sits on the warm side of the palette, so it pairs easily with other warm tones and becomes more energetic when you place it against cooler blues or blue-grays.
Should pumpkin lead the palette or stay in supporting roles?
Pumpkin has enough chroma to take the lead, but it usually performs best when the surrounding system stays quieter. Treat it as the voice of emphasis, not the answer to every layout need.
Where does pumpkin work best in a layout?
Pumpkin carries a lot of chroma, so it is usually strongest as punctuation rather than wallpaper. Use it for focal accents and let low-saturation surfaces do the balancing.
Is pumpkin accessible?
Pumpkin works better with dark text than white text. Black text reaches 7.81:1 contrast on the swatch, which makes the color more usable as a background or highlight surface than as a dark panel.
More orange colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Orange colors
Compare pumpkin with other orange tones.
Brown colors
Explore nearby color families to build stronger palettes and contrasts.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Red colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.