Cómo utilizar colores de código hexadecimal CSS con valores alfa

Introducción

En CSS, existen varios formatos de colores que se pueden utilizar. Los más comunes incluyen códigos hexadecimales, RGB (rojo, verde, azul), RGBA (rojo, verde, azul, alfa) y HSL (tono, saturación, luminosidad).

En este artículo, revisará los códigos de color hexadecimales y explorará el uso de valores alfa para la transparencia.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Se requiere cierta familiaridad con CSS. Si necesita un repaso, puede que le resulte útil la serie de tutoriales Cómo crear un sitio web con CSS .
• Un navegador web moderno que admite #rrggbbaala notación de color hexadecimal.

Uso de palabras clave de color

En primer lugar, CSS admite palabras clave de color . La mayoría de los navegadores y dispositivos pueden convertir estos colores nombrados en valores de color.

Hay alrededor de 140 colores con nombre en CSS (como red, blue, lavender, etc.).

Por ejemplo, si quieres que tu texto tenga color rojo, puedes usar la palabra clave red:

div { color: red;}

Diferentes formatos de valores, como los códigos hexadecimales, le permitirán personalizar más de 140 colores.

Comprensión de los valores hexadecimales

Probablemente estés más acostumbrado a contar con valores decimales (o base 10):

0, 1, 2, 3, 4, 5, 6, 7, 8, 9

En otras palabras, un solo dígito solo tiene 10 valores posibles ( 0a 9), y después de eso, debe aumentar a dos dígitos ( 10).

Los valores hexadecimales son base 16 en lugar de base 10:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Utiliza las letras A, B, C, , y Dpara representar los valores adicionales.EF

Por ejemplo, estos son todos valores hexadecimales válidos:

00, 01, 99, 9D, 1D, CC, E4, F5

A continuación, aprenda a utilizar valores hexadecimales en estilos CSS.

Uso de valores hexadecimales en CSS

Al diseñar un elemento con CSS, a menudo cambiará los valores de color de propiedades como fuente color, background-color, border-color, etc.

Para crear colores personalizados, puede utilizar combinaciones de los números hexadecimales descritos anteriormente para crear códigos hexadecimales, que representan colores específicos.

Los códigos hexadecimales CSS deben comenzar con un “signo de número” (#) (también conocido como almohadilla o símbolo de almohadilla). Luego, seis dígitos de valores hexadecimales. Cada par de dos dígitos representa rojo, verde y azul. El patrón se ve así #RRGGBB(donde rojo es R, verde es Gy azul es B).

Los colores se representan mediante una combinación de valores de rojo, verde y azul. El valor más bajo ( 00) será la versión más oscura del color (más cercana al negro) y el valor más alto ( FF) será la versión más clara del color (más cercana al blanco).

Si se configuran los tres pares en el valor más bajo ( 00), se obtendrá un color negro sólido:

div {  color: #000000;}

Si se configuran los tres pares con el valor más alto ( FF), se obtendrá un color blanco sólido:

div {  color: #FFFFFF;}

Digamos que desea que el color del texto del encabezado sea un rojo brillante. Para lograrlo, puede establecer el RRvalor rojo ( ) en el valor más alto posible ( FF). Como no desea ningún color verde ni azul, puede establecer los valores verde ( GG) y azul ( BB) en el valor más bajo posible ( 00).

div {  color: #FF0000;}

Este código se mostrará así:

Texto rojo

Al cambiar la cantidad de rojo, azul y verde, puede producir una variedad de colores. #DC143Ctiene una gran cantidad de rojo ( DC): esto producirá un color “carmesí”. #EE82EEtiene grandes cantidades de rojo ( EE) y azul ( EE): esto producirá un color “violeta”. #40E0D0tiene grandes cantidades de verde ( E0) y azul ( D0): esto producirá un color “turquesa”.

Nota: Los códigos hexadecimales CSS no distinguen entre mayúsculas y minúsculas. Esto significa que los caracteres alfabéticos pueden estar en mayúsculas o minúsculas. #ff0000Es equivalente a #FF0000. CSS también admite valores abreviados. Esto significa que #F00es equivalente a #FF0000.

El enfoque que adopte debe cumplir con los estándares de codificación utilizados en su proyecto.

A continuación, aprenda a utilizar valores alfa con códigos hexadecimales CSS.

Cómo agregar un valor alfa a los códigos hexadecimales CSS

Si se utiliza un valor alfa para actualizar la transparencia de un color, el formato del código hexadecimal cambiará de #RRGGBBa #RRGGBBAA(donde alfa es A). Los primeros seis valores (rojo, verde y azul) siguen siendo los mismos.

El AAvalor en #RRGGBBAApuede variar desde el valor más bajo posible ( 00) hasta el valor más alto posible ( FF). Si se reduce el valor, la visibilidad se hará cada vez más tenue hasta que se vuelva transparente. Si se aumenta el valor, la visibilidad se volverá cada vez más opaca.

Digamos que quieres un color azul que sea bastante transparente.

Primero, comience con el código hexadecimal del color azul:

div {  background-color: #0080FF;}

Este código se mostrará así:

Color de fondo#0080FF

A continuación, puede cambiar la transparencia agregando dos valores más al código hexadecimal. En este ejemplo, el valor alfa se establece en 80:

div {  background-color: #0080FF80;}

Este código se mostrará así:

Color de fondo#0080FF80

El valor alfa en formato hexadecimal puede ser un poco confuso porque es difícil conceptualizar cómo se verá realmente un valor de base 16 para la transparencia. Sin embargo, la ventaja es que si ya estás usando códigos hexadecimales en tu base de código, ¡ahora puedes actualizarlos para cambiar también la transparencia! No se requieren cambios en el formato de color.

Consejo sobre cómo usar Chrome DevTools para elegir colores

Un consejo rápido para ver tus colores en diferentes formatos es con Chrome DevTools.

Una vez que el panel DevTools esté abierto, busque el color que está verificando en la sección de estilos. Una vez que lo encuentre, puede hacer clic en el cuadro a la izquierda del color para ajustar los valores directamente. También puede mantener presionado SHIFTel cuadro y hacer clic para alternar entre las distintas opciones de formato con los valores convertidos correctamente.

En este ejemplo se ajustan los valores alfa y de color. Luego se alterna entre el formato de código hexadecimal, el formato RGBA y el formato HSLA.

Obtenga más información sobre el selector de color de Chrome DevTools .

Conclusión

En este artículo, revisó los códigos de color hexadecimales y exploró el uso de valores alfa para la transparencia.

La compatibilidad del navegador con #RRGGBBAAcódigos hexadecimales requiere navegadores modernos. No está disponible en versiones anteriores de Internet Explorer. Consulte ¿Puedo usar #rrggbbaala notación de color hexadecimal? para ver si este formato es adecuado para el público objetivo de su proyecto.

Si desea obtener más información sobre CSS, consulte nuestra página de temas de CSS para obtener ejercicios y proyectos de programación.