Colores en CSS
La recomendación W3C en CSS Color Module Level 3 describe los sistemas de definición de colores (nombres o códigos numéricos) que se pueden utilizar en las hojas de estilo, así como la forma de definir la opacidad de los elementos.
Un color puede ser descrito en cualquiera de las siguiente maneras:
- Usando una palabra clave.
- Usando el sistema RGB, con notación #-hexadecimal o las notaciones funcionales rgb() y rgba()
- Usando el sistema HSL, con las notaciones funcionales hsl() y hsla()
Asociado con el color en el espacio sRGB, un valor del tipo color también tiene una coordenada alpha-channel (canal alfa) o valor de transparencia (opacidad), indicando cómo se debe mezclar el color con su color de fondo.
Los valores del tipo color en CSS pueden ser interpolados para lograr animaciones o para crear valores gradient. En este caso son interpolados en cada uno de sus componentes rojo, verde y azul, conteniendo, cada uno de ellos, un número decimal.
Formas de describir un valor de tipo color
Palabras clave de Colores
Las palabras clave de colores son identificadores, en los que no hay distinción entre mayúsculas y minúsculas y que sirven para representar un color concreto, por ejemplo red, blue, brown, lightseagreen. El nombre describe el color aunque es mayormente artificial. La lista de valores válidos cambia bastante de una especificación a otra.
- Especificación CSS Level 1
- Especificación CSS Level 2.1
- Especificación CSS Level 3
- Especificación CSS Level 4
- A excepción de los 16 colores básicos, que son comunes en HTML, los otros no pueden ser usados en HTML.
- Colores desconocidos hacen que la propiedad CSS sea declarada inválida. Las propiedades inválidas son ignoradas y , por tanto, el color no tendrá efecto.
- Ninguna palabra clave de color tiene transparencia en CSS, son colores planos y sólidos.
Palabra clave transparent
La palaba transparent representa un color totalmente transparente, es decir, el color que veremos será el colore de fondo. Técnicamente es un color negro con un valor mínimo en el canal alfa y la manera de representarlo es rgba(0,0,0,0).
Palabra clave currentColor
La palabra clave currentcolor permite hacer que las propiedades de color sean heredadas por los elementos hijo, que no lo hacen por defecto.
También puede ser usada en propiedades que heredan el valor calculado de la propiedad del elemento color, en este caso, será equivalente a la plabara clave inherit en estos elementos, si es que la hubiera.
Sistema RGB()
Los colores puede ser definidos usando el modelo RGB (rojo-verde-azul) de dos maneras:
Notación Hexadecimal #RRGGBB o abreviadamente #RGB
(los navegadores duplican el valor cuando solo escribimos 3)
El signo "#", seguido de seis caracteres hexadecimales (0-9, A-F).
El signo "#", seguido de tres caracteres hexadecimales (0-9, A-F).
La notación de tres dígitos (#RGB) y la de seis (#RRGGBB) son iguales.
Por ejemplo, #f03 y #ff0033 representan el mismo color
(porque los navegadores convierten #f03 en #ff0033.)
Es igual escribir las letras hexadecimales en mayúsculas o en minúsculas.
Notación funcional rgb(R,G,B)
"rgb", seguido por tres valores tipo entero o tres valores en porcentajes.
El número entero 255 representa el 100%, y F o FF en notación hexadecimal.
Ejemplo para rojo: rgb(255,0,0) o también rgb(100%,0,0)
Lista de los 216 colores web, considerados colores base en HTML.
Sistema HSL()
Los colores también puede ser definidos usando el modelo HSL
tono (Hue) - saturación (Saturation) - brillo (Lightness)
con la notación funcional hsl(). La ventaja del modelo HSL sobre el modelo RGB es que es mucho más intuitivo: puedes adivinar los colores que tu quieres y, luego, modificarlos. Es también más fácil crear conjuntos de colores (manteniendo el tono (hue) igual y modificando el brillo y la satuación).
El tono (Hue) se representa como un ángulo del círculo de color, es decir, un valor numérico entre 0 y 360 (sin unidades). Siendo 0 el rojo, 120 el verde y 240 el azul.
Por así decirlo, es el arco iris representado en un círculo.
Como hemos dicho, por definición para el rojo ponemos 0 o 360, y los demas colores están dispersos por el círculo cromático
Al ser un ángulo implíca que podemos escribir también -120 ó 240 y 480 ó 120, etc...
La saturación y el brillo son representados en porcentajes.
100% es saturacion completa, y 0% es una sombra de gris.
100% brillo es blanco, 0% negro, y 50% es brillo "normal".
Ejemplo del color rojo utilizando el sistema HSL: hsl(0,100%,50%)
Transparencia
Si añadimos un parámetro más al sistema RGB o al HSL obtenemos un valor para controlar la transparencia (opacidad) de un color. Este parámetro se denomina canal Alpha y es un valor numérico que varía entre 0 y 1. Es decir, colocar el número 0.5 significa un 50% de transparencia (o de opacidad, según se mire).
La notación para RGB es: rgba(rojo,verde,azul,alpha). Ejemplos:
para rojo puro es rgba(255,0,0,1), y para rojo a un 30% transparente es rgba(255,0,0,0.3)
La notación para HSL es: hsla(angulo,saturacion,brillo,alpha). Ejemplos:
para rojo puro es hsla(0,100%,50%,1), y para rojo a un 60% transparente es hsla(0,100%,50%,0.6)
