What Colors Go with Vivid Azure? Color Pairing Examples That Make Vibrant Sky Blue Look Open and Airy [#1FABFF]

Vivid Azure (■#1FABFF) is a bright sky blue with a cyan cast and high saturation, meaning strong color intensity. On a video-meeting pre-join screen, it can work well when it is limited to the primary “Join meeting” button, the currently selected device, and connection-check accents. This helps the vibrant sky blue feel open and airy while keeping the camera preview and device settings easy to organize. This example pairs it with Cloud White, Deep Navy, and Deep Teal.

Use Cloud White broadly, then support the sky blue with dark navy and teal

With ■#1FABFF, one practical combination is Cloud White ■#F7FBFF for the page background, Deep Navy ■#102A43 for meeting names, device names, and explanatory text, and Deep Teal ■#20505A for secondary actions such as opening audio or video settings.

■#F7FBFF is an almost-white cool color that preserves generous visual space while letting the azure stay bright. ■#102A43 is a low-saturation dark blue that can organize the meeting name, participant name, and microphone or camera instructions without competing with the main color. ■#20505A is a dark blue-green. Its hue—the basic color family such as red, blue, or green—is shifted slightly away from azure, and its lightness is lower, so a secondary action such as “Open device settings” can be separated from the main join action.

On a pre-join screen, use Vivid Azure for the Join button and selected settings

For a practical layout, use ■#F7FBFF for the page and settings-card background, then use ■#102A43 for the meeting name, participant name, and microphone or camera instructions. Their contrast ratio—a numerical measure of the relative brightness difference between foreground and background—is about 14.08:1.

Use ■#1FABFF for the primary “Join meeting” button and selected-device indicators, with ■#102A43 for the text and border. The text contrast is about 5.81:1, which is above the 4.5:1 minimum for normal-size text. However, ■#1FABFF against ■#F7FBFF is only about 2.43:1, so the azure fill alone should not define a button or selected state on the light background. Use a ■#102A43 border or icon as well. That border against ■#F7FBFF is about 14.08:1.

For a secondary button such as “Open device settings,” use ■#20505A as the background with ■#FFFFFF text. Their contrast ratio is about 8.91:1. Deep Teal against the page background is about 8.57:1, and ■#20505A against ■#1FABFF is about 3.53:1.

WCAG (Web Content Accessibility Guidelines) 2.2 requires a contrast ratio of at least 4.5:1 for normal-size text. Visual information needed to identify meaningful UI (user interface) components or graphical objects requires at least 3:1 against adjacent colors.

To keep the layout open and airy, do not rely on white text or color alone for connection state

■#1FABFF and ■#FFFFFF have a contrast ratio of about 2.52:1, so normal-size white text should not be placed on the azure button. Use ■#102A43 for the primary-button text, and keep the same dark border when the button sits on a light background.

Do not communicate states such as “connected,” “checking connection,” “microphone off,” or “camera off” through color alone. Pair color with status text, microphone or camera icons, slash marks, or check marks. In HueRoll, you can enter ■#1FABFF as a HEX color code (a Web color code beginning with #), then review related colors, palette suggestions, and the selected color’s contrast against white and black. HueRoll does not compare arbitrary pairs of colors or automatically determine WCAG AA or AAA conformance, so the two-color contrast ratios in this article were calculated separately.