What Colors Go with Pure Blue? Color Pairings That Sharply Highlight High-Purity Blue [#0040FF]

Pure Blue (■#0040FF) is an extremely clear blue with little shift toward purple or green. On an online exam or quiz-taking screen, it can work well for the selected question, the current position, and a primary “Next Question” button, helping high-purity blue stand out sharply while creating a clear flow through the interface. If blue is also used to represent answered, unanswered, and review states, however, the number of meanings assigned to the color can become confusing. This example combines Pure Blue with Mist White, Ink Graphite, and Dusty Wine.

Use Mist White as the base, then sharpen clear blue with dark Graphite

One possible combination for ■#0040FF is Mist White ■#F3F5FA for the background, Ink Graphite ■#20253A for body text, question text, and answer choices, and Dusty Wine ■#7A3D58 for review-related actions.

■#F3F5FA is a very light color with a faint blue cast, keeping question text and answer-choice cards visually light while creating a strong lightness difference from blue. ■#20253A is a low-saturation dark color with a blue cast, making it suitable for question text, time limits, and instructions without letting the accent color dominate. ■#7A3D58 is a restrained red-violet. Its hue (the basic color family, such as red, blue, or green) is separated from blue while its saturation stays moderate, so it can distinguish a secondary action such as “Mark for Review” from the primary action.

On an exam screen, concentrate Pure Blue in the current position and primary CTA

For a concrete layout, use ■#F3F5FA for the overall screen and unselected answer-choice cards. Use ■#0040FF for the current question number, the selected answer, and the background of the primary CTA (Call to Action, a control that prompts the next step, such as moving to the next question). Set the text on that surface to ■#FFFFFF. The contrast ratio (the relative lightness difference between text or a visual component and its background) is about 6.61:1, which exceeds the 4.5:1 minimum for normal-size text.

■#0040FF against ■#F3F5FA has a contrast ratio of about 6.06:1, so the selected answer and primary button surface remain clearly distinguishable from the light background. Use ■#20253A for question text, time limits, and instructions; against the background it has a contrast ratio of about 13.88:1. For a “Mark for Review” button, use ■#7A3D58 as the background with ■#FFFFFF text. That pair is about 7.97:1, and Dusty Wine against the page background is about 7.30:1.

WCAG (Web Content Accessibility Guidelines) 2.2 requires at least 4.5:1 for normal-size text. When a meaningful UI (user interface) component such as a button or selection control needs a color boundary to be identifiable, at least 3:1 against the adjacent color is the relevant minimum.

To keep the look sharp, do not communicate answer states with blue and wine alone

■#0040FF and ■#7A3D58 have a contrast ratio of only about 1.21:1. Do not therefore rely only on these two colors to distinguish “Answered” from “Marked for Review.” Add explicit status text, check marks, flag icons, and heavier borders. In a question navigator showing “Unanswered,” “Answered,” and “Review,” short labels or symbols should accompany the colors so users can understand the state without color alone.

If diagrams or charts in the questions already contain a lot of blue, leaving more ■#F3F5FA space is generally more useful than spreading ■#0040FF across the whole screen, because it helps separate the test content from the controls. In HueRoll, you can enter ■#0040FF as a HEX color code (a web color notation beginning with #), then review related colors, color-scheme suggestions, and the selected color’s contrast against white and black. HueRoll does not automatically compare arbitrary pairs of colors or judge AA/AAA conformance, so the two-color contrast ratios in this article were calculated separately.