Práctica 7

Es una de las formas más usadas al principio para definir colores. Se trata de representarlos mediante su notación hexadecimal

Ejemplos:

• color: #FF00FF
• color: #11F2F3

Se han definido diferentes formas y modelos para hacer referencia a los colores. Una de ellas es la función rgb(), que consiste en definir un color mezclando los diferentes colores básicos: rojo, verde, azul (Red, Green, Blue...RGB). De esta forma, escribiendo la notáción hexadecimal de un color podemos hacer referencia a él para usarlo en nuestro sitio. Existen dos formas diferentes de utilizar la función rgb(): mediante enteros (0 a 255) o con porcentajes (0% a 100%).

Ejemplos:

• rgb(20,80,10);
• rgb(75%,30%,30%);

Es la ampliación del método rgb() con un nuevo canal alpha, el cual nos va a permitir definir el grado de transparencia del color. El valor de dicho canal oscila entre 0 y 1, siendo 0 totalmente transparente y 1 totalmente opaco. Al igual que con rgb(), también se pueden usar porcentajes para definir el color.

Ejemplos:

• rgba(20,80,10, 0.8);
• rgba(75%,30%,30%, 0.3);

Con la llegada de CSS3 se introdujo la función hsl(), la cual nos permite definir un color mediante su matiz, saturación y luminosidad (hue, saturation, lightness... hsl). Pensemos un momento en la rueda de los colores. Cada grado de esta rueda es un color. De aquí que "hue" es un número de 0 a 359. A lo largo de los 360° el color cambia de rojo ( 0° ) a verde (120°) a azul ( 240°) y de nuevo a rojo ( 360° ).

Ejemplos:

• hsl(0,100%,50%);
• hsl(240,100%,50%);

Es la ampliación del método hsl() con un nuevo canal alpha, el cual nos va a permitir definir el grado de transparencia del color. El valor de dicho canal oscila entre 0 y 1, siendo 0 totalmente transparente y 1 totalmente opaco.

Ejemplos:

• hsla(0,100%,50%, 0.3);
• hsla(240,100%,50%, 0.9);

Web safe colors o Colores seguros para web nacen en la realidad de las limitaciones de los primeros monitores a color y debido a la falta de ancho de banda, la paleta completa de colores en pantalla se restringía sólo a 8-bits; esto quiere decir que en este entorno cada píxel sólo podía producir 256 colores diferentes. Este conjunto de colores podría ser visualizado sin tramado en las pantallas de 256 colores y por esto se les llamó colores seguros para Web o web safe colors.

Ejemplos:

• color: white;
• color: olive;