What Colors Go with Light Blue? A Fresh, Balanced Color Scheme
Light blue is useful when you want a bright, airy blue to give a page a fresh look. In CSS, the named color lightblue is defined as #ADD8E6. This article uses that light blue #ADD8E6 as the base color and pairs it with frost white, mist gray, and pale lemon. The goal is to keep the lightness of the blue while preserving clear text and controls.
Use pale surfaces broadly and keep text colors deeper
In CSS HSL (Hue, Saturation, and Lightness), saturation describes color intensity and lightness describes how light or dark a color is. Light blue #ADD8E6 has a hue of about 195 degrees, saturation of about 53%, and lightness of about 79%. It works naturally with light surfaces, but if text and buttons are also pale, contrast can drop quickly. Deeper colors should therefore be reserved for body text and primary actions.
HueRoll’s guide to complementary and analogous colors also emphasizes that hue alone does not determine the finished palette; saturation, lightness, and area matter too. With light blue, a near-white background can cover most of the page, while mist gray and a pale yellow tone create gentle variation without making the layout feel busy.
Three pairings for a fresh light-blue palette
| Color | HEX | Role | How to use it |
|---|---|---|---|
| Frost white | #F8FBFC | Page background | Reserve light blue for decorative accents and filled areas against the near-white background. Use dark navy-gray for heading text. |
| Mist gray | #E3EAED | Cards and supporting surfaces | Keeps a slight blue cast while separating one layer from the main background. |
| Pale lemon | #F2E8CD | Small accent | Adds a light warm contrast in badges or small information areas. |
For body text, dark navy-gray #26323A has a contrast ratio of about 12.62:1 on frost white #F8FBFC, about 10.79:1 on mist gray #E3EAED, and about 10.75:1 on pale lemon #F2E8CD. All three exceed the WCAG 2.2 (Web Content Accessibility Guidelines) minimum of 4.5:1 for normal-size text.
Light blue #ADD8E6 should not automatically be used as normal-size text on frost white #F8FBFC, because the contrast ratio is only about 1.47:1. White text #FFFFFF on light blue #ADD8E6 is also only about 1.53:1. If text is placed on a light-blue filled surface, dark navy-gray #26323A reaches about 8.59:1.
For primary links or a CTA (call-to-action button), deep blue-gray #315A70 is a more reliable choice. Its contrast ratio is about 7.14:1 against frost white #F8FBFC, about 6.10:1 against mist gray #E3EAED, and about 6.08:1 against pale lemon #F2E8CD. White text #FFFFFF on deep blue-gray #315A70 has a contrast ratio of about 7.43:1.
Main color:#ADD8E6 / Background:#F8FBFC / Supporting surface:#E3EAED / Action color:#315A70
Use light blue for freshness and deeper blue-gray for interaction
On a service or reservation page, frost white can cover the main background, mist gray can support cards, pale lemon can appear in small information areas, light blue can provide decorative accents and filled areas, dark navy-gray can be used for heading text, and deep blue-gray can be reserved for the primary button. This keeps the interface light without making text and controls equally pale.
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 main 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 light 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.