Palettes · color combination
Navy blue and yellow color palettes: hex codes and contrast
Four navy and yellow palettes with hex codes, from classic navy (#000080) and yellow (#FFD500) to nautical, muted and sports sets. Navy on yellow passes easily, with ratios listed, plus copy and PNG export.
Classic navy and yellow
- #000080Navy
- #FFD500Yellow
- #FFFFFFWhite
- #3A4F7ADenim
- #FFF4B8Pale yellow
Preview
Classic navy and yellow
Body text in navy on white, with yellow as the accent.
ButtonReadable text pairs (WCAG AA, 4.5:1 or more): Navy on White 16.00:1; Navy on Pale yellow 14.39:1; Navy on Yellow 11.25:1; Denim on White 8.14:1
Nautical
- #14213DDeep navy
- #FCA311Signal yellow
- #E5E5E5Sail
- #4A6FA5Sea
- #FFFFFFWhite
Preview
Nautical
Body text in deep navy on white, with signal yellow as the accent.
ButtonReadable text pairs (WCAG AA, 4.5:1 or more): Deep navy on White 15.97:1; Deep navy on Sail 12.68:1; Deep navy on Signal yellow 7.90:1; Sea on White 5.11:1
Muted
- #1D3557Ink navy
- #E9C46AMustard
- #F1FAEEOff white
- #A8DADCPowder blue
- #457B9DSteel blue
Preview
Muted
Body text in ink navy on off white, with mustard as the accent.
ButtonReadable text pairs (WCAG AA, 4.5:1 or more): Ink navy on Off white 11.56:1; Ink navy on Powder blue 8.07:1; Ink navy on Mustard 7.39:1
Bold sports
- #0B1F4BMidnight
- #FFCC00Gold yellow
- #C8102ERed accent
- #FFFFFFWhite
- #6C7A89Gray
Preview
Bold sports
Body text in midnight on white, with red accent as the accent.
ButtonReadable text pairs (WCAG AA, 4.5:1 or more): Midnight on White 16.00:1; Midnight on Gold yellow 10.58:1; Red accent on White 5.88:1
Every palette here in 3D color space
Lightness runs up the pole and hue goes around it, so palettes that share a mood sit in the same region. Drag to turn it.
- Navy
- Yellow
- White
- Denim
- Pale yellow
- Deep navy
- Signal yellow
- Sail
- Sea
- White
- Ink navy
- Mustard
- Off white
- Powder blue
- Steel blue
- Midnight
- Gold yellow
- Red accent
- White
- Gray
On this page
Navy and yellow sit nearly opposite each other on the color wheel, and they also differ strongly in lightness. That is a rare combination: the two colors are complements and also easy to read together. It is why this pair shows up on school uniforms, road signs and swim club banners.
The four palettes
- Classic navy and yellow uses the CSS navy (#000080) and a vivid yellow (#FFD500), then white, denim (#3A4F7A) and pale yellow (#FFF4B8).
- Nautical has deep navy (#14213D), signal yellow (#FCA311), sail gray (#E5E5E5), sea blue (#4A6FA5) and white. It feels like a boat chandlery.
- Muted is gentler: ink navy (#1D3557), mustard (#E9C46A), off white, powder blue and steel blue (#457B9D).
- Bold sports adds midnight (#0B1F4B), gold yellow (#FFCC00) and a red accent (#C8102E) to white and gray.
Contrast figures
Classic: navy on white measures 16.00:1, navy on pale yellow 14.39:1, navy on yellow 11.25:1 and denim on white 8.14:1. Nautical gives deep navy on white 15.97:1, on sail 12.68:1, and on signal yellow 7.90:1; sea on white is 5.11:1. Muted has ink navy on off white at 11.56:1, on powder blue 8.07:1 and on mustard 7.39:1. Bold sports lists midnight on white at 16.00:1, midnight on gold yellow 10.58:1 and red accent on white 5.88:1.
The direction matters. Navy text on a yellow ground is excellent, but yellow text on navy shares the same ratio, so a yellow headline on a navy banner also works. The failure case is yellow on white: yellow is light, so it needs a dark outline or a dark backing.
Worked example
A youth swim club wants a sign-up sheet and a T-shirt. For the sheet, take bold sports: white paper, midnight (#0B1F4B) text at 16.00:1, a gold yellow header bar with midnight lettering at 10.58:1, and the red accent only for the deadline. For the T-shirt, flip it: a midnight shirt with the club name in gold yellow. Contrast is the same, and it carries across a pool deck. The red accent on white passes at 5.88:1, so the deadline can be set in red text too. Use Copy hex codes and send the five colors with your print order.
Related pages
See royal blue and yellow gradients for more of each color, or black and gold for another dark-and-metallic pairing. The color wheel shows why these two complement each other.