Starting color

Citrine

#E4D00A · rgb(228, 208, 10) · hsl(54, 92%, 47%)

Complementary colors

#e6d00a · #0a20e6

Analogous colors

#e6620a · #e6d00a · #8ee60a

Triadic colors

#e6d00a · #0ae6d0 · #d00ae6

Split-complementary colors

#e6d00a · #0a8ee6 · #620ae6

Tetradic colors

#e6d00a · #0ae662 · #0a20e6 · #e60a8e

Monochromatic colors

#494203 · #9d8e07 · #f5dd0a · #f8e962 · #fcf5b6

Ready-made palettes with Citrine

Complementary palette

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

#E4D00A · #0a20e6 · #f2e67d · #f4f4f5 · #18181b

Analogous palette

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

#e6620a · #E4D00A · #8ee60a · #f2e67d · #6c6104

Triadic palette

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

#E4D00A · #0ae6d0 · #d00ae6 · #f4f4f5 · #18181b

Monochromatic palette

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

#fefceb · #faed80 · #f5de0f · #8e8006 · #1d1b01

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

Frequently asked questions

Citrine's complementary color is #0a20e6. 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.