Podemos cambiar la apariencia de elementos en nuestro documento HTML utilizando colores. Los mismos deben aplicarse desde nuestro CSS. Hay muchas formas de poder nombrar colores:

• Por su nombre: CSS tiene una galeria de 140 colores para poder llamarlos por su nombre. Algunos de ellos son blue, gray, salmon, green, yellow, orange. Estos no pueden modificarse sino que se muestran como los entiende el navegador por defecto.
• Colores hexadecimales: Son aquellos que se ven asi #ff0000. Por ejemplo este es rojo. Además puede agregarsele una transparencia agregandole el grado que se desea de transparencia a continuación del hexadecimal. Ej, si quiero un rojo con 50 de transparencia el color que debo utilizar es #ff000050
• RGB: Son los colores que se delimitan con la funcion rgb(). Tienen en cuentra tres colores: rojo, verde y azul. Con la mezcla de los tres pueden hacer cualquier otro color. Si por ejemplo quisiera el color verde en rgb sería rgb(0, 255, 0).
• RGBA: Similar al RGB pero le agrega una variable alpha que mide la opacidad del elemento. La misma va del 0.1 como minimo al 1 como maximo. Por ejemplo si queremos un rojo muy opaco en RGBA sería rgba(255,0,0,0.1)
• HSL: Utiliza el modelo de matiz, saturacion y luminosidad para crear color. El matiz es un grado en la rueda de colores (de 0 a 360): 0 (o 360) es rojo, 120 es verde, 240 es azul. La saturación es un valor porcentual; 0% significa un tono de gris y 100% es el color completo. La luminosidad también es un porcentaje; 0% es negro, 100% es blanco. Por ejemplo el azul sería hsl(240, 100%, 50%). Este puede ser el mas dificil de utilizar.

Degradados

CSS nos permite, combinando colores, poder llegar a un degradado. Para eso utiliza la propiedad linear-gradient. Es muy interesante como funciona esta propiedad, ya que lo que hace es crear una imagen con esos colores para usar de fondo, por lo que no se trata ya de un background-color. Esta es su estructura basica:

linear-gradient(direccion de la linea, color1, color2)

Este es un ejemplo practico de la misma

linear-gradient(90deg, cyan, ghostwhite)

La direccion en lacuales ira la linea de separación

El primero color del degradé

El segundo color del degradé

En código se verá asi:

body{
	background:linear-gradient(90deg, cyan, ghostwhite)
}

Esto se verá asi

ATENTI