Skip to content

What Color Does Navy and Yellow Make?

Navy#000080
+
Yellow#FFFF00
=
#A37B6B
Green / Olive

#A37B6B

Green / Olive

HEX#A37B6B
RGBrgb(163, 123, 107)
HSLhsl(17°, 23%, 53%)
CMYKcmyk(0%, 25%, 34%, 36%)
CIELABLab(55.1, 13.3, 14.8)

Pantone™ Approximations

Warm Gray 9 CApproximate (ΔE 11.4)
Warm Gray 7 CApproximate (ΔE 11.9)
160 CApproximate (ΔE 14.2)

Pantone™ values shown are mathematical approximations, not official Pantone colors. Pantone® is a registered trademark of Pantone LLC.

RAL (approx.)

RAL 3012Beige redApproximate (ΔE 7.7)
RAL 1011Brown beigeApproximate (ΔE 12.3)
RAL 7048Pearl mouse greyApproximate (ΔE 12.8)

Pantone® and RAL® codes shown are mathematical approximations calculated by color distance (ΔE CIEDE2000). They are not officially certified values.

About This Color Combination

Navy and yellow mixed as pigments produce green and olive, as blue from navy combines with yellow to create green, while navy's depth and concentration push the result toward darker, more muted territory. The high concentration of blue in navy relative to yellow pulls the mix strongly toward blue-green and olive rather than a bright, balanced green. The result is an earthy, nature-inspired tone with cool undertones.

Usage Tips

In painting, navy-yellow mixes are useful for rendering dense, shadowed foliage, deep water with algae, and the complex dark greens of pine trees. Graphic designers who use navy and yellow as a contrast pair — a bold, prestigious combination — can use the mixed olive as a harmonizing accent or background. Interior designers find olive from navy-yellow a sophisticated wall color that bridges the gap between the two bold parent colors in a room's palette. Pair olive with tan, cream, and leather textures for a warm, club-room aesthetic.

Color Codes & Implementation

Drop-in snippets for CSS variables, Tailwind, and SCSS.

:root {
  --color-primary: #000080;   /* Navy */
  --color-secondary: #FFFF00; /* Yellow */
  --color-accent: #A37B6B;    /* Green / Olive */
}
Mix these colors

Opens the Color Mixer with both source colors pre-loaded.

Frequently Asked Questions

What does navy and yellow represent?

Navy-and-yellow is sharp, optimistic, and trustworthy — a reason it appears across maritime signage, airline branding, university crests, and political campaigns. The deep navy provides authority while yellow injects energy and visibility.

Is navy and yellow good for branding?

Very — navy-and-yellow ranks among the most legible high-contrast pairings, making it ideal for logos and signage that need to read clearly at a distance. It also performs well in low light, which is why it shows up so often in transportation and safety design.

What are the hex codes for navy and yellow?

Navy is #000080 (RGB: 0, 0, 128) and pure yellow is #FFFF00 (RGB: 255, 255, 0). Mixed evenly, the pair shifts toward an olive / muted green at #A37B6B — useful as a third, grounding color in extended brand palettes.

Try It Yourself in the Color Mixer

Adjust the ratios, add more colors, and get all color codes instantly.

Mix Your Own Colors

Enter two HEX codes to see the mixed result live.

+
=
#A37B6B

Related Color Combinations

Related Tools