Especificación de color mediante rgb en CSS

Al principio del libro de texto, cuando estudiamos los colores, les dije que el color se puede especificar ya sea con una palabra en inglés, o mediante rgb, o mediante #. Los dos últimos formatos permiten obtener un color de cualquier tono. Analicemos cómo funcionan exactamente estos formatos.

Para comprender estos métodos, primero necesitamos entender cómo se obtiene el color deseado en la pantalla de la computadora.

En realidad, un punto individual de la pantalla (píxel) no puede brillar con todos los colores que se necesitan, ya que técnicamente sería muy complicado. Cada punto de la pantalla solo puede brillar con tres colores: rojo, verde y azul. Pero simultáneamente y en diferentes proporciones.

Combinando estos colores podemos obtener cualquier color que necesitemos, similar a como lo hacen los pintores con las pinturas: mezclando varios colores obtienen otro nuevo.

Para mezclar colores en CSS, se debe indicar como valor de la propiedad la palabra clave rgb, después de la cual se enumeran, separados por comas, los valores que definen en qué proporciones se deben tomar estos tres colores base. Los propios colores pueden variar de 0 a 255. Donde cero - es la ausencia de color, y 255 es el color puro (por ejemplo, rojo puro).

Las propias letras rgb significan red, green, blue.

Veamos algunos ejemplos.

Ejemplo

Mezclemos color rojo puro y azul puro. Para ello, ponemos el primer valor en 255, el segundo en 0, y el tercero - en 255. Obtendremos un color púrpura:

<p>
	texto
</p>

p {
	color: rgb(255, 0, 255);
}

Ejemplo

Pongamos ahora el primer valor en 255, y todos los demás - en cero. Como resultado obtendremos color rojo puro:

<p>
	texto
</p>

p {
	color: rgb(255, 0, 0);
}

Ejemplo

Así obtendremos color verde puro:

<p>
	texto
</p>

p {
	color: rgb(0, 255, 0);
}

Ejemplo

Y si para el verde ponemos no 255, sino 100, obtendremos verde parcial:

<p>
	texto
</p>

p {
	color: rgb(0, 100, 0);
}

Ejemplo

Mezclemos los tres colores en proporciones arbitrarias. Miren lo que obtuvo:

<p>
	texto
</p>

p {
	color: rgb(200, 100, 125);
}

Ejemplo

Si ponemos todos los valores en 255, obtendremos color blanco puro:

p {
	color: rgb(255, 255, 255);
}

Ejemplo

Si ponemos todos los valores en 0, obtendremos color negro puro:

p {
	color: rgb(0, 0, 0);
}

Tareas prácticas

Especificando el color mediante rgb, haga que todos los párrafos sean de color rojo.

Especificando el color mediante rgb, haga que todos los h2 sean de color verde.

Especificando el color mediante rgb, haga que todos los h3 sean de color azul.

Mezcle rojo puro y verde puro. ¿Qué color se obtiene?