Using Tangerine in design
HEX
#FF9966
RGB
255, 153, 102
HSL
20°, 100%, 70%
HSV
20°, 60%, 100%
A lighter, slightly flushed orange that leans toward coral rather than traffic-cone brightness. #FF9966 keeps warmth but softens the shout of pure orange, which makes it workable for larger fields in fashion, packaging, and illustration. It is especially handy when you want citrus energy without neon harshness.
Best for
Event branding, newsletters, and customer-facing web pages.
Accessibility
Check contrast before using tangerine for text-heavy layouts, especially on low-contrast backgrounds.
How does tangerine compare to nearby colors?
What is the difference between tangerine and salmon?
Tangerine (#FF9966) and Salmon (#FA8072) may look neighboring at first glance, yet their surface character diverges once they sit next to whites, charcoals, and other real layout neutrals. The practical difference is not raw contrast so much as project fit: Tangerine reads more naturally in food, promotion, and social-first graphics, while Salmon fits more easily into beauty, lifestyle, and soft campaign backgrounds. Choose tangerine when the surrounding system aligns better with food, promotion, and social-first graphics, and move to salmon when the stronger contextual fit is beauty, lifestyle, and soft campaign backgrounds.
What color is tangerine?
Named for the tangerine citrus, a mandarin variety historically linked to Tangier. In product and graphic design, "tangerine" often signals approachable freshness alongside other fruit-forward palette names.
What is the hex code for tangerine?
| Format | Value |
|---|---|
| HEX | #FF9966 |
| RGB | rgb(255, 153, 102) |
| HSL | hsl(20°, 100%, 70%) |
| HSV / HSB | hsv(20°, 60%, 100%) |
| CMYK (approx.) | cmyk(0%, 40%, 60%, 0%) |
Convert Tangerine to other color formats
Open the color converter with Tangerine (#FF9966) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Tangerine in the color converter →What does tangerine mean in design?
Tangerine tends to read as playful, friendly, and a little sweeter than straight orange. Compared with peach or apricot, tangerine usually feels more saturated and fruit-juice vivid; compared with salmon, it stays more orange than pink.
How do I use tangerine in code?
| CSS (hex) | color: #FF9966; |
| CSS (rgb) | color: rgb(255, 153, 102); |
| CSS (hsl) | color: hsl(20, 100%, 70%); |
| RGB % | rgb(100%, 60%, 40%) |
| Tailwind | text-[#FF9966] |
| SwiftUI | Color(red: 1.000, green: 0.600, blue: 0.400) |
| UIKit | UIColor(red: 1.000, green: 0.600, blue: 0.400, alpha: 1.0) |
| Android | Color.rgb(255, 153, 102) |
| Compose | Color(0xFFFF9966) |
| Web Safe | #FF9966 |
Is tangerine accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 2.1:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaBlack text on this color | 10:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on white | 2.1:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on black | 10: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 tangerine look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with tangerine
With tangerine on broader surfaces, charcoal adds enough depth to keep the system legible without the harsher edge of pure black.
Beside tangerine, navy blue turns a hot palette into something more usable for documents, product surfaces, and brand systems.
With a vivid tangerine, cream is gentler than white, so the palette keeps warmth and avoids looking overlit.
What colors clash with tangerine
With tangerine, Neon Green pushes the work toward novelty or screen-effect territory faster than most brand or editorial systems can tolerate.
Magenta remaps tangerine too aggressively, dragging it away from food, promotion, and social-first graphics and into a brighter, more performative palette.
How should I use tangerine in design?
- •Use tangerine for buttons, badges, and chart accents where it can stand out. Test text contrast with WCAG tools before using it for body copy on light backgrounds.
- •Pair tangerine 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.
- •Vivid colors like tangerine work best as punctuation in a layout: CTAs, key metrics, or a single hero element. Surrounding neutrals keep it from fatiguing the viewer.
What are good tangerine palettes?
Cozy neutral
Nonprofit campaigns, fundraising pages, and grant materials.
Design with tangerine in Moda
Create a presentation or document using tangerine as your accent color. Moda's AI applies your color palette automatically.
Create a design with tangerine →What are the shades and tints of tangerine?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for tangerine?
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 tangerine in hue, but its red-hot cast changes the mood of the palette even when the contrast shift is small.
Mango
Mango stays very close to tangerine in hue, but it lands darker, which makes it better for headlines, anchors, and darker sections than for lighter surfaces and more open applications.
Salmon
Salmon sits close to tangerine 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.
Fawn
Fawn sits close to tangerine 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.
Terracotta
Terracotta is almost the same hue as tangerine; the real difference is value, with terracotta feeling more grounded and anchor-ready.
Frequently asked questions
What is the hex code for tangerine?
The hex code for tangerine is #FF9966. In RGB, that's 255 red, 153 green, and 102 blue. The approximate CMYK equivalent is 0% cyan, 40% magenta, 60% yellow, and 0% key (black).
Is tangerine a warm or cool color?
Tangerine reads as warm. It feels most natural with creams, golds, rusts, and other warm accents, while cooler partners like navy or teal create sharper contrast.
Is tangerine better as an accent or a full-palette color?
Tangerine is usually best when it leads in short bursts rather than covering everything. It can headline a palette, but most layouts work better when the color handles accents, highlights, or one main hero role instead of every surface.
How should I use tangerine in a design?
Tangerine is vivid enough to work best in controlled doses such as CTAs, highlighted metrics, chart accents, or a single hero element. Surround it with quieter neutrals so it does not exhaust the layout.
Can I use tangerine for text or backgrounds?
Tangerine works better with dark text than white text. Black text reaches 10: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 tangerine 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.