Codificación aprenderaprogramar.com: CU01020D
COLORES EN LA WEB
Aunque la forma más habitual de designar colores en CSS es la notación hexadecimal escogiendo el color deseado entre los varios millones posibles, hay algunas curiosidades que merece la pena nombrar. Por un lado, la existencia de un conjunto de colores al que se denominaron “web safe colors” que fue usado durante varios años debido a que los monitores en que se visualizaban las páginas web no tenían capacidad para mostrar todos los colores.
LOS WEB SAFE COLORS
El número total de colores RGB se puede calcular teniendo en cuenta que cada uno de los tres colores admite 256 valores (desde 0 hasta 255), de ahí que el total de colores disponible sea exageradamente grande, en concreto de 256 x 256 x 256 = 16.777.216 colores. Cuando surgieron los desarrollos web y el auge de internet, la mayoría de los monitores sólo eran capaces de mostrar 256 colores diferentes. Por ello se definió una gama de colores (en concreto 216, ya que algunos se dejaron reservados para elementos de sistema) a los que se llamó “colores seguros para la web” o “web safe colors”. Estos colores eran colores que se mostraban correctamente en todos los monitores, de ahí que se los llamara colores seguros, frente a otros colores que podían no mostrarse correctamente que eran inseguros.
Hoy día los monitores han evolucionado y ya tienen capacidad para mostrar millones de colores, con lo cual ha perdido sentido la clasificación de colores entre seguros e inseguros. La mayoría de los diseñadores usan el color que les apetece entre los millones disponibles y todos son seguros. No obstante, los web safe colors siguen siendo utilizados con preferencia por algunos diseñadores a los que les resulta cómodo usar una gama de colores básica o les gusta usar una gama de colores simple. También son usados por algunos diseñadores que crean diseños para dispositivos con limitaciones en la gama de colores. Si quieres consultar la lista con los 216 web safe colors puedes hacerlo en la dirección websafecolors.info
NOTACIÓN RGBA
Existen otras notaciones o sistemas de colores menos utilizadas pero que vamos a nombrar porque están admitidas para su uso en CSS y conviene al menos conocerlas brevemente.
La notación RGBA incorpora un parámetro adicional denominado “Alpha” y que indica el grado de transparencia que se aplica al color siendo 0.0 el valor mínimo, que significa completamente transparente, y 1.0 el valor máximo, que significa completamente opaco. No todos los navegadores admiten la notación RGBA. En especial, navegadores antiguos no la soportan. El número de colores disponibles es más de 16 millones, añadiéndole la transparencia resulta un número de colores prácticamente infinito.
Un color con el sistema RGBA se escribe en CSS así:
| rgba (cantidadDeRojo, cantidadDeVerde, CantidadDeAzul, valorDeAlpha) |
Sobre el código de prueba HTML que estamos usando para el curso, volvemos a fijarnos en nuestra lista de elementos de menú:
|
<ul> <li><a href="#">Inicio</a></li> <li> <a href="libros.html" >Libros de programación</a> </li> <li> <a href="cursos.html" >Cursos de programación</a> </li> <li> <a href="humor.html" >Humor informático</a> </li> </ul> |
Prueba a aplicar estas reglas CSS y visualiza el resultado, que deberá ser similar al que mostramos más adelante:
|
/* Curso CSS estilos aprenderaprogramar.com*/ li:first-child {background-color: rgba(255,0,0,1);} li:nth-child(2){background-color: rgba(255,0,0,0.66);} li:nth-child(3){background-color: rgba(255,0,0,0.33);} li:nth-child(4){background-color: rgba(255,0,0,0);} |
Cuando tenemos un fondo blanco y vamos añadiendo transparencia el efecto que observamos es que el color parece que se va haciendo más claro. En realidad no es que el color se haga más claro, sino que al tener más transparencia deja ver cada vez más el fondo blanco resultándonos a la vista más claro.
Escribe la declaración .destacado {background-color: rgb(0,0,0);} y añade en el HTML código para indicar que la lista sea de esa clase: <ul class="destacado">. Con esto, comprueba la diferencia entre añadir transparencia teniendo fondo blanco o añadir transparencia teniendo fondo negro. En el primer caso el color se va haciendo cada vez más claro, en el segundo se va haciendo cada vez más oscuro.
NOTACIÓN HSL
El sistema HSL usa una rueda de colores y tres parámetros, el primero un valor numérico y los dos siguientes un porcentaje, de modo que un color HSL se escribe:
| hsl (anguloDeGiroColor, sombraGrisSaturación%, CantidadDeAzul, brillo%) |
El primer parámetro o ángulo representa el color. En la rueda el ángulo de 0 grados (o 360 grados) representa el rojo, el ángulo de 120 grados el verde y el ángulo de 240 grados el azul.
El segundo parámetro o porcentaje de saturación representa la cantidad de color frente a sombra gris y el 100 % representa el color completo mientras que el 0% supone nada de color y todo de sombra gris. Todo color con saturación 0 es una sombra gris.
El tercer parámetro o porcentaje de brillo genera el negro si es 0% y color más claro (representaría la incidencia de luz sobre el color) cuanto más próximo está a 100% hasta llegar al blanco.
Prueba a visualizar el código HTML con esta definición de estilos:
|
/* Curso CSS estilos aprenderaprogramar.com*/ li:first-child {background-color: hsl(0,0%,50%);} li:nth-child(2){background-color: hsl(0,50%,50%);} li:nth-child(3){background-color: hsl(0,100%,50%);} li:nth-child(4){background-color: hsl(58,100%,50%);} |
El resultado debe ser la primera línea del menú gris, la segunda grisácea-rojiza, la tercera roja y la cuarta en un tono amarillo.
Nota: no todos los navegadores admiten la notación HSL. En especial, navegadores antiguos no la soportan.
NOTACIÓN HSLA
El sistema HSLA es respecto al HSL análogo a lo que es el sistema RGBA respecto al RGB, es decir, añade un parámetro adicional alpha que representa la transparencia y que toma un valor entre 0 y 1. La sintaxis es:
| hsla (anguloDeGiroColor, sombraGrisSaturación%, CantidadDeAzul, brillo%, valorDeAlpha) |
Los efectos que se generan son los mismos que hemos descrito para la notación RGBA. Recuerda que al añadir transparencia el efecto obtenido depende del color de fondo que tengamos. Si el fondo es blanco, la impresión que se genera es que el color se va aclarando. Si es oscuro, la impresión es que el color se va oscureciendo.
NOMBRES DE COLORES ESTÁNDAR
Los navegadores permiten el uso de nombres específicos para más de cien colores: además de los más conocidos (Red, Blue, Yellow, Brown, Pink, Green, etc.) existen nombres para muchos colores más. Por ejemplo BlueViolet es color azul violáceo, Tomato es color tomate, SkyBlue es color cielo. Se admite el uso de minúsculas y mayúsculas indistintamente: es válido tanto red como Red, ó BlueViolet como blueviolet.
No es un sistema muy extendido y es posible que algunos navegadores no reconozcan algunos nombres, pero algunos diseñadores lo usan y sobre todo se recurre a él cuando se quiere poner un color rápidamente y nos acordamos del nombre pero no del código hexadecimal. En general, se desaconseja su uso ya que es menos seguro que el uso de códigos de color.
A modo de curiosidad, ponemos a continuación una lista de nombres de colores.
| aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, blue, blueviolet, brown, burlywood, cadetblue, chartreuse, chocolate, coral, cornflowerblue, cornsilk, crimson, cyan, darkblue, darkcyan, darkgoldenrod, darkgray, darkgreen, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen, darkslateblue, darkslategray, darkturquoise, darkviolet, deeppink, deepskyblue, dimgray, dodgerblue, firebrick, floralwhite, forestgreen, fuchsia, gainsboro, ghostwhite, gold, goldenrod, gray, green, greenyellow, honeydew, hotpink, indianred, indigo, ivory, khaki, lavender, lavenderblush, lawngreen, lemonchiffon, lightblue, lightcoral, lightcyan, lightgoldenrodyellow, lightgray, lightgreen, lightpink, lightsalmon, lightseagreen, lightskyblue, lightslategray, lightsteelblue, lightyellow, lime, limegreen, linen, magenta, maroon, mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, moccasin, navajowhite, navy, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen, paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, red, rosybrown, royalblue, saddlebrown, salmon, sandybrown, seagreen, seashell, sienna, silver, skyblue, slateblue, slategray, snow, springgreen, steelblue, tan, teal, thistle, tomato, turquoise, violet, wheat, white, whitesmoke, yellow, yellowgreen |
EJERCICIO
Crea un documento HTML con 20 divisiones. En las diez primeras divisiones introduce el color RGB 178,34,34 con grados de transparencia desde 0.1 hasta 1.0 (en cada división un punto decimal más de opacidad). En las otras diez divisiones introduce el color RGB 218,165,32 con grados de transparencia desde 1.0 hasta 0.1 (en cada división un punto decimal más de transparencia). En cada división escribe el código de color y el grado de transparencia que muestra. Por ejemplo: <<RGB 178,34,34 con transparencia 0.6>>
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
