How to Use Cool Colors on a Website | Color Schemes with Blue, Light Blue, and Blue-Green

Using cool colors such as blue, light blue, and blue-green on a website lets you keep the hues relatively close while still creating small changes for different roles. However, if every color is used at the same intensity, headings, backgrounds, and buttons can start to look equally important. Here, we use blue ■#2563EB, light blue ■#0EA5E9, and blue-green ■#0F766E to build a cool-color palette with a clear information hierarchy.

Assign roles before choosing among cool hues

Start by giving each color a purpose. For example, use blue ■#2563EB as the main brand color, light blue ■#0EA5E9 as a decorative supporting color without text, and blue-green ■#0F766E for a different group of controls or information labels. Because the hues are related, you do not need to give all three equal visual area.

For large surfaces, use low-saturation backgrounds such as pale blue ■#F0F7FF or pale cyan ■#ECFEFF, and keep body text fixed at charcoal ■#1F2937. The contrast ratio, a numerical measure of the relative lightness difference between foreground and background, is about 13.60:1 against pale blue and about 14.11:1 against pale cyan.

On a service page, use blue for the primary action, light blue for support, and blue-green for grouping

For a service page, the primary CTA (Call to Action, the main button that leads to an inquiry or sign-up) can use deep blue ■#1D4ED8 with white text ■#FFFFFF. That combination has a contrast ratio of about 6.70:1. Use darker light blue ■#0369A1 for supporting headings or meaningful small icons. Its contrast ratio is about 5.50:1 against pale blue ■#F0F7FF and about 5.70:1 against pale cyan ■#ECFEFF. Blue-green ■#0F766E can identify a separate pricing or feature group.

White text ■#FFFFFF on blue-green ■#0F766E has a contrast ratio of about 5.47:1, which is sufficient for normal-size button text. By contrast, white text ■#FFFFFF on light blue ■#0EA5E9 is only about 2.77:1. If light blue is used as a button background, use a darker text color or otherwise adjust the combination. Keep the brighter light blue ■#0EA5E9 for decorative surfaces or shapes rather than text or meaningful icons.

Even with only cool colors, create hierarchy through lightness and area

A cool-color palette can still lose hierarchy if it relies only on small hue differences. Use pale colors for large backgrounds, dark colors for body text, and the darkest cool color for the primary button. For distinctions such as selected versus unselected, link versus body text, or normal versus error states, do not rely on color alone; add underlines, heavier weight, borders, icons, or labels.

WCAG (Web Content Accessibility Guidelines) requires at least a 4.5:1 contrast ratio for normal-size text. Related cool colors can work well together, but text and background pairs that are too close in lightness may still fail that requirement, so check the actual adjacent colors.

HueRoll can show complementary colors, analogous colors, and other palette suggestions, and it displays the selected color’s contrast against white and black. It does not compare two arbitrary custom colors or automatically report WCAG AA or AAA conformance, so check the actual body-text, button, and label color pairs separately.