Complementary Color Finder
Enter a base color
Supports #RGB, #RRGGBB, integer rgb(), and percentage hsl(). Calculations stay in this browser; funnel URLs include the color value, which is sent with page requests.
Complementary colours sit opposite each other on a digital colour wheel. Enter a strict HEX, RGB or HSL value to calculate its HSL complement, split-complementary colours, tetradic companions and exact WCAG contrast ratios. Everything is calculated locally in your browser.
How the complement is calculated
-
1
Enter a colour value
Use #RGB, #RRGGBB, integer rgb() or percentage hsl(). The finder validates the complete value before calculating.
-
2
Rotate hue by 180°
HSL complement: add 180° to the hue, keep saturation and lightness the same.
-
3
Split-complement derived
Two colours at 150° and 210° from the base: a softer alternative to direct complement when contrast is too high.
-
4
Accessibility hints appear
Contrast ratio of the pair against white and black, plus a warning if the pair is likely to fail WCAG AA when used as fg/bg.
Examples
| Base colour | Hex | Complement (HSL) | Hex |
|---|---|---|---|
| Pure red | #FF0000 | Cyan | #00FFFF |
| Coral | #FF7F50 | Aqua teal | #50D0FF |
| Forest green | #228B22 | Purple | #8B228B |
| Royal blue | #4169E1 | Gold-orange | #E1B941 |
| Lavender | #E6E6FA | Pale yellow | #FAFAE6 |
The displayed HEX, RGB and HSL values describe the same sRGB colour. Copy a result when you need a value for CSS or another design tool.
HSL complement vs RYB complement
- HSL (screen): red ↔ cyan, green ↔ magenta, blue ↔ yellow. This is the geometry of the sRGB-derived HSL hue angle used by CSS, not a simulation of mixing light.
- RYB (artist): red ↔ green, blue ↔ orange, yellow ↔ purple. This is a traditional teaching convention, not a prediction of how particular pigments will mix.
This finder deliberately uses the digital HSL model. It does not offer an RYB paint-wheel conversion, because pigment complements depend on the physical paints and mixing conditions.
Where complements work well
- CTA buttons against brand backgrounds. Pair primary with its complement to make the button pop.
- Data viz dual-series charts (profit vs loss, before vs after).
- Illustration shadows: an orange pumpkin’s shadow looks more convincing in blue than in a darker orange.
- Sports branding: many teams use complementary or split-complement palettes (blue/orange, red/green, yellow/purple).
Where they fail
- Body text on background: direct complements (red on green, blue on orange) are uncomfortable to read. High chromatic aberration causes visual fatigue.
- Full-surface use: a screen that’s 50% red and 50% green is exhausting. Use complement for accents (5-10% of surface area), not main.
- Brand coherence: complements feel busy. Most modern brands use monochromatic or analogous + one accent, not dual complement.
Split-complement
The split-complement (base + 150° + 210°) is often a better practical choice:
- Retains high contrast with the complement region.
- Avoids the direct-complement vibration.
- Provides two accents for layered design.
Example: base = blue → complement = orange (harsh) → split-complement = red-orange + yellow-orange (richer).
Desaturating complements
Pure complements rarely look good at full saturation. Reduce saturation by 20-40% on one or both for a calmer palette:
- Red (S=100%) + Cyan (S=100%) = vibrating.
- Red (S=60%) + Cyan (S=60%) = classic poster palette.
- Brand-brick (S=45%) + Dusty teal (S=30%) = modern, usable.
Sanity check before using
- Contrast ratio of pair: the finder reports this. Below 4.5:1 fails AA for text.
- Test on neutral background: complements look different against white, grey, black.
- Print test if that’s the destination, CMYK can shift saturation and complement relationships versus RGB.
Frequently Asked Questions
They arrange hue by different conventions. HSL uses a numerical angle derived from sRGB, while the traditional RYB wheel places familiar artist’s primaries around a conceptual circle. Neither wheel predicts the result of mixing physical lights or paints.
Yes, they’re synonymous in colour theory. “Opposite on the colour wheel” and “complementary” refer to the same relationship.
Rarely. Direct complements usually fail WCAG contrast when used as fg/bg because they have similar lightness. Increase the lightness difference (dark text on light background) to pass.
Yes, the result panel includes direct complement, split-complement (two colours flanking) and tetradic quadruple. Choose whichever suits your design goal.
Related Tools
HEX Color Picker
Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.
Color Palette Generator
Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.
FPS Counter
Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.
Phone Validator
Validate phone numbers by country, detect the region and type, and normalize valid numbers to E.164, international, national and RFC 3966 formats.
BBCode to HTML Converter
Convert BBCode (bulletin-board markup) to clean HTML. Handles formatting tags, lists, quotes, code, images, links and tables.
Random Color Palette Generator
Generate random color palettes from 2 to 15 swatches, choose a vibrant, pastel, muted or dark style, then copy HEX codes or CSS variables.