Espacios de color, 'opacity' y CSS 3

#FFFFFF. En nuestros comienzos en el HTML y CSS, siempre pensamos que esa es la única forma de mostrar colores, la notación hexadecimal en un espacio de color RGB.

Ahora, tu, si tú, el que esta frente a esta pantalla y recién esta empezando en esto de los colores en general, haces una mueca y le preguntas al computador: ¿Que es un espacio de color? ¿Que es RGB?

O tú, que como yo, siempre buscaste la forma de ahorrarte hasta el ultimo bit o al contrario que yo, siempre buscaste la presición en los colores de tu web, venid.

En verdad, tanta introducción era innecesaria, esto es realmente muy simple desde el punto de vista de escribir un color, y muy difícil desde un punto de vista matemático, pero a nosotros (a mi) me interesa de momento solo el primero, que es el que mostraremos ahora.

Para escribir colores en HTML, generalmente usamos algo parecido a #XXXXXX. Esto sobre el espacio de color RGB (Red, Green Blue). La gama de colores en este sistema es un total de 16.7 millones de colores, pero en la web solo se usan 216, que nacen de combinaciones del rojo, verde y azul, donde sus valores se dan en hexadecimal.

Cada par de digitos es el valor de un color (Rojo, verde y azul, respectivamente), si en un par los dos valores son iguales y en los otros pares pasa lo mismo, se puede abreviar su escritura, de 6 digitos, a tres:

• #FF9900 es igual a #F90.
  
• #333333 es igual a #333.

Pero:

• #F0F0F0 NO es igual a #FFF.

Con eso ya tienes para ir optimizando tus CSS . Esto sería lo básico sobre los colores, pero hay mas.

¿Si les dijera que hay una forma de escribir en CSS los colores en una notación decimal y no hexadecimal?

Esto es muy fácil, mediante la función CSS 'rgb'.
He aqui un ejemplo:

Código :

div { color: #F00; }
/* ES IGUAL A */
div { color: rgb(255, 0, 0); }

Ambos nos dan el mismo resultado, que es el color rojo.
Asi mismo puedes crear el blanco (#FFF):

Código :

div { color: rgb(255, 255, 255); }

Ó el negro (#000):

Código :

div { color: rgb(0, 0, 0); }

Ahora, una pequeña cosa mas, con la llegada de CSS3, llego una propiedad que manipula cuan opacos son nuestros objetos ¿Le adivinan el nombre? Bingo!, opacity, una propiedad que nos permite manejar la transparencia sobre lo que sea en nuestra web.

Ella también la podemos mezclar con el uso de la función rgb, transformándola a 'rgba'... la verdad esqe a viene de alpha, y no de opacity, pero el fin es el mismo .
Para usarla, solo añadimos al final el valor de opacidad de nuestro elemento:

Código :

div { background: rgba(255,0,0,0.5); }

Con eso tenemos un rojo transparente, medio transparente, para ser exactos. (rgba es una propiedad de CSS3 y funciona solo en Firefox 3 de momento )

CSS3, introducirla (probablemente ) el manejo en el modelo HSL.

Un ejemplo:

Código :

div { color: hsl(0,100%, 50%);

sería, como es costumbre, el rojo, idéntico a #F00 a #FF0000 y a rgb(255, 0, 0).

Y como no, también existirá la función hsla, que permitirá dar transparencia a nuestros colores en HSL. ¿Como usarla? igual que rgba .

Para finalizar:

Ejemplos HSL, HSLA, RGB, RGBA, tablas de colores y toda la especificación encuanto a colores de CSS3

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.