why is control coloring reversed?

For what you’ve mentioned in your question that is the expected behaviour. I think the markup you might be looking for is:

<button mat-raised-button color="primary">Primary</button>

or

<button mat-flat-button color="primary">Primary</button>