What Colors Go with Deep Azure? Color Pairing Examples to Quietly Highlight Deep Sky Blue [#1B6998]

Deep Azure (■#1B6998) is a deep sky blue with a slight cyan nuance. On a website, it can work well for rail or bus route and timetable pages, including route names, station or stop headings, and primary “Search Route” buttons, when you want a calmer emphasis than a vivid light blue. If blue and light-blue tones are spread across backgrounds, headings, and buttons, however, the hierarchy between times and transfer information can become less clear, and service states such as normal operation, delays, or suspensions may end up relying on color alone. This example pairs Deep Azure with light mist, charcoal blue-gray, and dusty clay to keep the deep sky blue as the main color while making transit information easier to organize.

Build on light mist and use dusty clay for a gentle temperature contrast

With ■#1B6998, one practical combination is light mist ■#F3F7F8 for the background, charcoal blue-gray ■#34434B for body and supporting text, and dusty clay ■#D6B8A6 as the accent.

■#F3F7F8 is a light color with a slight blue cast, keeping a visual connection to azure while brightening timetable and guidance cards. ■#34434B is a low-saturation dark neutral with a subtle blue bias, which helps organize departure times, arrival times, transfer guidance, and notes without competing with the main color. ■#D6B8A6 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 transit interface.

On route and timetable pages, concentrate Deep Azure in route names and primary actions

Use ■#F3F7F8 across timetable and route-option card backgrounds, then reserve ■#1B6998 for route names, station or stop headings, and primary “Search Route” button backgrounds. Put times, transfer explanations, and supporting conditions in ■#34434B so Deep Azure remains focused on key information and primary actions. For supporting UI (user-interface elements such as buttons and selection controls), a small ■#D6B8A6 secondary button or label can sit on a dark ■#1B6998 surface with ■#34434B text.

A contrast ratio is the numerical difference in relative brightness between foreground and background colors. ■#1B6998 against ■#F3F7F8 is about 5.53:1, ■#34434B against ■#F3F7F8 is about 9.50:1, and ■#34434B against ■#D6B8A6 is about 5.49: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 ■#1B6998 and ■#D6B8A6 is about 3.20:1, which also exceeds the 3:1 threshold for visual information needed to identify meaningful UI components against adjacent colors.

For a quiet emphasis, do not communicate service status through blue or warm accents alone

The contrast between ■#D6B8A6 and ■#F3F7F8 is only about 1.73: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 card. On light surfaces, combine ■#1B6998 or ■#34434B borders and text with the control.

Service states such as “Normal,” “Delayed,” or “Suspended” should not be distinguished by color alone. Add explicit status text, an icon, or another symbol so the meaning remains clear without relying on hue. Even when you want the deep sky blue to stand out quietly, keeping enough ■#F3F7F8 whitespace and information cards makes it easier to separate timetable data from controls than filling the whole page with blue. In HueRoll, you can enter ■#1B6998 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.