Looking for the colors that go with maroon? Below are maroon's complementary, analogous, triadic and neutral matches — worked out with color theory and ready to copy as hex, CSS or Tailwind. Click any swatch to copy its code.
The direct opposite of Maroon on the color wheel. Use it sparingly for buttons, links and highlights that need to pop.
Sit right next to Maroon, giving a calm, harmonious blend that feels effortless.
Two evenly-spaced colors that balance Maroon for a vibrant, playful scheme.
High contrast like complementary, but softer and easier to balance.
Clean neutrals that go with Maroon in any layout — ideal for backgrounds and text.
The quickest way to find a color that goes with maroon is the color wheel. Its complementary color, Cyan (#1F7A7A), sits directly opposite and gives maximum contrast — perfect for a single accent like a button or link. For something calmer, the analogous colors next to it (#7A1F4D and #7A4D1F) blend smoothly into a cohesive palette.
In real interfaces, pair maroon with plenty of neutrals. Use an off-white such as #F8F9FA for backgrounds and a near-black like #212529 for text, then let maroon and one accent do the work. Copy any swatch or combination above as hex, CSS variables or a Tailwind config and drop it straight into your project.
