CSS color vs. background-color vs. background?

In HTML when do I use color, and what is the difference between background-color and also the background tag?

What are the differences?

color is referring to the text color in that element.

background-color refers to the background color

background is shorthand to combine many background tags into one line.

background: #ffffff url("img_tree.png") no-repeat right top;

Combines color, image and background image properties in the one line instead of typing our each style individually.

w3schools

I will give you a example using this html element:

<span class="value"> This is my text </span>

.value { color: red, background-color: black}

The CSS color is used to change the text color of a html element. In this example "This is my text" would be red. The CSS background-color is used to change the background color so in this case you would get a black box with red text inside it. Finally the background is used to set all the background properties in one declaration. For example:

background: #00ff00 url("smiley.gif") no-repeat fixed center;

This changes the background color, adds the image "smiley.gif" to the background and it centers the image, it doesnt repeat the image if it has the space.

One big thing about this both css properties is, that a background-color does not overwrite an image or a gradient that has been set with this:

background:url('https://example.com/image.jpg');

or

background: linear-gradient(to bottom, #1e5799 0%,#2989d8 20%,#207cca 51%,#7db9e8 100%); 

If you are trying to change the background from an image to a color you have to use the background property.