Cobalt Blue and White Color Scheme Examples: Adjusting the Area of Vivid Blue

In a cobalt-blue-and-white color scheme, the amount of blue you use changes which information visitors notice first. A mostly white page with blue limited to buttons and brief headings makes it easier to examine text and comparison tables. A larger cobalt-blue title section creates a more prominent first impression, useful for the name of an event or a short announcement. To show the difference, we compare an illustrative 15% blue layout with a 45% blue layout, including practical text, button, and boundary choices.

Keep room for information on white and put blue where emphasis is needed

Cobalt blue is the name of a vivid, fairly deep shade of blue. We use the swatch ■#0047AB listed in Figma’s color guide as our reference, with RGB values red 0, green 71, and blue 171. RGB describes screen colors through red, green, and blue light components. HEX is a web color code written with a hash sign and six hexadecimal characters. The name “cobalt blue” does not have only one possible numerical definition.

Our supporting colors are white ■#FFFFFF, a very pale blue-gray ■#EEF3F8 for secondary information panels, and dark charcoal ■#26313B for longer text. The pale blue-gray and charcoal are selected examples for these layouts rather than standardized named colors.

Cobalt blue ■#0047AB and white ■#FFFFFF have a contrast ratio of approximately 8.44:1. A contrast ratio expresses the difference in relative luminance between two colors. That gives white text on a cobalt-blue button, or cobalt-blue text on white, a substantial light-dark contrast. However, dark charcoal ■#26313B against cobalt blue ■#0047AB has a contrast ratio of only about 1.57:1. When the background changes to blue, do not keep the same charcoal lettering: switch to white instead.

Compare 15% blue on a pricing page with 45% blue on an event page

Example A: an online learning service’s pricing comparison page.As an illustrative distribution of colored background surfaces, use 70% white, 15% cobalt blue, and 15% pale blue-gray. Present pricing, subscription terms, and differences between plans on white ■#FFFFFF, with dark charcoal ■#26313B text. That pair has a contrast ratio of approximately 13.25:1. Use pale blue-gray ■#EEF3F8 for supporting notes and conditions; charcoal on that background measures about 11.87:1. Reserve cobalt blue ■#0047AB for the “Start a Free Trial” button and a short label on a recommended plan, using white ■#FFFFFF for the button lettering. Limiting saturated blue to a relatively small area helps visitors concentrate on comparing the options.

Example B: a summer outdoor movie-night event page.Now try approximately 45% white, 45% cobalt blue, and 10% pale blue-gray across the colored surfaces. Put the event name and date in white ■#FFFFFF against a large cobalt-blue ■#0047AB hero area. Place the venue directions, accessibility notes, and other detailed information on white ■#FFFFFF with charcoal ■#26313B text. For a “How to Join” button inside the blue area, reverse the colors: use a white ■#FFFFFF button fill and cobalt-blue ■#0047AB lettering. The text-to-button contrast is about 8.44:1, as is the contrast between the white button and the surrounding blue surface. Use pale blue-gray ■#EEF3F8 for a smaller transportation-information panel.

These percentages are illustrations of how the colored background areas might be divided, not universal rules for the entire page including photographs, text, and whitespace. Example A prioritizes comparing information; Example B prioritizes a memorable event heading. If the large blue section in Example B occupies too much of a phone screen, reduce its height so the event date and registration information remain easy to reach.

Check lettering on blue and the borders of near-white cards

WCAG (Web Content Accessibility Guidelines) 2.2 Level AA generally requires at least 4.5:1 contrast for normal-sized text and 3:1 for large text. While white ■#FFFFFF and cobalt blue ■#0047AB reach approximately 8.44:1, charcoal ■#26313B against cobalt blue ■#0047AB reaches just 1.57:1. Simply choosing a dark text color is therefore not enough: what matters is its contrast against the actual background. On white, make cobalt-blue links identifiable through underlines or another visual cue rather than color alone.

The boundary between white ■#FFFFFF and pale blue-gray ■#EEF3F8 has a contrast ratio of only about 1.12:1. Spacing can be enough for a decorative information card, but where a boundary is necessary to recognize an input or selected state, use a more distinct outline such as gray-blue ■#637386. That border contrasts with white by approximately 4.85:1 and with pale blue-gray by about 4.35:1. Visual information necessary to identify user-interface components generally needs at least 3:1 contrast with adjacent colors. Also check the actual border thickness and keyboard-focus indicator.

HueRoll lets you adjust colors using HEX input and check the selected color’s contrast against white or black. It cannot directly compare arbitrary custom color pairs or automatically decide WCAG AA/AAA conformance. The text, background, button, and outline ratios in this article were calculated separately.