Skip to main content

Red-orange

Everything you need to know about red-orange to inspire your next design.

Pick a palette type

What color is red-orange?

Red-orange is a vibrant, fiery secondary color that blends the intensity of red with the energy of orange. It is dynamic and expressive and sits between red and orange on the color wheel. This hue captures a range of shades from bright vermilion to deep flame, making it perfect for designs that demand attention and convey excitement.

red orangered orange

What does red-orange look like on digital screens?

Red orange is defined by the following color codes and values to ensure consistency across various digital platforms and devices.

- HEX code: #FF4B33

- RGB value: 100% red, 29.4% green and 20% 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.

How should I effectively use red-orange in UI design?

Here are some ways to use red-orange in your designs:

Inspire action. Use red-orange for call-to-action buttons or interactive elements to grab attention and encourage clicks or engagement.

Evoke energy. Red orange instills a sense of vitality and warmth—an excellent choice for fitness apps or creative communities that want to foster a welcoming and energetic atmosphere.

Highlight features. Use red-orange to draw attention to new or special features, like a recently added tool or a limited-time feature.

What are similar colors to red-orange?

For variations within the same vibrant spectrum as red-orange, consider:

  • Scarlet (#ED2100) closely resembles red-orange, shifting towards a more pronounced red hue.
  • Vermilion (#E34234) mirrors the warmth and brightness of red-orange, adding a bit more depth.
  • Tomato (#FF6347) maintains the lively spirit of red-orange in a lighter variant.
  • Flame (#E25822) evokes warmth and dynamism, offering a similar blend of red and orange tones.

What colors go with red-orange?

To complement red-orange's vivid tones, pair it with:

  • Teal (#069494) provides a cool counterbalance to the warmth of red-orange.
  • Cream (#FDFBD4) offers a neutral backdrop, allowing red-orange to stand out vibrantly.
  • Slate gray (#6D8196) acts as a subdued complement, enhancing the vibrancy of red-orange.
  • Moss green (#8A9A5B) adds an earthy touch, harmonizing well with red-orange's intensity.
  • Sky blue (#87CEEB) creates a striking contrast with its calming and soothing presence.

Other colors worth considering include pastel pink for a gentle contrast, navy blue for a classic complementary scheme, and light lavender for a subtle coolness.

What colors conflict with red-orange?

While red-orange is versatile, it may clash with:

  • Chartreuse (#00FF00), with its vividness, might clash with the warmth of red-orange.
  • Hot pink (#FF69B4) could be too intense when paired, potentially overpowering the harmony.
  • Neon yellow's (#FFFF00) brightness competes with the depth of red-orange.
  • Cool gray (#CBCBCB) can appear washed out when juxtaposed with the boldness of red-orange.
  • Purple's (#800080) coolness may starkly contrast with red-orange's fiery warmth.

What does red-orange symbolize?

Red orange combines the intense energy of red with the creativity and joy of orange, embodying enthusiasm, encouragement, and stimulation. It symbolizes change, movement, and dynamism, making it a great color to convey excitement, adventure, and warmth in visual narratives. Red orange is a powerful force in design and branding, evoking a blend of passion and playfulness.

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.

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.

What’s the history of red-orange?

In ancient civilizations, red-orange adorned the walls of sacred temples and the fabric of ceremonial attire, symbolizing the sun's power and the fleeting beauty of dusk. Artisans extracted the rich, warm tones of the color from natural sources like ochre and cinnabar.

During the Renaissance, red-orange hues were prominent in the palettes of master painters. They turned to the most radiant pigments, such as vermilion and realgar, to bring warmth and realism to their work. Great artists like Turner and Van Gogh used red-orange to create skies and landscapes.

In the 20th century, red-orange became a hallmark of the Art Deco movement, representing luxury and embracing modernity. Later, it surged in popularity during the 1960s and 70s psychedelic movement, capturing the spirit of rebellion and creativity in everything from fashion to graphic design.

Today, red-orange is celebrated for its ability to evoke excitement and inspire action, making it a dynamic choice for contemporary design projects.

Color variations

Shades

Tints

Tones

Hues

Color harmonies

Complementary

Split

Monochromatic

Analogous

Triadic

Square

Custom palettes

Tangerine Dream

Tropical Tango

Peach Paradise

Accessibility

Contrast checker

Large Text

Figma

Normal Text

How you design, align, and build matters. Do it together with Figma.

This is #FF4B33 text on a #FFFFFF background.

3.33:1

WCAG 2.2 Simple Contrast

Normal Text

Fail
AA
4.5:1
Fail
AAA
7:1

Large Text

Pass
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.

This is #FF4B33 text on a #000000 background.

6.31:1

WCAG 2.2 Simple Contrast

Normal Text

Pass
AA
4.5:1
Fail
AAA
7:1

Large Text

Pass
AA
3:1
Pass
AAA
4.5:1

Color simulations

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

Color conversion

The hexadecimal color #FF4B33, known as red-orange, has RGB values of R:255, G:75, B:51 and CMYK values of C:0, M:0.71, Y:0.8, K:0.

VALUECSS
HEX#FF4B33#FF4B33
RGB DECIMAL255, 75, 51rgb(255, 75, 51)
RGB PERCENTAGE100%, 29.4%, 20%rgb(100%, 29.4%, 20%)
CMYK0, 71, 80, 0
HSL7.1°, 100, 60hsl(7.1, 100%, 60%)
HSV (OR HSB)7.1°, 80, 100
WEB SAFEFF3333#FF3333
CIE-LAB58.543, 66.524, 52.762
XYZ44.356, 26.536, 5.918
xyY0.577, 0.345, 26.536
CIE-LCH58.543, 84.907, 38.419
CIE-LUV58.543, 142.874, 38.568
HUNTER-LAB51.514, 63.549, 29.248
BINARY11111111, 01001011, 00110011
iOS - SwiftUIColor(red: 255/255, green: 75/255, blue: 51/255)
iOS - UIKitUIColor(red: 255/255.0, green: 75/255.0, blue: 51/255.0, alpha: 1.0)
Android - ComposeColor(0xFFFF4B33)