Formatos de color más comunes

En CSS existen diferentes formas de especificar un color. Las más comunes son:

• Colores nombrados
• Hexadecimal
• RGB
• RGBA
• HSL
• HSLA

Colores nombrados

Los colores nombrados son valores predefinidos que utilizan nombres de colores en inglés, como red, blue, green, etc.

Usualmente esta es la primera forma en la que aprendemos a utilizar valores de tipo <color> ya que se encuentran en la lista de autocompletado de VS Code. Podemos encontrar la lista completa aquí: Colores nombrados.

Hexadecimal

Es un formato que utiliza valores del sistema hexadecimal para especificar colores.

El sistema hexadecimal utiliza 16 símbolos para contar: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Donde el valor mínimo es 0 y el máximo es f.

Los colores que usan 6 valores o tres pares de valores son los más comunes:

#RRGGBB

• El primer par de valores indica la cantidad de rojo (Red)
• El segundo par de valores indica la cantidad de verde (Green)
• El tercer par de valores indica la cantidad de azul (Blue)

Por ejemplo:

#ff0000

Sería un color completamente rojo:

También podemos encontrarlo en formato de 8 valores o 4 pares, donde el último par indica la opacidad del color:

 #RRGGBBAA

Donde A es el valor Alpha o la opacidad.

Por ejemplo:

#ff000080

Sería un color completamente rojo con una opacidad hexadecimal de 80 que es equivalente a 50%.

Y también podemos encontrarlo en formato de 3 valores:

#RGB

Que en realidad se vuelve un equivalente a repetir el valor en cada color.

Por ejemplo:

#0f0

Es equivalente a:

#00ff00

Y:

#abc

Es equivalente a:

#aabbcc

RGB y RGBA

RGB y RGBA son formatos que utilizan una función para especificar colores.

En este artículo veremos la versión moderna de rgb() que nos permite poner diferentes tipos de valores para cada color y opacidad.

Con números

La sintaxis es la siguiente:

rgb(R G B)

Donde:

• R es el valor de rojo (red)
• G es el valor de verde (green)
• B es el valor de azul (blue)

Y podemos usar valores del 0 al 255 para cada color.

Por ejemplo:

rgb(0 0 255)

Adicionalmente, podemos usar valores de 0 a 1 para la opacidad añadiendo una diagonal seguida del valor:

rgb(R G B / A)

Por ejemplo:

rgba(0 0 255 / 0.5)

Con porcentajes

También podemos usar porcentajes para especificar los valores.

rgb(30% 20% 50%)

Incluyendo la opacidad:

rgb(30% 20% 50% / 50%)

Incluso podemos combinar la notación de porcentajes con la de números:

rgb(0 30% 255 / 80%)

Sobre las funciones de legado

Anteriormente las funciones RGB estaban divididas entre rgb() y rgba(), los valores tenían que estar separados por comas y no se podían combinar números con porcentajes.

En la versión actual de rgb() debemos usar espacios para separar los valores y podemos agregar la opacidad dentro de la misma función sin problema así como combinar números con porcentajes.

HSL y HSLA

HSL y HSLA también son formatos que utilizan una función para especificar colores.

Y de igual manera tienen una versión moderna que nos permite agregar opacidad de manera opcional.

La sintaxis es la siguiente:

hsl(H S L / A)

Donde:

• H es el valor del tono (Hue)
• S es el valor de la saturación (Saturation)
• L es el valor de la luminosidad (Lightness)
• / A es la opacidad (Alpha). Es un valor opcional.

H acepta valores de tipo <number> o <angle>. Es decir, números del 0 al 360, o valores en grados, vueltas, etc.

S acepta valores de tipo <percentage>. Es decir, porcentajes del 0% al 100%. Si olvidamos el % se seguirá interpretando como porcentaje.

L también acepta valores de tipo <percentage>.

A acepta valores de tipo <alpha-value>, que en realidad sólo son valores del 0 al 1 o del 0% al 100%.

Por ejemplo:

hsl(0 100% 50%)

Comentarios

Rutas relacionadas

Web Dev (Frontend)