Color · Clothing
What colour goes with it?
Pick a garment and its colour. Get the colours that go with it, ranked, on an outfit mock-up, with a note on how far apart the two pieces are in lightness. Runs in your browser; nothing is sent or stored.
Short answer for grey pants: white, black, navy, charcoal and cream are the safest shirts, and burgundy, purple or forest green add colour without fighting the grey. Neutrals go with nearly everything; the matcher below shows why each colour ranks where it does. These are fashion conventions, not rules.
Your garment
Matching colours
Tap a colour to preview it on the mock-up. Swatches are representative shades; real fabric, texture and lighting shift them. Guidance only.
How the matching works
1. Neutral or colour. Each of the 24 colours is marked neutral (white, cream, light grey, grey, charcoal, black, navy, denim, beige, tan, khaki, brown) or chromatic (the other 12). That split is fashion convention, not a measurement: neutrals are the colours style guides treat as anchors for any outfit.
2. Hue geometry. For two chromatic colours we convert each swatch from sRGB to CIE L*a*b* (D65) and take the hue angle h = atan2(b*, a*), as in the CIE LCh model defined in CSS Color Level 4. The angle between the two hues decides the rule: analogous up to 45° apart (+2), triad 100° to 140° (+2, around the 120° triad spacing), complementary 150° or more (+3, near the 180° opposite), and anything else has no hue rule (0). The 45°, 100° to 140° and 150° cut-offs are this tool's own choices.
3. Scores for neutrals. A neutral next to a chromatic colour scores +3 (anchor); neutral next to neutral +3; a chromatic colour next to a neutral base +2.
4. Lightness contrast. We compare L* of the two swatches. Under 12 points apart the pair is too close and loses 3; 25 or more gains 1. We also show the WCAG 2.2 contrast ratio, ratio = (L1 + 0.05) / (L2 + 0.05) from relative luminance L = 0.2126·R + 0.7152·G + 0.0722·B on linearised sRGB, only as a lightness-difference number, not an accessibility claim. One pair, black with brown, is held down by convention (-3).
5. Tiers. Score 4 or more is Great, 2 to 3 is Good, 1 or below is Weak.
Sources. W3C, CSS Color Module Level 4, Lab and LCh; named colours (navy, olive, khaki, beige, tan, teal and others share their names with CSS colours, but our swatches are more muted, typical fabric shades); WCAG 2.2 contrast ratio. Hue-wheel rules are colour theory; which pairings look good on clothes is convention, and tastes differ.
Limits. One swatch per colour name. Patterns, fabric texture, shoes and accessories, skin tone, dress codes and personal style are not modelled.
FAQ
What color shirt goes with grey pants?
White, black, navy, charcoal and cream rank highest because neutrals anchor grey and give a clear light or dark split. For colour, burgundy, purple, forest green and blush pink score well. Tan and khaki rank weak against grey because they sit too close to it in lightness.
What colors go with navy?
White, cream, beige, tan, khaki and grey lead, since they contrast strongly with navy. Blush pink, lavender, light blue, sage, mustard and rust are the colourful options that score Good. Black is weaker because the two are both very dark.
What goes with olive or khaki?
Olive pairs with white, cream, beige, navy and black. Khaki works with navy, black, charcoal, white and brown; for colour, burgundy and purple lead for khaki.
Can I wear black with brown?
Many style guides say no, so the tool marks the pair as weak. It is a convention; deep dark browns with black are worn on purpose, but the two are close in lightness and tend to look accidental.
What does complementary or triad mean here?
Complementary colours sit roughly opposite each other on the hue circle, 150° or more apart; triad colours sit about a third of the circle apart. Analogous colours are neighbours. The angles are measured in CIE LCh, not on a paint colour wheel, so a few pairs differ from the red/yellow/blue wheel.
Is this a rule I have to follow?
No. Hue geometry is real colour theory, but which colours look good on clothing is convention and varies by culture and taste. Use the ranking as a starting point.