What Is a Website Color Scale? How to Design Lighter and Darker Shades of the Same Color
When several parts of a website need to use blue, choosing a slightly different blue for every button and card can make the design look inconsistent. A color scale offers a more systematic approach: start with one reference color, prepare lighter and darker versions, and assign each version a specific job. Here is how to build a practical scale, using an online course listing page as an example.
A color scale organizes light and dark steps within one color family
A color scale is a sequence of colors that stay within roughly the same color family while their lightness and saturation change. Instead of finding unrelated colors for backgrounds, selected items, links, primary buttons, and headings, you can choose from a coordinated set. More steps do not automatically mean a better interface.
Begin by choosing one reference color. Prepare a few lighter alternatives and a few darker ones, then arrange them from lightest to darkest. HSL (hue, saturation, and lightness) is one way to think about which property to adjust: hue describes the color family, saturation describes its intensity, and lightness controls the light–dark component of that model. However, equal changes to the HSL lightness value do not necessarily produce equally noticeable visual steps. Compare the actual colors on screen and adjust them as needed.
Give each useful step a role, such as a pale card background, a link color, or a strong button fill. Avoid creating a large palette first and inventing uses for every shade afterward. The number and spacing of steps should follow the content and controls you need.
Five shades of blue for an online course listing
Take #3172A6 as the reference blue. Add two lighter colors and two darker ones. A HEX code is a way of specifying a color with hexadecimal characters. These five examples keep the hue approximately consistent, while leaving more room between the light backgrounds and the darker text and action colors.
| Step | Color and HEX code | Interface role |
|---|---|---|
| Very light blue | #EDF5FC | Background for an information card |
| Light blue | #B8D4EC | Background of a selected category tab |
| Reference blue | #3172A6 | Text links and necessary dividers on white |
| Dark blue | #1C4F78 | Background of an “Enroll” button |
| Deepest blue | #102F4A | Card headings and tab text |
On a white #FFFFFF page, place course cards on a very light blue #EDF5FC surface. The contrast ratio between these two backgrounds is only about 1.10:1, so do not rely on that subtle change alone to communicate an essential boundary. Use sufficient spacing and, where an identifiable border is necessary, add a reference-blue #3172A6 outline. Its contrast ratio against the pale card is approximately 4.66:1.
For a selected category tab, use light blue #B8D4EC behind deepest-blue #102F4A text, producing a text contrast ratio of approximately 8.95:1. Also add an underline or a “Selected” label so that color is not the only indication of state. A course-detail link can use reference blue #3172A6 with an underline; against white #FFFFFF, its text contrast is approximately 5.14:1.
For an “Enroll” button, put white #FFFFFF text on dark blue #1C4F78, giving approximately 8.61:1. A card heading in deepest blue #102F4A on the pale-blue #EDF5FC card has a contrast ratio of approximately 12.48:1. These choices use one color family, but vary the size and purpose of the colored areas to establish a clear hierarchy.
Check the actual combinations and keep only useful steps
A light shade that works well as a large background may fail as a background for white text. For example, white #FFFFFF against light blue #B8D4EC has a contrast ratio of only about 1.54:1, which is not sufficient for normal text. Always test the foreground and the background as a pair rather than judging a color in isolation.
WCAG (Web Content Accessibility Guidelines) 2.2 Level AA requires at least 4.5:1 for normal text and 3:1 for qualifying large text. Essential non-text information, such as some interface boundaries and state indicators, may also need at least 3:1 against adjacent colors. The figures above describe opaque, solid color pairs; they do not establish that an entire page conforms to WCAG.
Review the colors side by side and remove steps that look too similar or have no real purpose. Check the page on mobile as well as desktop. HueRoll lets you enter HEX codes and inspect tint and shade suggestions, as well as contrast against white or black. It does not directly compare two arbitrary colors or automatically certify AA or AAA conformance, so use a separate method to test other adjacent pairs.