What Colors Go with Deep Blue? Color Combinations to Give Deep Blue an Intelligent Look [#1B3A98]

Deep Blue (■#1B3A98) is a dark blue that keeps some saturation while reducing brightness. On a website, it can work well for developer-facing API documentation and technical-reference pages, including page titles, feature headings, and primary “Get API Key” buttons, when you want a more restrained, intelligent direction than a brighter blue. API (Application Programming Interface) is a mechanism that lets applications and services exchange data. If blue and navy tones are spread across backgrounds, headings, and buttons, however, the hierarchy between explanations and code examples can become less clear, and selected language tabs may end up relying on color alone. This example pairs Deep Blue with cool off-white, graphite slate, and dusty clay to keep the dark blue as the main color while making technical information easier to organize.

Build on cool off-white and use dusty clay for a gentle temperature contrast

With ■#1B3A98, one practical combination is cool off-white ■#F4F6FA for the background, graphite slate ■#343B49 for body and supporting text, and dusty clay ■#D8B2A8 as the accent.

■#F4F6FA is a light color with a slight blue cast, so it keeps a visual connection to Deep Blue while brightening body text and code-explanation areas. ■#343B49 is a low-saturation dark neutral with a slight blue bias, which helps organize body copy, notes, and parameter descriptions without competing with the main color. ■#D8B2A8 is a muted red-leaning clay tone that shifts away from blue in hue without becoming vivid, adding a gentle temperature contrast to a cool technical page.

On API documentation pages, concentrate Deep Blue in page names and primary actions

Use ■#F4F6FA across body and specification-card backgrounds, then reserve ■#1B3A98 for page titles, feature headings, and primary “Get API Key” button backgrounds. Put body copy, notes, and input-value explanations in ■#343B49 so Deep Blue remains focused on key information and primary actions. For supporting UI (user-interface elements such as buttons and selection controls), a small ■#D8B2A8 secondary button or label can sit on a dark ■#1B3A98 surface with ■#343B49 text.

A contrast ratio is the numerical difference in relative brightness between foreground and background colors. ■#1B3A98 against ■#F4F6FA is about 9.22:1, ■#343B49 against ■#F4F6FA is about 10.39:1, and ■#343B49 against ■#D8B2A8 is about 5.81:1. WCAG (Web Content Accessibility Guidelines) 2.2 requires at least 4.5:1 for normal-size text, so the text combinations shown here meet that threshold. The contrast between ■#1B3A98 and ■#D8B2A8 is about 5.16:1, which also exceeds the 3:1 threshold for visual information needed to identify meaningful UI components against adjacent colors.

For an intelligent look, do not communicate selection states or errors through blue alone

The contrast between ■#D8B2A8 and ■#F4F6FA is only about 1.79:1. Do not use dusty clay as normal text on the light background, and do not rely on the boundary between those two colors alone to identify a button or input field. On light surfaces, combine ■#1B3A98 or ■#343B49 borders and text with the control.

States such as a selected code-language tab or an input error should not be distinguished by blue or clay alone. Add a stronger border, underline, icon, or explicit status text so the meaning remains clear without relying on hue. A more intellectual direction also does not require increasing the amount of blue across the page. Keeping enough ■#F4F6FA whitespace and cards, while concentrating Deep Blue in headings and actions, makes the information hierarchy easier to maintain. In HueRoll, you can enter ■#1B3A98 as a HEX color code (a web color notation beginning with #), review related colors and palette suggestions, and compare the selected color with white or black. HueRoll does not compare arbitrary pairs of colors or automatically judge WCAG AA/AAA conformance, so the two-color contrast ratios in this article were calculated separately.