What Goes With This Color
Get a ready-made combination of colors that pair well with your base color, built from real complementary and analogous hue math — the same relationships that drive our per-color combination pages.
Colors that go with this one
Built from this color's analogous, complementary, and split-complementary neighbors — a fast starting palette, not a replacement for the fuller Color Harmonies breakdown.
How it works
This tool generates the same five-color set shown on each named color's /combinations/ page — a complementary color at 180°, two analogous neighbors at ±30°, and two triadic partners at 120°/240° — but lets you run the calculation on any arbitrary hex value, not just the 148 named CSS/X11 colors that have a dedicated combinations page. The underlying math is identical hue rotation in HSL space at constant saturation and lightness, just exposed as a standalone tool for colors outside the named set. Running the calculation on-demand rather than only serving pre-computed static pages also means this tool can respond instantly to a color you've just picked, extracted from a photo, or typed in from a client brief — there's no lookup step or dataset match required, since the hue-rotation formula works identically on any valid hex value the moment you enter it.
Worked example
Enter a custom brand hex, say #2D6A4F (a deep forest green): the complementary lands near #6A2D5C (a muted plum), analogous neighbors at roughly #2D6A24 and #2D6A78 (a more yellow-green and a more teal-green), and triadic partners near #6A4F2D and #4F2D6A (an amber-brown and a violet) — a full five-color set derived from one brand hex without needing to look up a pre-built page. Try a much lighter, pastel input instead — #C9E4DE (a soft mint) — and the same rotation math produces gentler results across the board: complementary near #E4C9CF (a dusty rose), analogous partners around #C9E4C4 and #C9DEE4 (a pale sage and a pale sky), and triadic partners near #DEC9E4 and #E4CFC9 (a soft lavender and a soft peach) — proof that the exact same offsets scale down gracefully to pastel intensity rather than only working well on fully saturated brand colors.
When to use this tool
Use this over the static per-color /combinations/ pages specifically when your base color isn't one of the 148 named CSS/X11 colors — a custom brand hex, an extracted image color, or a client-supplied value that doesn't map to any standard name. It's also genuinely useful mid-design-process, when you're iterating on a brand color and want to immediately see downstream pairing suggestions update as you nudge the base hue slightly, rather than finalizing a color first and only checking pairings afterward as a separate step. If your base color IS one of the named CSS/X11 colors, the dedicated /combinations/[color]/ page for it loads faster and is directly linkable/bookmarkable.
Precision & accuracy
The math here is identical, value for value, to what generates the static /combinations/ pages — same hue-rotation offsets, same floating-point precision before final rounding — so a custom hex you enter here that happens to exactly match a named CSS color will produce identical results to that color's dedicated combinations page. Because the rotation is purely hue-based and inherits your exact input saturation and lightness unchanged, an unusually low-saturation or extreme-lightness base color will produce five colors that stay just as low-saturation or extreme as the input — the tool doesn't attempt to 'improve' or rebalance intensity on your behalf, which is a deliberate choice to keep the output predictable and traceable back to your exact starting value rather than introducing a hidden adjustment step.
FAQ
How is 'goes with' determined?
By hue-wheel relationships (complementary, analogous, and triadic) rather than a fixed lookup table — the same computed math used on the site's 148 static /combinations/ pages, applied here to any color you enter.
Does this work for colors outside the named CSS/X11 set?
Yes — that's the main reason this tool exists separately from the static combination pages, which only cover the 148 CSS/X11 named colors; this tool runs the same math on any hex value.
Why don't the results always look 'matching' to my eye?
Hue-wheel math guarantees mathematically even spacing, not guaranteed visual harmony — very saturated or very dark/light base colors can produce combinations that are technically correct by hue-angle but need a saturation or lightness adjustment to look balanced in an actual design.
How many colors does this generate?
Five: your base color's complementary, two analogous neighbors, and two triadic partners — the same set structure as the static per-color combination pages.
Does a pastel or low-saturation base color still produce useful results?
Yes — the rotation offsets apply the same way regardless of starting saturation, so a pastel input produces five gently related pastel outputs rather than the tool artificially boosting intensity partway through the calculation.
Can I use this to check pairings for a client-supplied Pantone or brand color?
Yes, as long as you convert the Pantone reference to its closest hex equivalent first (Pantone itself is a proprietary spot-color system, not directly hex-addressable) — once you have a hex value, the tool runs identically regardless of where that hex originally came from.