What Colors Go with Royal Blue? Color Schemes That Make the Most of Its Vividness
Royal blue is useful when you want a vivid blue to act as the visual focal point. In CSS, the named color royalblue is defined as #4169E1. This article uses that royal blue #4169E1 as the base color and pairs it with pearl white, pale blue-lavender, and soft apricot. Rather than reducing the vividness of the blue itself, the surrounding colors stay quieter so royal blue can stand out cleanly.
Keep royal blue vivid and make the surrounding colors quieter
In CSS HSL (Hue, Saturation, and Lightness), saturation describes color intensity and lightness describes how light or dark a color is. Royal blue #4169E1 has a hue of 225 degrees, saturation of about 73%, and lightness of about 57%. Because it is both vivid and relatively bright, it is easier to organize the page when backgrounds and card surfaces are light and lower in saturation rather than equally strong.
HueRoll’s guide to complementary and analogous colors also notes that hue distance alone does not complete a palette; saturation, lightness, area, and text contrast matter as well. With royal blue, a warm complementary-side color does not need to stay vivid. A softened color such as apricot can be used in a smaller area to highlight the blue without making two strong colors compete.
Three pairings that make the most of royal blue’s vividness
| Color | HEX | Role | How to use it |
|---|---|---|---|
| Pearl white | #F8F9FC | Page background | Keeps the largest surface nearly white so royal blue can lead in headings and decorative elements. |
| Pale blue-lavender | #E8ECFA | Cards and supporting surfaces | Keeps a blue-violet connection while lowering saturation and separating one layer from the background. |
| Soft apricot | #F2E2D0 | Small accent | Adds a gentle warm contrast in badges or small information areas. |
For body text, dark charcoal #252B36 has a contrast ratio of about 13.50:1 on pearl white #F8F9FC, about 12.05:1 on pale blue-lavender #E8ECFA, and about 11.21:1 on soft apricot #F2E2D0. All three exceed the WCAG 2.2 (Web Content Accessibility Guidelines) minimum of 4.5:1 for normal-size text.
Royal blue #4169E1 has about 4.60:1 contrast on pearl white #F8F9FC, but only about 4.11:1 on pale blue-lavender #E8ECFA and about 3.82:1 on soft apricot #F2E2D0. If it is used for normal-size text, the actual background needs to be checked. White text #FFFFFF on royal blue #4169E1 has a contrast ratio of about 4.85:1.
For primary links or a CTA (call-to-action button), deep royal blue #274A9E is a more reliable choice. Its contrast ratio is about 7.79:1 against pearl white #F8F9FC, about 6.96:1 against pale blue-lavender #E8ECFA, and about 6.47:1 against soft apricot #F2E2D0. White text #FFFFFF on deep royal blue #274A9E has a contrast ratio of about 8.20:1.
Main color:#4169E1 / Background:#F8F9FC / Supporting surface:#E8ECFA / Action color:#274A9E
Separate vivid blue from the color used for primary controls
On a service or sign-up page, pearl white can cover the main background, pale blue-lavender can support cards, soft apricot can appear in small information areas, royal blue can be used in headings and decorative elements, and deep royal blue can be reserved for the primary button. This keeps the vivid blue visible while preserving reliable text and control contrast.
The 60–30–10 approach can be used as a loose hierarchy rather than an exact pixel formula: let the background occupy the largest area, supporting colors a medium area, and the vivid focal color or action color a smaller role. Do not communicate selection or importance through color alone; add text labels, icons, underlines, borders, or other visible cues.
HueRoll lets you review tints, shades, complementary and analogous colors, other harmony suggestions, and 60–30–10 candidates from a selected color. After choosing royal blue, use tints for background candidates, shades for action colors, and analogous or complementary suggestions for supporting colors. HueRoll’s contrast section compares the selected color only with white and black, so the arbitrary two-color contrast ratios shown in this article were calculated separately.