How to Find Complementary Colors from a HEX Color: How to Use Them in Web Design
Suppose a pottery studio website already uses reddish brown #A44B35. How can you find a different color for its booking button without choosing one at random? Starting with a HEX code, you can look for its complementary color—the hue located opposite it on a color wheel. This guide explains how to find that candidate and then give the original color, its complement, and adjusted shades distinct roles in a practical webpage.
Enter a HEX code and find the opposite hue on a color wheel
HEX (hexadecimal) expresses a web color through the red, green, and blue components written in base 16. A color wheel arranges hue families, such as red and blue, around a circle. Complementary colors are positioned opposite each other on that wheel. In HSL, which describes Hue (color family), Saturation (vividness), and Lightness (how light or dark a color is), moving the hue by 180 degrees finds the opposite position.
- First select any swatch in HueRoll’s 256 Color Palette to open the details panel. Then enter the starting reddish brown#A44B35 in HueRoll’s “HEX Color” input field, then apply the value.
- Check the swatch and code in the “Complementary” section. HueRoll calculates its candidate by rotating HSL hue by 180 degrees while keeping saturation and lightness unchanged.
- Use the candidate’s “Copy” control if you only need its HEX code. Choosing the swatch itself instead makes that candidate the currently selected color.
Our starting reddish brown #A44B35 has a hue of approximately 12 degrees. The opposite hue is about 192 degrees, producing blue-green #358EA4. These are six-digit HEX values obtained from the HSL calculation, with values rounded to whole color-channel numbers. This is a hue-based method—not simply a matter of reversing or inverting each red, green, and blue channel.
Assign the colors to a pottery workshop booking page
Imagine a page displaying photographs of finished pottery, workshop dates, pricing, and a booking form. Retain the original reddish brown #A44B35 for headings. Use its complementary blue-green #358EA4 only for a short decorative line beside the date. Give most of the page a warm cream background #FFF9F2, place information on white cards #FFFFFF, and use dark blue-gray #263542 for longer text.
| Page element | Color and HEX code | Reason for choosing it |
|---|---|---|
| Page background | Warm cream #FFF9F2 | Provides a light setting for photographs and information cards |
| Information card background | White #FFFFFF | Creates a surface for dates and prices |
| Headings | Reddish brown #A44B35 | Preserves the website’s original base color |
| Body text and notes | Dark blue-gray #263542 | Provides a dark color for detailed text |
| Decorative line beside the date | Complementary blue-green #358EA4 | Adds a contrasting hue in a small area |
| “Book a workshop” button | Deep blue-green #256474 | Darkens the complementary direction for an action button |
| Button label | White #FFFFFF | Pairs with the darker button background |
| Card border | Warm gray #786F65 | Separates a white card from its surroundings |
The key is not to put the unadjusted complementary blue-green #358EA4 directly behind button text just because the hues contrast. Depending on the intended role, its lightness may need adjusting. Deepening the blue-green to #256474 for the booking button distinguishes the action from the reddish brown headings #A44B35. Keep large areas neutral instead of covering the page with two competing, highly contrasting hues.
Complementary colors do not automatically provide readable contrast
On the white card #FFFFFF, the reddish brown heading #A44B35 has a contrast ratio of approximately 5.78:1, while the dark blue-gray body text #263542 reaches about 12.57:1. White button text #FFFFFF against deep blue-green #256474 reaches about 6.66:1. The Web Content Accessibility Guidelines (WCAG) 2.2 generally require at least 4.5:1 for normal-sized text and at least 3:1 for large text.
By comparison, the original complementary blue-green #358EA4 against white #FFFFFF reaches only about 3.78:1. Putting normal-sized white text on that unadjusted blue-green would not meet the 4.5:1 requirement. The reddish brown #A44B35 and its complementary blue-green #358EA4 also contrast with each other at only about 1.53:1. A 180-degree hue difference does not guarantee a sufficient difference in brightness for text.
The dark booking button #256474 has a contrast ratio of about 6.37:1 against the surrounding cream #FFF9F2. The warm gray border #786F65 contrasts with the white card #FFFFFF at about 4.93:1 and with the cream page background #FFF9F2 at about 4.71:1. Where a border or control boundary is essential, also check it against its adjacent colors. HueRoll compares a selected color only with white or black; it cannot automatically compare arbitrary color pairs or assign WCAG AA/AAA results. The pairwise ratios in this example were calculated separately.