Las siglas RGB significan Rojo (red), verde (green) y azul (blue) y es un modelo para representar colores basados en la combinación de estos tres colores primarios. La idea es sencilla: dependiendo de la cantidad de cada color, obtendrás otro color diferente. Veamos algunos ejemplos:
La forma de indicar colores en CSS mediante el modelo RGB es utilizar la función rgb()
. Para ello, tenemos que conocer la sintaxis, que no es más que lo siguiente:
Función RGB | Descripción |
---|---|
rgb(r g b) |
Valores numéricos |
rgb(r g b / a) |
Se añade un valor correspondiente al grado de transparencia, separado por / . Ver canales alfa |
Los valores anteriormente indicados como r
, g
y b
significan rojo, verde y azul, respectivamente, y hacen referencia a la cantidad de color que poseen estos canales para generar otro color. Para especificarlo se puede hacer de dos formas:
0
al 255
, siendo el primero el más oscuro y el segundo el más claro.0%
al 100%
, siendo el primero el más oscuro y el segundo el más claro.Como se puede ver en la siguiente imagen, donde utilizamos el formato de rgb(0 0 0)
de cada canal, obtenemos el color negro (todos los canales están en su valor menos intenso). En cambio, si utilizamos una cantidad rgb(255 0 0)
, obtendremos el color rojo (solo el canal rojo está en el más intenso). De esta forma, mezclando las cantidades de cada canal, se puede obtener prácticamente cualquier color:
Veamos un fragmento de código CSS donde utilicemos la función rgb()
con sus respectivos parámetros en cada canal. La utilizaremos con una propiedad como color
o background-color
:
.element {
background-color: rgb(125 80 10);
background-color: rgb(55% 25% 75%);
}
El desarrollador puede elegir si prefiere utilizar la nomenclatura con 100%
y puede resultar más sencillo de calcular que usar valores numéricos con valor máximo en 255
.
Como se comentó en el capítulo anterior, es posible que queramos que los colores tengan un grado de transparencia y no sean totalmente opacos. Para eso, se suele utilizar el denominado canal alfa. Utilizando la función rgb()
se puede indicar el canal alfa simplemente separando con un slash /
:
Método | Descripción |
---|---|
rgb(r g b / a) |
Idéntico a rgb(r g b) pero se añade el porcentaje del canal alfa separado por un / . |
De la misma forma que los canales r
, g
y b
, el canal alfa
puede ser indicado de dos formas:
0
, el valor máximo es 1
y se pueden usar decimales.0%
y el valor máximo es 100%
.Veamos algunos ejemplos:
.element {
background-color: rgb(100% 50% 25% / 50%);
background-color: rgb(100% 50% 25% / 0.5);
background-color: rgb(0 0 0 / 50%);
}
Ten en cuenta que aunque también puedes utilizar la antigua función
rgba()
, se recomienda utilizarrgb()
.
Quizás, si llevas algún tiempo con CSS habrás encontrado que la sintaxis que menciono en los apartados anteriores (sintaxis moderna) es diferente a la que ya conocías. Antiguamente, se utilizaba otra sintaxis que explicaremos a continuación. Aunque hoy en día sigue siendo posible utilizarla, se considera una «sintaxis legacy», es decir, que será reemplazada en algún momento por la sintaxis moderna.
La sintaxis clásica es la siguiente:
Función RGB | Descripción |
---|---|
rgb(r, g, b) |
Valores numéricos |
rgb(r, g, b, a) |
Se añade al anterior un valor correspondiente al canal alfa, separado por coma. Ver canales alfa |
En la sintaxis moderna se ha simplificado todo, ya que al utilizar esta sintaxis clásica, debemos tener más cuidado con no omitir las comas, para evitar un error y que el color no sea procesado.
.element {
background-color: rgb(125, 80, 10);
background-color: rgb(55%, 25%, 75%);
background-color: rgb(0, 0, 0, 0.5);
background-color: rgba(0, 50, 150, 0.5);
}
Nuevamente, la función rgba()
, aunque antiguamente era necesaria para indicar un canal alfa, ya no lo es.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev