Starting color

Maroon

#800000 · rgb(128, 0, 0) · hsl(0, 100%, 25%)

Complementary colors

#800000 · #008080

Analogous colors

#800040 · #800000 · #804000

Triadic colors

#800000 · #008000 · #000080

Split-complementary colors

#800000 · #008040 · #004080

Tetradic colors

#800000 · #408000 · #008080 · #400080

Monochromatic colors

#4d0000 · #a30000 · #ff0000 · #ff5c5c · #ffb3b3

Ready-made palettes with Maroon

Complementary palette

The base color paired with its opposite on the wheel for maximum contrast, plus two neutrals and a soft tint.

#800000 · #008080 · #f20d0d · #f4f4f5 · #18181b

Analogous palette

Neighboring hues on the color wheel create a calm, cohesive scheme with a light tint and a deep shade.

#800040 · #800000 · #804000 · #f20d0d · #000000

Triadic palette

Three hues spaced evenly around the wheel for a bold, balanced palette anchored by two neutrals.

#800000 · #008000 · #000080 · #f4f4f5 · #18181b

Monochromatic palette

A single hue stepped from light to dark for a clean, elegant and foolproof palette.

#ffebeb · #ff7a7a · #ff0505 · #940000 · #1f0000

If you are wondering what colors go with Maroon, start with its opposite on the wheel — a complementary #008080 — then soften the pairing with the analogous, triadic and monochromatic schemes above.

Frequently asked questions

Maroon's complementary color is #008080. Analogous neighbors, triadic accents and monochromatic tints of the same hue all pair naturally with it too.

Must-know facts

  • Every swatch row is a complete scheme you can copy straight into CSS.
  • The color wheel can regenerate these harmonies for any base you like.

Related tools

These color tools pair naturally with the one you just used — keep exploring.