quick decision
Start with the role, then test the surface
Choose a color-combination structure before picking exact swatches, then move to a focused pairing page that matches the project surface and contrast need.
combination guide
Color Combinations by Harmony Structure and Use
Decide whether the project needs calm harmony, strong contrast, warm material depth, or a restrained accent before browsing individual pairings. A good combination should name the base color, the companion color, the surface each one owns, and the next page to compare when the first pairing is close but not quite right.
#F4F0E7
#17324D
#879477
#B86449
decision logic
How to make the color choice smaller
- Pick the base color's job: field, structure, accent, or brand signal.
- Choose a companion that changes mood or improves readability.
- Assign proportions before adding a third or fourth color.
- Use related combination pages to adjust warmth, contrast, or softness.
swatch roles
Use each color for a specific job
| Color | HEX | Role | Use note |
|---|---|---|---|
| Quiet base | #F4F0E7 | Field | A light value keeps combinations readable. |
| Deep anchor | #17324D | Structure | Use when the scheme needs authority and contrast. |
| Organic support | #879477 | Support | Use to soften neutral or navy systems. |
| Warm accent | #B86449 | Accent | Use sparingly when the palette needs energy. |
visual plan
What to compare before final use
Use a four-card comparison strip that separates field, structure, support, and accent roles, with each card linking to the most relevant combination family.
Check the final palette in the medium that matters: a room, package, sign, menu, website, product card, or printed piece can shift color relationships through material, light, texture, and scale.
related decisions
Where to go next
- Colors that go with beigeStart with undertone and neutral pairing logic.
- Colors that go with blackCompare a stronger contrast anchor.
- Palette libraryMove from pairings to complete color systems.