Tangerine is a vibrant, citrus-inspired color that captures the essence of its namesake fruit with bright and cheery qualities. It sits between yellow and red on the color wheel, radiating a playful and energetic vibe.
Tangerine is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #FFA800
- RGB value: 100% red, 65.9% green, and 0% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are some ways to use tangerine in your designs:
- Create a focal point. Tangerine’s vibrancy draws attention to key areas, such as CTA buttons, guiding users to important information.
- Evoke positivity and playfulness. Tangerine’s cheery qualities enhance the user experience. Consider it for backgrounds, headers, or icons associated with cheerfulness or joy.
- Establish hierarchy with contrast. Pair tangerine with cool tones for a striking effect or against light backgrounds for subtle yet impactful highlights.
- Use accents strategically. Tangerine shines as an accent, but use it sparingly for maximum impact without overwhelming the design.
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same energetic spectrum as tangerine, consider:
- Orange (#FFA500) offers a slightly less intense and cooler feel.
- Yellow-orange (#FFB343) injects a touch more yellow into the mix, adding a little extra sunshine with a hint of citrus.
- Amber (#FFBF00) is a deeper hue, offering a touch of sophistication while retaining the warmth.
- Mimosa (#F2B949) has an orange base with slightly less vibrancy.
To complement tangerine, consider pairing it with:
- Seafoam (#8DDCDC) creates a vibrant contrast with tangerine, like a tropical beach at sunset.
- Royal blue (#305CDE) makes tangerine pop, creating a dramatic and energetic combination.
- Pink (#FF8DA1) adds a touch of whimsy and playfulness to tangerine, perfect for feminine or youthful designs.
- Pastel yellow (#FFEE8C) creates a harmoniously cheerful combination with tangerine.
Other colors worth considering are black and white for a clean foundation, lavender to add a touch of whimsy, or taupe to create a warm and earthy feel, perfect for fall-inspired palettes.
While tangerine is warm and bright, it may clash with:
- Neon green (#2CFF05) clashes with tangerine, like a neon sign against a sunset—both are vibrant but not necessarily harmonious.
- Navy blue (#000080) can overshadow tangerine’s warmth, resulting in a cold and unwelcoming feel.
- Red (#FF2C2C) is bold and attention-grabbing, which can overwhelm tangerine, causing visual chaos and difficulty focusing.
- Purple (#9D00FF) creates an awkward contrast with tangerine’s warmth, resulting in a disjointed and unpleasant look.
Tangerine’s vibrant orange hue symbolizes abundance, prosperity, and good luck. The Chinese New Year tradition of gifting tangerines reflects this symbolism, as the tangerine’s round shape and bright color mirror coins and wealth. Tangerine can also represent energy, enthusiasm, and creativity. Its playful and cheerful nature reflects a youthful zest for life.
In color psychology, tangerine’s warm tones evoke feelings of happiness, optimism, and stimulation. Exposure to tangerine can create a sense of warmth and friendliness, but too much tangerine can have the opposite effect, causing overstimulation or hyperactivity.
For UI/UX design, tangerine can create a positive and engaging user experience. It can be used to encourage user interaction or promote creativity and social engagement. However, be mindful of the potential for overstimulation. Large areas of tangerine or poorly balanced use with clashing colors can overwhelm users, making it difficult to navigate the interface.
The vibrant color tangerine gets its name from the fruit, which originally described a type of mandarin orange from Tangier, Morocco. The color inherited the name around 1710 as the fruit became more widely available and popular in Europe.
In ancient Egypt, yellow-orange hues similar to tangerine were used in tomb paintings, potentially symbolizing warmth and life. In Asia, similar colors have been linked to prosperity and good fortune.
Today, it continues to be a popular color choice for its ability to evoke a sense of cheer and creativity.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Golden Harvest
Midday Sun
Orange Squash
Contrast checker
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
1.93:1
WCAG 2.2 Simple Contrast
Normal Text
- Fail
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Fail
- AA
- 3:1
- Fail
- AAA
- 4.5:1
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
10.85:1
WCAG 2.2 Simple Contrast
Normal Text
- Pass
- AA
- 4.5:1
- Pass
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Pass
- AAA
- 4.5:1
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #FFA800, known as tangerine, has RGB values of R:255 G:168, B:0 and CMYK values of C:0, M:34, Y:100, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | FFA800 | #FFA800 |
| RGB DECIMAL | 255, 168, 0 | RGB(255,168,0) |
| RGB PERCENTAGE | 100, 65.9, 0 | RGB(100%,65.9%,0%) |
| CMYK | 0, 34, 100, 0 | |
| HSL | 39.5°, 100, 50 | HSL(39.5,100%,50%) |
| HSV (OR HSB) | 39.5°, 100, 100 | |
| WEB SAFE | FF9900 | #FF9900 |
| CIE-LAB | 75.619, 22.365, 79.397 | |
| XYZ | 55.244, 49.269, 6.601 | |
| xyY | 0.497, 0.443, 49.269 | |
| CIE-LCH | 75.619, 82.487, 74.268 | |
| CIE-LUV | 75.619, 72.354, 75.058 | |
| HUNTER-LAB | 70.192, 17.651, 43.559 | |
| BINARY | 11111111, 10101000, 00000000 | |
| iOS - SwiftUI | Color(red: 1, green: 0.659, blue: 0) | |
| iOS - UIKit | UIColor(red: 1, green: 0.659, blue: 0, alpha: 1) | |
| Android - Compose | Color(0xFFFFA800) |
