Definir colores como tipos de valor en CSS

Unos de los valores mas básicos y a la vez mas utilizados en CSS son los colores. En las versiones anteriores de CSS podíamos establecer colores a las diferentes propiedades de tres formas, por medio de Keywords o palabras clave, por medio de notaciones hexadecimales o por medio del método RGB. Luego CSS3 añadió 3 formas mas para extender o ampliar mas el arte de aplicar color a los elementos de HTML: RGBA, HSL Y HSLA.

En este tutorial veremos cada uno de los métodos que emplea CSS para asignar colores a los elemento de HTML.

1 – Aplicar color por medio de Keywords o Palabras Clave

CSS define mas de 140 keywords o palabras clave para asignar colores a las diferentes propiedades y estas son soportados e interpretados correctamente por todos los navegadores. Contamos con una base de 17 colores básicos y estándares y además 126 colores extendidos. Se tratan de nombres de colores en ingles para los básicos (black, yellow, blue, green..) y para los extendidos también nombres combinados en ingles (darkblue, greenyellow, lightgray..). Su uso es muy básico e intuitivo, solo debemos de conocerlos y aplicarlos, esta es la forma mas fácil de aplicar color por medio de CSS.

en realidad este método es poco utilizado por que contiene una cantidad limitada de colores, solo usamos este métodos para tareas sencillas donde contamos con colores puntales y básicos.

keywords-palabras-clave-colores-en-CSS
Fuente: w3School

2 – Aplicar color por medio de notaciones Hexadecimales

Este método de aplicar color en CSS esta representado por una cadena de caracteres hexadecimales con un hash en el frente. Un hexadecimal es una representación de 6 dígitos de un color. Los dos primeros dígitos (RR) representan un valor de rojo, los dos siguientes son un valor verde (GG), y el último son el valor azul (BB). Ejemplo: La cadena #fde410 da como resultado un color amarillo. Los dos primeros caracteres (fd) son el componente rojo del color, los dos en el medio (e4) son para el componente verde y los dos últimos (10) para el componente azul.

La regla CSS a continuación establece el color amarillo para el fondo del cuerpo y el color del texto se establece en el valor del negro.

Utilizando el metodo Shorthand para los valores Hexadecimales.

Este método es solo una forma de acortar las notaciones de 6 dígitos. Ahora, esto solo lo podemos hacer cuando los numero son repetitivos en sus diferentes valores. Ejemplo:  para #66AA77 quedamos utilizando #6A7, para el color blanco que es #FFFFFF quedamos utilizando #FFF, para #000000 que es el negro quedamos utilizando #000.

Colores hexadecimales en CSS

Si te parece complicado dar con una combinación de caracteres para aplicar un color a una propiedad CSS Usted puede escoger los valores hexadecimales para un color utilizando una herramienta online o con el selector de color de Photoshop u otro programa de edición de imágenes.

selector de colores hexadecimales en photoshop para CSS

3 – Aplicar color por medio del metodo RGB

Además de utilizar la notación hexadecimal para representar los valores RGB, támbien podemos utilizar la función rgb(); en una hoja de estilos. Solo especificamos los valores de rojo, verde y azul como una lista separada por comas dentro del paréntesis.
El metodo rgb(); acepta los valores, ya sea como números en el rango de 0 a 255 o como porcentajes. Podemos utilizar las dos formas.

En la siguiente imagen vemos algunos colores representando el valor RGB.

Color en CSS con el metodo RGB

Y para obtener los valores exactos para determinado color también podemos utilizar algún selector de color o el mismo photoshop.

selector-de-color-metodo-rgb-en-css

3 – Aplicar color por medio del metodo HSL

Soportada por todos los nevegadores modernos y en IExplorer desde la versión 9, esta característica implementada en la especificación CSS3 es la capacidad de especificar colores usando el matiz o tono, la saturación y la luminosidad, este método es HSL();. Este método fue construido para complementar el sistema RGB ya que con HSL podemos obtener muchos mas colores de una forma diferente.

Al igual que RGB, HSL también toma 3 parametros H=Hue, S=Saturation y L=lightness. En el primero que es el matiz  declaramos un valor en grados del circulo de colores que que parte en 0º y termina en el mismo color después de dar un giro de 360º. Los valores segundo y tercero es decir la saturación y la luminosidad se definen en porcentajes.

Para definir el primer valor, Hue=Tono o Matiz nos basamos en la siguiente imagen.

Circulo de Colores para formato HSL de CSS3

Para definir la saturación y la luminosidad que son el segundo y tercer valor, nos basamos en porcentajes, donde:

Saturation = Saturación

  • 0%: totalmente desaturado
  • 50%: neutral
  • 100%: totalmente saturado

Lightness = Luminosidad

  • 0%: totalmente oscuro
  • 50%: neutral
  • 100%: totalmente claro.

Ejemplo, para el siguiente código obtendremos el color rojo, si miramos en la rueda de colores los 0, son los rojos. totalmente saturado y como una luminosidad neutra.

4 – Creación de colores con transparencia con los formatos RGBA y HSLA de CSS3

El módulo color de CSS3 amplia los formatos de colores RGB y HSL para permitir la opacidad del color en cuestión utilizando el canal Alfa que define transparencia. Para definir un color con transparencia alfa utilizamos el valor rgba(); y hsla();. Ambas funciones toman cuatro valores separados por coma, como vimos anteriormente con RGB y HSL pero esta vez dentro de los paréntesis indicaremos el cuarto valor separado por una coma para indicar la cantidad de opacidad del color. Este cuarto valor lo definimos en un rango de 0 a 1 donde 0=Totalmente transparente y 1=Totalmente opaco, 0.5 o .5 para dar una semitransparencia.

Los siguientes ejemplos crean rojo semitransparente con los diferentes formatos y el cuarto valor Alfa:

El ajuste de la transparencia alfa de un color no sólo reduce la intensidad del color, sino que también permite que se vea cualquier fondo a través de el, el fondo se hace más visible cuanto más cerca el cuarto valor es 0.

Y esto es todo en cuanto a usar básicamente los colores y métodos para aplicarlos en CSS.

Soporte en navegadores: IE9+, Firefox 3+, Chrome, Safari, y  Opera 10+.

Referencias:

w3schools : CSS Colors values
W3.org: Color values CSS
MDN: Color Values

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

1 Respuesta

  1. marzo 26, 2014

    […] Nuevo pingback […]