Red and Yellow Mixed: What Color Do You Get?
Mix pure red (#FF0000) and pure yellow (#FFFF00) and you move along the warm side of the wheel toward orange. Use the simulator above, then compare ratio presets below.
Color 1
#FF0000
Color 2
#FFFF00
Mixed Result
HEX: #ECA400
RGB: 236, 164, 0
Closest name: Orange
Red + Yellow = Orange
Want more mixes? Explore the full Color Mixing Simulator.
Quick answer
Red + Yellow = Orange (#FF8000)
Swatch shows the headline mix color—compare with the ratio table and adjust live in the simulator.
Why this mix looks the way it does
In subtractive paint (RYB) thinking, red and yellow are both primaries; combining them removes short-wavelength reflectance and pushes hue toward orange. In RGB displays, averaging saturated red and yellow still lands in the orange family, but pigment opacity, undertone, and layering change what you see on canvas. The table uses fixed hex steps so designers can align language (“deep orange”, “amber”) with copy-paste values before they tune in the mixer.
Five mix ratios (hex previews)
Ratios describe how much of each primary contributes to the blend; hex values are reference stops for design tokens and mood boards.
| Mix | Name | Swatch | Hex | Copy |
|---|---|---|---|---|
| 80% red + 20% yellow | Deep orange | #CC5500 | ||
| 60% red + 40% yellow | Vivid orange | #FF6600 | ||
| 50% red + 50% yellow | True orange | #FF8000 | ||
| 40% red + 60% yellow | Golden orange | #FF9900 | ||
| 20% red + 80% yellow | Amber | #FFB300 |
Using this combination in UI and brand design
Use red–orange for urgency and yellow–orange for optimism; keep one dominant temperature per screen so CTAs do not fight each other. Pair saturated oranges with charcoal text on white, or with cream backgrounds for editorial warmth. After locking a hero gradient, run button and link colors through accessibility checks before shipping.
Build harmonious ramps and harmonies from any swatch above in the palette generator, then validate text, links, and buttons with the contrast checker.