What Is Duck Blue? Color Codes and Tips for Color Combinations

Duck blue is a fairly deep blue with a hint of green, close to the blue end of the blue-green range. Its darker quality can make it useful for website headings or broad background areas. However, published color references do not all assign the same HEX code to the name, and moving it from a dark panel to a light page changes how buttons and lettering need to be treated. This guide compares two reference colors and offers practical combinations for a waterside photography exhibition website.

Duck blue is a deep, slightly greenish blue: compare two published codes

The Japanese Yoshoku Daijiten (Western Color Dictionary) lists duck blue as ■#007199, with RGB values red 0, green 113, and blue 153. Color-site.com lists it as ■#007394, with RGB values red 0, green 115, and blue 148. RGB describes a screen color through its red, green, and blue light components. HEX specifies those components using a hash sign and six hexadecimal digits.

The two reference shades ■#007199 and ■#007394 have a contrast ratio of only about 1.02:1. Their lightness is very close, although the balance of blue and green differs slightly. Color names do not necessarily have one universal code, so agree on a specific HEX value for your design system. The layouts below use the Yoshoku Daijiten example ■#007199 as the base.

Duck blue should also not be confused with “duck egg blue,” a similar-sounding name used for much paler blue-green paints and products. For this article, duck blue ■#007199 means the deeper, more strongly colored blue sample, not a pale pastel.

Choose companion colors for a waterside photography exhibition page

Imagine a website announcing a photography exhibition devoted to waterside scenes. It needs to present the images, exhibition dates, venue, and a “Reserve a visit” action. Rather than changing the colors of the photographs, adjust the surfaces around them so the pictures and essential text have clearly different jobs.

• Dark duck-blue background: Fill the large introductory panel with duck blue ■#007199 and show the exhibition title in white ■#FFFFFF. Their contrast ratio is about 5.49:1. Put the event date on a sand beige ■#EFE3D0 label with deep blue-gray ■#263A45 lettering, giving about 9.34:1 text contrast. The sand label itself differs from the duck-blue background by about 4.34:1. For the “Reserve a visit” button, use warm off-white ■#F8F4EB with deep blue-gray ■#263A45 lettering, which contrasts at about 10.79:1.
• Light background with duck-blue headings: Use warm off-white ■#F8F4EB across most of the page and set the exhibition title in duck blue ■#007199, providing about 5.01:1 contrast. Use deep blue-gray ■#263A45 for longer descriptions, with about 10.79:1 contrast against the page. A pale blue-green ■#E2F0F2 card can hold details beneath the photography; a short duck-blue ■#007199 heading on that card has about 4.70:1 contrast. Make the reservation button duck blue with white ■#FFFFFF lettering.

The dark version can introduce the exhibition with a brief, prominent message, while the light version leaves more visual space for multiple photographs and descriptions. In both, keep essential words away from the photographs themselves and avoid turning every paragraph into blue text. The surrounding colors should support the images rather than compete with them.

Check white lettering on blue and the boundaries of pale cards

White ■#FFFFFF lettering on the chosen duck blue ■#007199 reaches about 5.49:1, while white on the alternative reference ■#007394 reaches about 5.41:1. Both exceed the usual 4.5:1 normal-text threshold, although a lighter custom adjustment must be checked again. Deep blue-gray ■#263A45 text directly on duck blue ■#007199, on the other hand, has only about 2.15:1 contrast and is not suitable for normal text. Use a sufficiently light text color on a dark panel.

Warm off-white ■#F8F4EB and pale blue-green ■#E2F0F2 differ by just 1.06:1, so the edge of a detail card may be difficult to see. If the card needs a clear boundary, an outline in deeper blue ■#005577 gives about 7.01:1 contrast against the card and 7.46:1 against the surrounding page. If the card is decorative and spacing already groups it clearly, a strong border may be unnecessary.

Sand beige ■#EFE3D0 text directly on duck blue ■#007199 would have only about 4.34:1 contrast, below the normal-text requirement. In the dark-background version above, sand beige is used as a badge fill, not as the text color; its lettering is instead deep blue-gray ■#263A45.

Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, normal text generally needs at least 4.5:1 contrast and large text at least 3:1. Visual cues necessary to identify user interface components generally need at least 3:1 against adjacent colors. This does not mean that every purely decorative card must have a strong outline.

HueRoll lets you enter and adjust HEX color codes, inspect RGB and other values, explore palette suggestions, and compare a selected color with white or black. It does not accept color names directly, compare arbitrary custom color pairs, or automatically assess WCAG conformance. The combinations involving off-white, sand beige, text, and outlines in this example were checked separately for each pair.