Como todos sabreís, la correcta elección de los colores para una web, es parte fundamental, para el exito ó fracaso de la misma. Pero aquí, más que de la parte estética, vamos a tratar de las diferentes formas de declararlos en nuestros archivos CSS, toda la síntaxis y diferentes escalas de colores que podemos utilizar.
Con la propiedad background-color y color de CSS, le asignaremos a nuestros documentos los colores al fondo y a las fuentes que queramos usar, podemos declarar, los valores de estas propiedades, mediante diferentes sistemas, que pasó a resumiros.
Existen 140 colores admitidos en CSS que se pueden declarar por su nombre en inglés, también se le puede asignar a la propiedad color la palabra clave CurrentColor, que significá, que ese elemento, heredará, el color de su elemento padre, y también, se le puede asignar el valor transparent.
Los colores pueden ser definidos usándo el sistema rgb (red-green-blue) ó (rojo-verde-azul) de dos maneras:
Su sintaxis para declararlo sería, "#", seguido de tres caracteres hexadecimales (0-9, A-F), ó "#", seguido de seis caracteres hexadecimales (0-9, A-F).
La notación de tres dígitos (#RGB) y la de seis (#RRGGBB) son iguales, por ejemplo: #c06 es el mismo color que #cc0066.
"rgb()", seguido por tres valores integros(del 0 al 255) ó tres valores en porcentajes, el número entero 255 representa el 100%, y a F o FF en notación hexadecimal.
Entonces podriamos anotar el mismo color de todas estas maneras:
color: #f03; igual a color: #F03;
color: #ff0033; igual a color: #FF0033;
color: rgb(255,0,51); igual a color: rgb(255, 0, 51);
color: rgb(100%,0%,20%); igual a color: rgb(100%, 0%, 20%);
Osea es igual si ponemos las letras en mayusculas o minusculas, y si ponemos los valores, separados por coma y espacio, ó sin el. Pero, no valen, ni valores con decimales, ni mezclar los numeros enteros con los porcentajes.
Los colores también podremos definirlos, usando el sistema hsl, con la notación funcional hsl() donde:
h = hue ó tono, s = saturation ó saturación y l = lightness ó brillo.
El modelo HSL es más intuitivo, puedes adivinar el color que quieres, por su tono, y luego crear conjuntos de colores, manteniendo el tono igual, y modificando el brillo y la saturación.
Hue: (tono), es el valor del ángulo, del círculo de color (el arco iris representado en un círculo). El ángulo se proporciona como un numero de grados (º).
Por definición, un circulo tiene 360º, osea que implícitamente, por ejemplo: -120º = 240º ó 480º = 120º.
Por ejemplo: el rojo = 0º = 360º, y los demás colores están dispersos por el círculo, verde = 120º, azul = 240º, etc.
Saturation (saturación) y lightness (brillo), se representan por porcentajes (%):
Una saturación del 100%, es saturacion completa, y del 0%, es una sombra de gris.
Un brillo del 100%, es blanco, 0% es negro, y 50% es brillo "normal".
Entonces la sintaxis sería:
hsl(0, 100%, 50%); igual a hsl(360, 100%, 50%); que es rojo puro.
hsl(120, 100%, 50%); que es verde puro.
hsl(240, 100%, 50%); que es azul puro.
A los dos sistemas vistos de notación de colores (existe alguno más, menos utilizados), se les puede añadir un canal alfa, permitiendo especificar la opacidad del color, quedando rgba() y hsla().
El valor de la opacidad esta, entre 0, totalmente transparente y 1 totalmente opaco
Bueno, como veis hay diferentes sistemas para asignarle los colores a nuestras páginas y se van a añadiendo nuevos sistemas para declarar los colores en CSS, así que, usa, el que te sea más sencillo o intuitivo, cabe mencionar que conviene, por razones de legibilidad, que exista un buen contraste entre el valor de color del background ó fondo, y del de la fuente.
Para concluir, como se suele decir, para gustos los colores, yo para que podais conocerlos más, y escojais los que más os gusten, he preparado abajo, una galería interactiva clicando en los botones con bastantes colores, con su nombre en castellano, inglés(web), y sus valores de rgb() en hexadecimal ó enteros y su hsl().
Como ya he comentado, es muy importante, la elección de los colores para las páginas, y conocer los distintos sistemas para declararlos en el archivo CSS. Gracias por la visita, si tienes alguna sugerencia, agradezco tu contacto, hasta la próxima.
