What Colors Go with Brilliant Blue? Color Combinations That Make Bright Blue Stand Out Vividly [#6489F7]

Brilliant Blue (■#6489F7) is a bright, vivid blue with little shift toward purple or green. On a domain DNS (Domain Name System, the system used to manage destination and other information associated with domain names) record editor, it can work well when it is limited to the selected record, the primary “Add record” button, and the record type currently being edited. This gives the bright blue a vivid, clearly defined role while keeping hostnames, values, TTL settings, and other fields easy to organize. This example pairs it with Ice Blue White, Ink Black, and Deep Amber.

Use Ice Blue White as the base, then balance the blue with near-black and amber

With ■#6489F7, one practical combination is Ice Blue White ■#F5F8FF for record lists and editing panels, Ink Black ■#0A1324 for hostnames, values, TTL settings, and primary-button text, and Deep Amber ■#5C452D for secondary actions such as viewing change history or checking nameservers.

■#F5F8FF is a very light color with a slight blue cast, so it keeps record lists and editing areas feeling light. ■#0A1324 is a near-black, low-saturation color that can organize hostnames, record values, TTL (Time to Live, an indication of how long DNS information may be cached), and explanatory text more quietly than the blue. ■#5C452D is a dark, muted yellow-red brown. Its hue—the basic color family such as red, blue, or green—is separated from blue, so actions such as “View change history” or “Check nameservers” can be distinguished from the primary add action.

In DNS record editing, use Brilliant Blue for the selected row and primary action

For a practical layout, use ■#F5F8FF for record lists and unselected editing panels, then use ■#0A1324 for hostnames, record values, TTL settings, and supporting descriptions. Their contrast ratio—a numerical measure of the relative brightness difference between foreground and background—is about 17.46:1.

Use ■#6489F7 for the selected record row, the primary “Add record” button, and the active record-type tab, with ■#0A1324 for text and icons. Their contrast ratio is about 5.71:1, above the 4.5:1 minimum for normal-size text. In addition, ■#6489F7 against ■#F5F8FF is about 3.06:1, so selected rows and the primary button also have more than a 3:1 difference from the light background.

For secondary buttons such as “View change history” or “Check nameservers,” use ■#5C452D as the background with ■#FFFFFF text. Their contrast ratio is about 8.96:1. Deep Amber against the page background is about 8.43: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.

For a vivid look, do not rely on white text or color alone for DNS states

■#6489F7 and ■#FFFFFF have a contrast ratio of about 3.25:1, so normal-size white text should not be placed on the blue background. This example uses ■#0A1324 for the primary-button text instead.

Also, ■#6489F7 and ■#5C452D differ by only about 2.76:1, so do not use those two colors alone to communicate “unsaved,” “saved,” “pending propagation,” or “error.” Pair color with status text, check marks, warning icons, and update times. In HueRoll, you can enter ■#6489F7 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.