How to Choose Color Combinations That Work Together
Color combinations fail less often from a “wrong” hue than from five colors shouting at the same volume. Hue Parcel is built around five swatches because that is enough for a background, a text color, a surface, a secondary, and one accent. This article is about how those roles relate, not about invented research on mood.
Hue relationships
Hue is the position on the wheel. Complementary hues sit opposite. Analogous hues sit nearby. Triadic hues split the circle in three. You can load those relationships from the homepage diagram or generate them in the color palette generator. A relationship is a spacing rule. It does not decide which color should be the largest area on the page.
Example, initial worktable: #23395B and #D98262 are far apart in hue. #406E8E and #8EA8C3 sit closer. #F1E9DA is a low-saturation light value that can carry the others. If you generate Analogous from the navy, the terracotta may disappear. That is the relationship doing its job.
Saturation
Saturation is how far a color sits from gray. Five high-saturation swatches compete. A practical five-color set often has one or two stronger notes and several quieter ones. Coastal Blue on the palettes page keeps the sand accent #C4A574 below the intensity of the water blues. Bright Modern does the opposite on purpose: #FF3B30 and #F5C400 are loud because the field is near-black and paper.
If a generated palette feels noisy, lock the quietest swatch and regenerate, or edit saturation down by picking a lighter, grayer HEX. You do not need a slider named “harmony” to do that. You need one color that can recede.
Lightness
Lightness is what contrast actually cares about. Two hues can be complementary and still fail as text if both sit in the middle of the range. Navy on cream usually reads. Mid blue on steel blue often does not. Check the pair in the contrast checker instead of assuming a wheel relationship saved you.
Monochromatic mode on this site varies lightness on purpose so five stripes from one hue do not become a single block. That is also how you build a UI gray-blue scale: keep hue, move L.
Visual hierarchy and accents
Hierarchy is area and job. Background should be the largest quiet surface. Primary text should be the most readable dark or light against that surface. Accent is small: links, rules, a poster block. Secondary accent can support charts or labels without matching the accent’s saturation. Surface is a panel that sits between background and text.
The homepage mockups assign those five roles from the live palette. They will look wrong if you put the loudest HEX behind a paragraph. That is useful information. Swap roles, or swap the pair in the laboratory, before you export CSS.
Common mistakes
Using five accents and no field. Copying a palette that worked on a photograph and dropping it onto 16px text. Treating HEX as accessible because it came from a generator. Forgetting that lock exists and regenerating a color you had already decided to keep. Loading a pastel collection and then setting body text in the lightest chip.
A second five-color example, Forest and Stone: #2C3D2F, #5A7A5C, #A8B5A0, #E5E1D8, #7A7368. The cream is the paper. The darkest green is a candidate for type. The gray-green is a surface. The stone is a mute. None of those jobs are labeled in the HEX itself. You assign them.
Midnight Contrast is the other extreme: #0D1117, #1A2332, #E8E4DC, #C9A227, #8B1E3F. Almost all of the area can be the near-black field. Paper, gold, and wine are marks. If you invert that and paint a whole slide gold, the combination stops working even though the HEX list did not change. Combinations are roles plus values.
Soft Pastels is a third pattern: #F4C8D1, #C5D5E8, #E8D5C4, #D4E8C8, #F2E8F0. Every chip is light. That can work for a wash or a wedding suite. It does not give you a default text color. You would add ink from outside the strip, or darken one swatch by hand, then re-check contrast. A combination can be coherent and still incomplete for type.
When a combination still feels stuck, start from one color you already have—brand navy, a product photo, a paper stock—using Start With One Color. Build complementary or analogous around it, then strip saturation until only one swatch leads. Combinations “work together” when most of the pixels are quiet and a few are not.