Color & style
Color Combinations for Clothes: A Practical Guide to Outfits
Color combinations for clothes made simple: the color wheel, neutral pairings, tonal, analogous and complementary outfits, proportions and 20 combinations.
The AtelierNo. 04
Outfit Color Matcher
Choose one garment color and see which colors go with it, and why.
Base garment color
Neutrals
White#FFFFFF
Ivory#F4EFE2
Ecru#E4DBC5
Beige#D6C2A2
Sand#C8B28C
Camel#B5864F
Chocolate brown#4B2F22
Taupe#8A7C70
Light grey#CFCFCF
Mid grey#8F8F8F
Charcoal#3B3C40
Black#151515
Navy#1F2A44
Denim blue#4A6A8A
Colors
Cognac#8B5A2B
Light blue#A9C4DE
Cobalt blue#1F4FA8
Petrol#1E5160
Teal#2A7A7F
Sage green#9FB08C
Olive#6B6A3A
Khaki#A39A6B
Forest green#2F4D3E
Emerald#1D7A55
Mint#B8DCC6
Burgundy#6D1F2F
Red#B8232C
Coral#EE8670
Rust#A4471E
Terracotta#C4673F
Orange#E07A1F
Mustard#CF9F2E
Lemon yellow#F1D24F
Blush pink#ECC6C2
Dusty rose#C79BA0
Fuchsia#C2185B
Mauve#9C7B87
Lavender#B9AAD4
Plum#5E2750
Purple#6A3D8F
Six digits, e.g. 1F2A44 for navy.
BaseNavy #1F2A44
Color pairings
Complementary
Opposite on the color wheel: the highest contrast. Wear the partner in a small dose — a scarf, a bag, a knit — rather than head to toe.
- Navy#1F2A44Base
- Camel#A88D4D
Analogous
Neighbors on the color wheel: calm and harmonious. Vary lightness and texture so the outfit does not look flat.
- Navy#1F2A44Base
- Denim blue#4D96A8
- Purple#5F4DA8
Split complementary
The two colors beside the complement: lively but easier to balance than a direct complement.
- Navy#1F2A44Base
- Terracotta#A85F4D
- Khaki#96A84D
Monochrome
Lighter and darker versions of the base. Tonal dressing looks considered; mix fabrics for depth.
- Navy#1F2A44Base
- Denim blue#4F6BADLighter
- Lavender#94A5CELighter
Neutral partners
Neutrals that sit well with this base. The easiest everyday choice for trousers, coats and shoes.
- Navy#1F2A44Base
- White#FFFFFF
- Light grey#CFCFCF
- Beige#D6C2A2
- Black#151515
Colors on screen vary by display and lighting; real fabrics also change with texture and sheen. Treat the pairings as a starting point.
Runs entirely in your browser. No data is sent to a server.
How it works
- Pick the color of the piece you want to style from the list, or choose any color with the color picker.
- Browse five pairing types: complementary, analogous, split complementary, monochrome and neutrals.
- Every swatch shows a color name and hex code, so you do not have to judge by color alone.
- Use the 60-30-10 preview to plan proportions: main piece, second piece and a small accent.
FAQ
What colors go with everything in an outfit?
Neutrals such as navy, charcoal, white, ivory, beige, camel and black combine with almost any color. Building most of a wardrobe from two or three of them makes outfits easier.
What is the 60-30-10 rule in fashion?
It is a proportion guideline borrowed from interior design: about 60% of the outfit in a main color, 30% in a second color and 10% in an accent. It is a starting point, not a strict rule.
Do complementary colors look good together in clothes?
They can, but they create strong contrast. Outfits usually look more refined when one complementary color is muted or used only as a small accent.
How accurate are the colors on screen?
Screens and lighting change how colors appear, and fabrics add texture and sheen. Use the swatches and names as guidance and check real garments in daylight.