What Colors Go with Brilliant Azure? Color Pairing Examples That Make Vivid Sky Blue Feel Open and Airy [#64C0F7]

Brilliant Azure (■#64C0F7) is a bright, vivid sky blue with a slight cyan lean. In a web weather forecast dashboard, it works well when reserved for the selected forecast day, the primary “Update forecast” button, and small current-location accents. That keeps the sky-blue color prominent without making temperature, precipitation chance, wind speed, and supporting details compete with it. This example pairs it with Warm Ivory, Deep Teal, and Deep Plum.

Use Warm Ivory as the base, then anchor the sky blue with Deep Teal and Plum

One practical combination for ■#64C0F7 is Warm Ivory ■#FFF8EE for the page and unselected forecast cards, Deep Teal ■#14323B for temperatures, precipitation percentages, wind speeds, and primary-button text, and Deep Plum ■#6C2F5B for a secondary action such as managing saved locations.

■#FFF8EE is a very light color with a slight warm cast, so it can soften large surfaces while letting the azure blue remain distinct. ■#14323B is a dark, low-saturation blue-green that can organize numbers and explanatory text without adding another bright color. ■#6C2F5B is a dark red-violet. Because its hue—the basic color family such as red, blue, or green—is farther from azure, it can add a controlled change for secondary actions without using another bright blue.

In a weather forecast interface, use Brilliant Azure for the selected day and the primary action

For the main layout, use ■#FFF8EE for the page and unselected forecast cards, and ■#14323B for temperatures, precipitation chance, wind speed, and supporting text. The contrast ratio—the numerical difference in relative brightness between foreground and background—is about 12.85:1 for this pair.

For the selected forecast-day card and the main “Update forecast” button, use ■#64C0F7 as the fill, with ■#14323B for text, icons, and the border. That pair has a contrast ratio of about 6.73:1, which is above the 4.5:1 minimum for normal-size text. However, ■#64C0F7 against ■#FFF8EE is only about 1.91:1. On this light background, do not rely on the azure fill alone to define a selected state or button boundary. Add a ■#14323B border plus visible “Selected” text and a check icon. The dark border against the page background is about 12.85:1.

For a secondary button such as “Manage saved locations,” ■#6C2F5B with ■#FFFFFF text gives about 9.57:1. Deep Plum against the page background is about 9.07:1, and Deep Plum against ■#64C0F7 is about 4.75:1.

WCAG (Web Content Accessibility Guidelines) 2.2 requires at least 4.5:1 contrast for normal-size text. For visual information required to identify meaningful UI (user interface) components or graphics, the relevant adjacent-color contrast requirement is at least 3:1.

To keep the design open and airy, avoid white text and color-only weather states

■#64C0F7 against ■#FFFFFF has a contrast ratio of only about 2.01:1, so normal-size white text should not be placed on the Brilliant Azure background. In this example, the primary button uses ■#14323B text instead.

Also avoid expressing states such as sunny, rainy, strong wind, or warning conditions by color alone. Pair color with weather labels, icons, numeric values, and warning text when needed. The selected day should likewise use visible “Selected” text or a check icon rather than depending only on the ■#64C0F7 fill. In HueRoll, you can enter ■#64C0F7 as a HEX code (a web color code beginning with #), review related colors and palette suggestions, and check the selected color against white and black. HueRoll does not compare any arbitrary pair of colors or automatically determine WCAG AA or AAA conformance, so the pairwise contrast ratios in this article were calculated separately.