How to Use a Square Color Scheme in Web Design | Tips for Organizing Four Colors
A square color scheme combines four hues placed at 90-degree intervals around the color wheel. It offers variety, but spreading all four colors across large areas can make headings, cards, and buttons compete for attention. This article explains how to give the colors distinct roles so that a website remains organized and easy to use.
A square palette does not require equal areas of all four colors
A color wheel arranges hues—the different kinds of color, such as red, yellow, and blue—in a circle. A square scheme takes four positions that divide the wheel into quarters. For example, choosing hue angles of 20, 110, 200, and 290 degrees in HSL (a color notation based on hue, saturation, and lightness) produces a set of reddish orange #773E22, green #307722, blue #225B77, and purple #692277. HEX codes specify colors on the web using hexadecimal numbers. This example uses the same saturation and lightness for all four source colors; converting them to six-digit HEX introduces minor rounding.
The important point is that the design does not need to allocate one quarter of the page to each color. Blue could act as the main website color, with orange, green, and purple reserved for smaller category labels. White and gray can still form the foundation for body text and cards. The four hues define a set of color relationships, not rules for how much space each one must cover.
And even though the hues are evenly spaced, their relationship does not guarantee readable text. Contrast between the foreground and background, as well as the placement of each color, needs to be checked separately.
Example palette for a science museum’s weekend workshop page
Imagine a website listing four kinds of weekend workshops: crafts, nature observation, science experiments, and space activities. The four square-scheme colors identify categories, while a single consistent color marks the registration action.
- Overall page: Use an almost-white background #F7F7F5 with deep gray #27333B body text. Text-to-background contrast is about 12.06:1.
- Header and introductory registration information: Place white #FFFFFF lettering on blue #225B77. The contrast ratio is approximately 7.42:1. Blue serves as the dominant color that can cover a larger area.
- “Crafts” category label: Use reddish orange #773E22 behind white #FFFFFF lettering. Their contrast ratio is about 8.41:1.
- “Nature observation” category label: Use green #307722 with white #FFFFFF lettering. The ratio is approximately 5.54:1.
- “Science experiments” category label: Use blue #225B77 with white #FFFFFF lettering. The ratio is about 7.42:1.
- “Space activities” category label: Use purple #692277 with white #FFFFFF lettering. The ratio is about 10.02:1.
- Workshop cards: Place workshop names and dates in deep gray #27333B on white #FFFFFF for about 12.94:1 text contrast. However, white cards #FFFFFF and the almost-white page background #F7F7F5 differ by only about 1.07:1. Give the cards visible gray #748087 borders and spacing; the borders contrast by about 4.05:1 against white #FFFFFF.
- What-to-bring panel: Show instructions in deep gray #27333B on pale gray #ECEFEB, with a contrast ratio of about 11.16:1. A gray #748087 border contrasts about 3.50:1 with the pale gray panel background #ECEFEB.
- “Continue to registration” button: Use blue #225B77 as the button background with white #FFFFFF lettering. Text contrast is about 7.42:1, while the button differs from its almost-white surroundings #F7F7F5 by about 6.92:1. This treatment belongs in the light content area: a button identical to the blue header background would lose its visible boundary there.
Each colored category label should also contain its category name. Do not expect visitors to identify “Crafts” or “Space activities” from color alone. The blue header, four small labeled accents, and lightly styled workshop cards each serve a different purpose.
Adjust a four-color design without sacrificing readability
When the page looks too colorful, check the area covered by each hue before removing colors. Rather than filling entire cards with the four category colors, keep card surfaces consistent and limit the hues to their labels. If you reduce saturation (how vivid a color is) or change lightness, recalculate contrast even when the four hue angles remain in the square relationship.
Under WCAG 2.2 (Web Content Accessibility Guidelines) Level AA, normal-sized text generally needs a contrast ratio of at least 4.5:1 against its background, and large text at least 3:1. Essential non-text information, such as borders needed to identify interactive controls, generally needs at least 3:1 against adjacent colors. Make category labels and availability states understandable through words, not color alone.
On phones, check the spacing between the four category labels and the visibility of dates and registration buttons. HueRoll can show color-scheme suggestions, but its contrast check only compares the selected color with white or black. It does not directly compare arbitrary pairs of custom colors or automatically assess WCAG AA or AAA conformance. The custom-pair ratios above were calculated separately.