What Colors Go with Soft Blue? Color Combinations That Make Gentle Blue Look Calm [#ABBBED]

Soft Blue (■#ABBBED) is a bright, gentle blue with a slight violet cast. On a team meeting-minutes and action-item screen, it can work well when reserved for the selected agenda item, the primary “Save minutes” button, and a short accent on the number of assigned tasks. This keeps the blue soft while supporting a calm, organized interface. This example pairs it with Deep Slate, Warm Ivory, and Muted Ochre.

Use Deep Slate to anchor the blue, then separate roles with ivory and ochre

One practical palette for ■#ABBBED uses Deep Slate ■#2E344D for the meeting summary and selected details, Warm Ivory ■#FAF8F4 for agenda cards and action-item backgrounds, and Muted Ochre ■#6A6247 for secondary actions such as viewing participants or changing display settings.

■#2E344D is a dark, low-saturation blue-violet that keeps Soft Blue gentle while giving text and outlines a firmer edge. ■#FAF8F4 is a warm near-white, helping agenda titles, assignees, due dates, and notes sit on a light surface without competing with the accent. ■#6A6247 is a subdued ochre. Its hue—the basic color family such as red, blue, or green—is separated from blue, helping “View participants” and “Change display settings” stay distinct from the primary save action.

On a meeting-minutes screen, concentrate Soft Blue on the selected agenda item and primary action

Use ■#FAF8F4 for agenda-card and action-item backgrounds, with ■#2E344D for agenda titles, assignees, due dates, and supporting notes. The contrast ratio—the numerical difference in relative brightness between foreground and background—is about 11.55:1 for this pair.

Set the meeting-summary panel to ■#2E344D and use ■#ABBBED for the primary “Save minutes” button, the selected agenda item, and a short accent on the number of assigned tasks. With ■#2E344D for the button text and icon, the contrast ratio is about 6.45:1, above the 4.5:1 minimum for normal-size text. The Soft Blue button surface against the Deep Slate panel is also about 6.45:1, helping the primary action stand out from the dark surface.

On a ■#FAF8F4 card, however, filling the selected agenda item with ■#ABBBED produces only about 1.79:1 contrast between the two surfaces. Do not rely on the fill alone: add a ■#2E344D border, a “Selected” label, and a check icon. For secondary actions such as “View participants” or “Change display settings,” use ■#6A6247 as the button background with ■#FFFFFF text. That pair is about 6.09:1, and Muted Ochre against Warm Ivory is about 5.74:1.

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

For a calm look, avoid white text and color-only status cues

■#ABBBED against ■#FFFFFF has a contrast ratio of about 1.90:1, so normal-size white text on the Soft Blue background does not reach the 4.5:1 minimum. In this example, the primary button therefore uses ■#2E344D for its text.

Also avoid distinguishing “Not started,” “In progress,” “Complete,” and “Waiting for review” by color alone. Pair each state with a written label, assignee, due date, and icons such as a check or warning symbol. Instead of spreading Soft Blue across a large background, keep it to selected agenda items, the primary button, and small count accents while leaving more open space in ■#FAF8F4. In HueRoll, you can enter ■#ABBBED 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 arbitrary pairs of colors or automatically determine WCAG AA or AAA conformance, so the pairwise contrast ratios in this article were calculated separately.