¿Cómo funciona el color en CSS?

El color en CSS es una propiedad que te permite estilizar tu página web y crear paletas de color reconocibles que representen tu marca. En este post, te explicamos cómo funciona el color en CSS para que lo puedas utilizar en tu página web.

Sistema de color en CSS

El color en CSS puede expresarse de diferentes formas; podemos insertarlos con su nombre, con su RGB, su hexadecimal o su HSL. A continuación, te explicamos cómo funciona cada uno.

Nombre de color

Un color en CSS se puede representar con su palabra clave en inglés, sea en minúsculas o mayúsculas. Esta palabra clave representa colores concretos, es decir, cuando insertamos <red> obtendremos siempre el mismo color rojo. Si quieres conocer la lista de colores de cada nivel de CSS, te recomendamos ir a la página oficial de MDN, donde además encontrarás su alternativa en RGB hexadecimal.

RGB y hexadecimal

La sigla RGB representa colores a partir de la intensidad de los colores rojo, verde y azul, de los cuales viene su sigla en inglés (red, green, blue). La intensidad de cada color se determina por un número del 0 al 255, siendo el 0 la ausencia del color y el 255 su forma más intensa. En el modelo RGB, el color se representa usando tres números del 0 al 255, cada uno define la intensidad de un color en el orden R-G-B.

En su código hexadecimal estos números se representan con parejas de dígitos que usan números del 0 al 9 y letras de la a a la f. La intensidad empieza por el 0 y termina en la f. De este modo, el mínimo de un color viene siendo 00 (RGB 0) y su máximo ff (RGB 255). En medio de estos valores habrá una combinación de números y letras que representan un número RGB según su orden. De este modo, la pareja 0a representa el 10 y la pareja 0f el 15.

Al igual que los colores en RGB, los hexadecimales necesitan valores para cada color. Por esto, su código está formado por tres parejas de dígitos, seis en total. También hay notaciones de hexadecimales con solo tres dígitos, cuando las parejas están formadas por el mismo número o letra. Por ejemplo, el cógido #aa00ff es lo mismo que #a0f.

Aunque representan lo mismo usando distintos dígitos, el RGB y el hexadecimal se escriben de forma distinta en nuestra hoja de estilo CSS.

• Para escribir el RGB, debemos escribir la notación funcional <rgb> y sus códigos en paréntesis.
• Para la notación hexadecimal, basta con usar el numeral o hashtag (#).

Te proponemos un ejemplo: si quieres un rojo intenso, deberías poner como hexadecimal el código #ff0000, mientras que RGB se escribiría RGB (255, 0, 0).

HSL

El modelo HSL es una sigla para los conceptos de hue (tono), saturation (saturación) y lightness (brillo). Al igual que el RGB, se escribe en nuestra hoja de estilo CSS con su sigla HSL y su valor se escribe entre paréntesis. Este modelo nos permite crear conjuntos de colores de manera más intuitiva, ya que podemos simplemente cambiar la saturación y el brillo para tener variaciones de un mismo color.

El color en CSS, representado con HSL, usa tres valores. El tono o hue se determina con un numero del 0 al 360, pues los colores se representan en un espectro circular. No hay necesidad de memorizar estos valores, pero te damos unos ejemplos. El rojo se representa con 360, el verde con 120 y el azul con 240. Por su parte, tanto la saturación como el brillo se representan con porcentajes. En el brillo, 50% es brillo normal, 0% es negro y 100% es blanco. En la saturación, 0% representa una sombra gris y 100% es completamente saturado.

Canal alfa

En las representaciones RGB y HSL existe la posibilidad de agregar un cuarto valor que representa el canal alfa. El canal alfa se refiere a la transparencia u opacidad de un color y se define con un número entre el 0 y el 1, siendo el 0 el valor más transparente y el 1 el valor más opaco. Esto se escribe en nuestra hoja de estilo CSS como RGBA o HSLA y es una propiedad que se hereda del elemento padre al elemento hijo.

Si quisiéramos un verde con un 30% de opacidad podríamos escribir RGBA (0, 255, 0, 0.3). Para escribir el mismo valor en HSL lo escribiríamos como HSLA (120, 100, 50, 0.3).

Ten en cuenta que cuando insertamos un color usando su palabra clave o nombre, no obtendremos este canal alfa. Los colores insertados a partir de nombre son sólidos y no tienen un nivel modificable de transparencia u opacidad.

¿Cuál es el siguiente paso?

Ahora que sabes lo básico acerca del color en CSS, el siguiente paso es aprender sobre otras de sus muchas propiedades. Para esto, te recomendamos nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp, en donde aprenderás más acerca de CSS y HTML, entre otros lenguajes y herramientas que te permitirán convertirte en un desarrollador experto en pocos meses. ¡No te lo pierdas e inscríbete ya!