How to Find Similar Colors from a Color Code: How to Create a Web Color Scheme

Suppose an existing website uses blue ■#2B6582 for its main button, and you have been given only that HEX code. How can you find a background or heading color that feels related without changing the existing button? Rather than changing random digits in the code, look separately for nearby hues and for lighter or darker variations. This guide starts with one existing color and uses it to design an additional card for a frequently asked questions (FAQ) page.

Start with the HEX code, then compare nearby hues and lighter or darker colors

HEX (hexadecimal) is a way of writing web colors using base-16 values for their red, green, and blue components. Begin with the existing blue ■#2B6582. In HueRoll, enter its six-digit code in the “HEX Color” field to see its HSL values and related-color candidates, including analogous colors, tints, and shades. HSL stands for Hue (the color family), Saturation (vividness), and Lightness (how light or dark it is). Codes that look numerically similar do not necessarily look similar to the eye, so compare the actual color samples.

Analogous colors are colors located near the starting color on a color wheel, which arranges color families around a circle. The starting blue ■#2B6582 has an HSL hue of approximately 200 degrees. With roughly the same saturation and lightness, moving about 15 degrees in either direction gives a blue-green alternative ■#2B7B82 and a blue-violet alternative ■#2B4F82. HueRoll displays analogous candidates at offsets including 15 degrees. The HEX codes shown here are adjusted illustrative examples and may not exactly match the tool’s generated candidates after rounding.

If you need related colors with different brightness instead, try a tint (a color lightened as though white had been added) or a shade (a color darkened as though black had been added). A pale blue-gray ■#CAD8E0 can be a background candidate, while a deep blue ■#225168 can be a heading candidate. Adjusting hue and adjusting lightness solve different problems; keep only the variations needed for a particular role.

Use the candidates for a new FAQ card without changing the original button

Imagine adding a question-and-answer card near the site’s existing “Contact us” button in blue ■#2B6582. Keep the surrounding page white ■#FFFFFF and give the new card a pale blue-gray tint ■#CAD8E0. Set question headings in the deep blue shade ■#225168, answer text in dark blue-gray ■#20313F, and the card border in muted blue-gray ■#597487. Preserve the original blue ■#2B6582 for the action button, with white ■#FFFFFF text.

The analogous blue-green ■#2B7B82 and blue-violet ■#2B4F82 are not automatically added to the body text or the button. They are candidates to compare for a small, nonessential decorative detail. Select only one if it improves the page. Finding several similar colors does not mean they all need to appear in the finished design.

Similar-looking colors still need separate contrast checks

The deep blue heading ■#225168 against the pale card ■#CAD8E0 has a contrast ratio of approximately 5.89:1, while the dark answer text ■#20313F against the same background reaches approximately 9.16:1. White button text ■#FFFFFF against the original blue ■#2B6582 reaches about 6.39:1. These combinations exceed the 4.5:1 threshold generally required for normal-sized text under the Web Content Accessibility Guidelines (WCAG) 2.2. The blue button background ■#2B6582 also contrasts with the pale card ■#CAD8E0 at about 4.38:1.

However, the alternative blue-green ■#2B7B82 contrasts with white ■#FFFFFF at about 4.93:1 but reaches only 3.38:1 against the pale card ■#CAD8E0. It would therefore not meet the normal-text threshold on that card. The border ■#597487 contrasts with the card ■#CAD8E0 at about 3.37:1 and with the white page ■#FFFFFF at about 4.92:1. A non-text boundary needed to identify or operate an interface generally needs at least 3:1 contrast against adjacent colors; check it again whenever the surface changes.

In HueRoll, selecting a color sample changes the current color, while pressing a candidate’s copy control obtains its code without changing the selection. You can also save candidates to My Palette. HueRoll’s contrast comparison is limited to the selected color against white or black: it does not automatically compare any two colors or assign WCAG AA/AAA results. The contrast ratios against the pale card in this example were calculated separately. Keep your original HEX code, compare nearby hues and tints or shades, then verify text, controls, and boundaries in the finished page.