Blue and Yellow Mixed: What Color Do You Get?
Classic color lessons treat blue plus yellow as green. On screens, literal RGB averaging can look muddy, so the table uses a clear green ramp centered on #00CC00 for handoff-friendly discussion.
Color 1
#0000FF
Color 2
#FFFF00
Mixed Result
HEX: #9EA39E
RGB: 158, 163, 158
Closest name: Gray
Blue + Yellow = Gray
Want more mixes? Explore the full Color Mixing Simulator.
Quick answer
Blue + Yellow = Green (#00CC00)
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
RYB primaries position blue and yellow opposite the red axis; mixing them yields greens whose temperature depends on which primary dominates. More blue shifts toward teal or forest; more yellow shifts toward chartreuse or lime. Digital mockups should still be checked against real pigments when packaging or print matters—the simulator helps bridge both worlds.
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% blue + 20% yellow | Deep blue-green | #006B4D | ||
| 60% blue + 40% yellow | Teal green | #008F55 | ||
| 50% blue + 50% yellow | True green | #00CC00 | ||
| 40% blue + 60% yellow | Spring green | #33CC33 | ||
| 20% blue + 80% yellow | Yellow-green | #99CC33 |
Using this combination in UI and brand design
Blue–yellow mixes read as growth, sustainability, and clarity—common for fintech dashboards and eco brands. Use cooler greens for data density and warmer yellow-greens for highlights. Keep body copy on white or off-white, and reserve saturated greens for charts, tags, and success states validated with your contrast workflow.
Build harmonious ramps and harmonies from any swatch above in the palette generator, then validate text, links, and buttons with the contrast checker.