Using Mango in design
HEX
#FF8243
RGB
255, 130, 67
HSL
20°, 100%, 63%
HSV
20°, 74%, 100%
A juicy, golden-leaning orange that suggests tropical sunlight and ripe pulp more than autumn gourds. #FF8243 brightens palettes without the pink drift of salmon or the dust of terracotta. It is especially useful for "hot climate" energy in food branding, travel design, and summer campaigns.
Best for
Internal tools, team dashboards, and knowledge-base layouts.
Accessibility
Check contrast before using mango for text-heavy layouts, especially on low-contrast backgrounds.
How does mango compare to nearby colors?
What is the difference between mango and terracotta?
Mango (#FF8243) feels more signal-like on screen, while Terracotta (#E2725B) pushes the family in the opposite direction. Mango pushes the palette toward sharper emphasis, while Terracotta leaves more room for typography, photography, or adjacent accents. Use mango when you want more pigment and immediate screen energy, and terracotta when the same family should feel calmer or more spreadable.
What color is mango?
Mangoes are culturally and economically significant across South Asia, Southeast Asia, and the Americas. The color name frequently appears in culinary packaging and tropical-themed visual language.
What is the hex code for mango?
| Format | Value |
|---|---|
| HEX | #FF8243 |
| RGB | rgb(255, 130, 67) |
| HSL | hsl(20°, 100%, 63%) |
| HSV / HSB | hsv(20°, 74%, 100%) |
| CMYK (approx.) | cmyk(0%, 49%, 74%, 0%) |
Convert Mango to other color formats
Open the color converter with Mango (#FF8243) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Mango in the color converter →What does mango mean in design?
Mango is often associated with indulgence, vacation energy, and upbeat appetite appeal — generally sweeter and more golden than persimmon's red heat. Next to tangerine, mango can read yellower and more tropical.
How do I use mango in code?
| CSS (hex) | color: #FF8243; |
| CSS (rgb) | color: rgb(255, 130, 67); |
| CSS (hsl) | color: hsl(20, 100%, 63%); |
| RGB % | rgb(100%, 51%, 26%) |
| Tailwind | text-[#FF8243] |
| SwiftUI | Color(red: 1.000, green: 0.510, blue: 0.263) |
| UIKit | UIColor(red: 1.000, green: 0.510, blue: 0.263, alpha: 1.0) |
| Android | Color.rgb(255, 130, 67) |
| Compose | Color(0xFFFF8243) |
| Web Safe | #FF9933 |
Is mango accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 2.46:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaBlack text on this color | 8.53:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on white | 2.46:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on black | 8.53: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 mango look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with mango
With mango on broader surfaces, charcoal adds enough depth to keep the system legible without the harsher edge of pure black.
Because mango 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.
Cream lets mango stay expressive without turning the whole composition stark; the result feels closer to editorial or packaging work than to raw UI default.
Teal sits far enough away from mango in lightness that the pair reads cleanly at presentation distance instead of collapsing into one band.
Sage Green changes how mango comes across: more wellness, botanical, and lifestyle palettes in mood, and less likely to feel isolated or unfinished.
What colors clash with mango
Neon Green competes with mango so aggressively that the palette never really settles into a clear primary-secondary relationship.
Magenta remaps mango too aggressively, dragging it away from food, promotion, and social-first graphics and into a brighter, more performative palette.
How should I use mango in design?
- •Mango works as a primary accent or highlight color — bright enough to draw attention but check contrast carefully if using it for text on white backgrounds.
- •Mango leans warm, so cool counterparts like navy, teal, or slate create the cleanest contrast. For a softer, tonal look, stay within neighboring warm hues and let value differences do the work.
- •Mango's high saturation makes it most effective in small doses — buttons, chart highlights, notification badges, and social media accents.
What are good mango palettes?
Morning palette
Internal tools, team dashboards, and knowledge-base layouts.
Design with mango in Moda
Create a presentation or document using mango as your accent color. Moda's AI applies your color palette automatically.
Create a design with mango →What are the shades and tints of mango?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for mango?
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
Coral
Coral sits close to mango in hue, but its red-hot cast changes the mood of the palette even when the contrast shift is small.
Tangerine
Tangerine stays very close to mango 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.
Pumpkin
Pumpkin is almost the same hue as mango; the real difference is value, with pumpkin feeling more grounded and anchor-ready.
Terracotta
Terracotta sits close to mango on the wheel, but it carries less chroma, which makes it better for steadier surfaces and calmer long-form use than for sharper emphasis and quicker visual pickup.
Salmon
Salmon is almost the same hue as mango; the real difference is value, with salmon feeling more open and surface-friendly.
Frequently asked questions
What is the hex code for mango?
The hex code for mango is #FF8243. In RGB, that's 255 red, 130 green, and 67 blue. The approximate CMYK equivalent is 0% cyan, 49% magenta, 74% yellow, and 0% key (black).
Is mango a warm or cool color?
Mango 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 mango lead the palette or stay in supporting roles?
Mango 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 mango work best in a layout?
Mango 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 mango accessible?
Mango works better with dark text than white text. Black text reaches 8.53: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 mango 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.