How to Match Color Saturation in Web Design | Tips for Creating a Cohesive Color Scheme
When a website uses several colors—such as blue, orange, and green—one may look much more vivid than the others. Instead of reducing the entire design to a single color, you can bring the saturation of colors serving the same purpose closer together. This preserves distinct hues while making the interface more consistent. Here is a practical way to do that for an online course catalog, including how to check text and button contrast afterwards.
Compare saturation in HSL for colors that serve the same purpose
Saturation describes how vivid a color is. HSL is a way of describing a color through hue (the color family, such as blue or green), saturation, and lightness (how light or dark it is). Imagine course-category labels using blue at a hue of 210 degrees, 90% saturation, and 33% lightness; orange at 15 degrees, 20% saturation, and 33% lightness; and green at 150 degrees, 78% saturation, and 33% lightness. Their saturation settings differ considerably.
In HEX, the hexadecimal notation used to specify colors on the web, these starting colors are vivid blue #0854A0, subdued orange #654C43, and green #139654. As a first adjustment, leave each hue and lightness unchanged and set all three saturation values to 46%. The new colors are blue #2D547B, reddish orange #7B412D, and green #2D7B54. Individual channel values are rounded when converting the HSL values into six-digit HEX codes.
The key is to apply this common saturation to comparable elements, such as category labels, rather than enforcing it on everything. White and gray backgrounds, ordinary text, and important action buttons do not need the same saturation. Also, equal HSL saturation values do not guarantee that different hues will look equally vivid or equally bright to the human eye. Treat the number as a starting point and compare the colors together on the actual page.
Example palette for an online course catalog
Imagine course cards for design, business, and programming. Each category label uses the same HSL saturation of 46% and lightness of 33%. Reading surfaces, supporting details, and the enrollment action have their own contrast requirements.
- Page background and body text: Use pale blue-gray #F7F8FA for the broad background and charcoal #26323A for body text. Their contrast ratio is approximately 12.35:1.
- “Programming” label: Put white #FFFFFF lettering on blue #2D547B. The text-to-label contrast ratio is about 7.88:1.
- “Business” label: Use white #FFFFFF text on reddish orange #7B412D. The ratio is about 7.97:1.
- “Design” label: Use white #FFFFFF lettering on green #2D7B54. The ratio is about 5.16:1.
- Course cards: Put titles, prices, and other information in charcoal #26323A on white #FFFFFF, providing approximately 13.13:1 contrast. However, the white card surface #FFFFFF differs from the pale page background #F7F8FA by only about 1.06:1. Add a muted blue-gray #75818C outline, which contrasts about 3.98:1 with white #FFFFFF.
- Enrollment conditions panel: Use light gray #E8EEF0 with charcoal #26323A text for about 11.20:1. A muted blue-gray #75818C border has approximately 3.40:1 contrast with that panel background #E8EEF0.
- “Enroll in course” button: Use a common charcoal #26323A background with white #FFFFFF lettering rather than a different category color on every course. Text-to-button contrast is about 13.13:1, and the button contrasts about 12.35:1 with the surrounding pale page background #F7F8FA.
The category hues remain distinct while sharing the same numeric saturation and lightness. Meanwhile, enrollment buttons use a consistent dark neutral so that the primary action looks and behaves similarly on every course card, regardless of its category.
After aligning saturation, check appearance and accessibility separately
Do not mechanically change every existing brand or warning color. First identify which colors share a role, then decide whether bringing their saturation values closer is helpful. HSL is not perceptually uniform: different hues can feel stronger or lighter even with matching HSL values. Compare them on actual cards and adjust lightness or the amount of colored surface if needed.
Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, normal-size text generally needs at least a 4.5:1 contrast ratio against its background, while large text needs at least 3:1. Essential non-text visual information, such as boundaries required to identify form fields and controls, generally needs at least 3:1 against adjacent colors. Include the category name in each label rather than communicating it through color alone, and check small labels and card boundaries on mobile screens.
HueRoll can show HSL values when you select a color using HEX, but it does not accept direct HSL input. It also cannot compare arbitrary pairs of custom colors or automatically determine WCAG AA or AAA compliance. Calculate contrast for the actual adjacent colors separately before finalizing the design.