A fin de agregar con precisión vistosidad a proyectos web, especificaremos colores en documentos CSS, según las reglas de este lenguaje. El desconocimiento de los tipos de definición de colores y los pasos correspondientes conlleva a páginas de internet con estilos sin combinación y, en algunos casos sin satisfacer las necesidades del proyecto. Debido a ello, determinaremos, paso a paso, la forma de agregar colores en los sistemas inglés, hexadecimal y decimal.

Cuando redactamos documentos con el lenguaje HTML, obtenemos una página web semánticamente ordenada. Sin embargo, al realizar una prueba mediante el navegador web, observamos cómo la muestra sin atractivos, solo las palabras en color negro, así como la primera imagen. Por lo tanto, para mostrar diversos colores y atraer la vista del usuario, es posible especificar colores en las declaraciones de selectores.

061-01_0602_ilu01. Página web con color y sin color

Para asignar colores en CSS, es necesario utilizar el atributo con la palabra “color”, luego dos puntos, y el valor correspondiente del mismo:

• En inglés: es necesario saber el nombre el color en este idioma, y agregarlo tal cual es.
• En hexadecimal: es necesario saber la conversión de números hexadecimales, debido a la definición del color con valores desde el cero hasta el nueve y, posteriormente, de la letra “a” hasta la “f”. Es importante antecederlo con el signo numeral, pues de lo contrario, no se aplica el color indicado.
• En decimal: es necesario expresar los números del color en tres grupos de números del 0 al 255, separados por comas.

061-01_0602_ilu02. Asignación de colores en lenguaje CSS

Existe una definición de color en CSS, llamada RGB, la cual utiliza también números hexadecimales. Tales siglas corresponden a Red, Green y Blue; en español, rojo, verde y azul, los tres colores utilizados por un computador para combinarlos entre sí y mostrar al usuario una diversidad de tonos. Cuando se especifica 0, quiere decir una exposición del color baja; mientras, 255 se refiere a la exposición alta. Por lo tanto, es posible realizar diversas combinaciones y obtener una variedad de tonos.

061-01_0602_ilu03. Representación de colores RGB

Además, tenemos a disposición los colores RGBa, donde “a” es el valor Alpha, representa la opacidad del color:

• Al especificar 0, será totalmente transparente.
• Al especificar 1, será totalmente opaco; es decir, no se ve a través de él.

Debido a ello, es posible utilizar números entre ambos, hasta obtener la transparencia deseada. En la ilustración siguiente está enmarcado por un cuadrado.

061-01_0602_ilu04. Representación de colores RGBa

También, existen las especificaciones de colores HSL y HSLA, con las cuales puntualizamos la luminosidad del color. Para ello, es necesario estudiar el estándar oficial de W3C, específicamente el módulo de color, ubicado en su página web.

Keynotes

• Para asignar colores en CSS, es necesario utilizar el atributo con la palabra “color”, luego dos puntos, y el valor correspondiente del mismo.
• Existe una definición de color en CSS, llamada RGB, la cual utiliza también números hexadecimales. Tales siglas corresponden a Red, Green y Blue; en español, rojo, verde y azul, los tres colores utilizados por un computador para combinarlos entre sí y mostrar al usuario una diversidad de tonos.
• Además, tenemos a disposición los colores RGBa, donde “a” es el valor Alpha, representa la opacidad del color: Al especificar 0, será totalmente transparente. Al especificar 1, será totalmente opaco; es decir, no se ve a través de él. Debido a ello, es posible utilizar números entre ambos, hasta obtener la transparencia deseada.
• Existen las especificaciones de colores HSL y HSLA, con las cuales puntualizamos la luminosidad del color. Para ello, es necesario estudiar el estándar oficial de W3C, específicamente el módulo de color, ubicado en su página web.

Especifica cinco colores diferentes en un documento CSS, según las reglas de este lenguaje. Es necesario incluir los tres tipos de métodos, junto a la clasificación RGB y RGBa.

¡Comparte los resultados del reto en tu vPages e invita a tus compañeros a comentar otras especificaciones!

Tiempo disponible: entre 15 y 30 minutos.

A través de la especificación de colores en documentos CSS, creamos páginas de internet con estilos combinados, acordes con las necesidades del proyecto, y agregamos vistosidad a los proyectos web con precisión. Mediante la disciplina y práctica constante, seremos los mejores profesionales en el diseño de páginas web.