Recomendaciones de estilo: color

Enviado por Daniel Rojas el 11 jul, 2007 a las 11:17
Daniel Rojas

Para continuar con algunas recomendaciones de cómo mejorar tu blog en Bligoo, van algunas sugerencias sobre la elección y el uso del color.

Creo que es difícil dar consejos sobre qué colores ocupar o el cómo combinarlos, cada cual es dueño de hacerlo como le plazca. Sin embargo hay ciertos cuidados que conviene tener, sobre todo para facilitar la lectura del blog y su contenido. Estas sugerencias son sólo recomendaciones, consejos para encontrar en el uso del color un aliado y no un enemigo de nuestro blog. Le pido ayuda a los diseñadores que participan de la comunidad, por si alguna parte del texto es imprecisa o requiere aclaración. Como una manera de hacerlo más ameno, voy a ir por partes.

Consideraciones generales sobre el color

El tema del color es enorme y de acuerdo a lo que se diga sobre él depende la perspectiva que se tome, por lo que me veo obligado a simplificar bastante. En términos generales los colores se dividen en pigmento y luz, dependiendo de su naturaleza.

Los colores pigmento son sustractivos, es decir, en la medida que quitamos color nos vamos acercando al blanco y si agregamos, al negro. Este es el caso de los colores para imprenta: el cyan, el amarillo y el magenta, más el negro. Este último se usa para su aplicación pura o para darle contraste y riqueza a las combinaciones de los otros colores. De ahí en nombre de cuatricromía (cuatro colores).

En pantalla los colores son aditivos (colores luz), es decir, todos ellos juntos y a la máxima intensidad forman el blanco, su ausencia es el negro. Los colores luz básicos son el rojo (R), el verde (G) y el azul (B), los típicos que aparecían en los logotipos de las teles antes. El que nos interesa en el caso del diseño para web es el color luz.

Los colores de pantalla se componen de los distintos valores que se le dan a cada uno de los colores básicos que lo forman (RGB). Este valor se expresa de dos maneras, como decimal o como hexadecimal.

Como decimal se otorga un valor entre 0 y 255 a cada uno de los colores básicos (RGB). Así, por ejemplo, el rojo más intenso se expresa con los valores 255-0-0. Esto lo puedes probar en Photoshop o en otro programa de edición de imágenes.

El color hexadecimal es el que se usa en HTML y está expresado en un código de seis caracteres, que pueden ser números y letras. Los dos primeros caracteres para el rojo, los dos siguientes para el verde y los dos últimos para el azul. Por ejemplo, el blanco, que es la máxima intensidad de los tres colores, se logra con el código #FFFFFF (se incluye el signo # antes). El negro, la mínima intensidad del color, se expresa con el código #000000. Algunos colores se puede expresar de modo abreviado, por ejemplo, para el blanco basta poner #FFF. Además, la mayoría de los colores tienen asociado un nombre HTML, por ejemplo: Olive, DarkBlue, Gray, Chocolate, etc.

Para no extenderme más en esto les recomiendo el artículo sobre el tema publicado en Wikipedia, que contiene una explicación muy precisa y una completa muestra de colores (http://es.wikipedia.org/wiki/Colores_web).

Aplicación

Para la aplicación de colores en tu blog hay dos maneras básicas.

La primera es al publicar un post o un comentario. Al hacerlo puedes ir modificando los colores de los textos con una paleta que tiene disponible el módulo de publicación. Personalmente recomiendo usar esta posibilidad con precaución, cuidando de elegir los mismos colores para destacar textos. Si el criterio cambia en cada post, al final vas a tener un arco iris difícil de entender.

La segunda, y la más importante para el diseño de tu blog, es modificando la hoja de estilo (CSS) del tema que hayas escogido. Para ello tienes que seguir los pasos de edición del blog. Ingresar como usuario, elegir de tu menú personal la opción 'editar blog' y, una vez dentro del modo de edición, elegir en el menú 'apariencia' (arriba a la izquierda) la primera opción que es 'modificar tema'. Una vez que entres a la hoja de estilo te darás cuenta que están claramente identificadas las zonas de la página y el lugar donde se definen los colores.

Textos y fondo

Junto con elegir la tipografía que vas a usar, es recomendable pensar en qué color le vamos a aplicar y que color vamos a usar para el fondo. Es importante lograr una diferencia entre uno y otro que permita la legibilidad. Puede ser un fondo claro y letras oscuras o fondo oscuro con letras claras (he escuchado que muchos recomiendan esto último para textos en pantalla), pero lo importante es que haya suficiente diferencia de tono y saturación entre ambos.

Un texto gris oscuro sobre fondo negro no se lee fácilmente, son muy parecidos de luminosidad. Un texto verde fuerte sobre un fondo rojo fuerte tampoco se lee bien, pueden ser muy distintos en cuanto a matiz, pero muy parecidos de saturación y luminosidad. Además en este último caso se produce un fenómeno llamado vibración, en el que dos colores opuestos, de igual saturación y luminosidad, se 'pelean' el protagonismo. Particularmente prefiero colores bastante distintos de tono, pero sin llegar a extremos, porque queda demasiado contrastado. Creo que es mejor letras gris oscuro sobre fondo blanco, que letras totalmente negras sobre el mismo fondo.

Si vas a usar una fotografía de fondo del blog y el texto va a estar dispuesto sobre ella, preocúpate que tengan la suficiente diferencia para que se pueda leer con claridad. Personalmente creo que los textos quedan mejor sobre un fondo plano o una imagen de fondo que sea muy simple.

Un ejemplo de aplicación de color de fondo y de texto es el siguiente:

body {
background:#fff;
color:#6f6df9;

}

Este código define como blanco el background del body, es decir, el fondo de toda la página. Además establece como color el #6f6df9, que será el color de los textos en toda la página, a menos que más abajo se declare lo contrario para algún texto en particular.

Enlaces

Es importante que los lectores de tu blog puedan identificar, claramente, cuando un texto se trata de un enlace. Para esto es importante que decidas el aspecto de estos y que, una vez tomada esa decisión, mantengas el mismo criterio para todos los otros links de la página. Los enlaces pueden tener cuatro estados, cada uno con su propio aspecto para poder distinguirlos. Estos son: activo (a o a:link), con el cursor encima (a:hover), haciendo click sobre él (a:active) y visitado (a:visited). Para cada uno de ellos puedes definir un color particular, pero en general basta con definir a, a:hover y a:visited. Con eso ya queda claro. Un ejemplo de sintaxis es el siguiente:

a{
color:#6600ff;
text-decoration:none;

}

a:hover{
color:#6600ff;
text-decoration:underline;
}

a:visited{
color:#666699;
}

En este ejemplo el color del enlace a y de a:hover es el mismo, pero se diferencian porque, al pasar el cursor arriba, el enlace aparece subrayado. Eso el lo que define el atributo underline.

Sobre la elección de los colores

Como decía al comienzo del post, la decisión de la paleta de colores que vayas a usar es absolutamente personal. Sólo como sugerencia van los siguientes consejos:

1.- Selecciona una paleta restringida, de no muchos colores (tres, cuatro o cinco). Trata que sean armónicos entre si.

2.- Puedes elegir colores suaves o colores fuertes, pero mezclarlos puede ser contraproducente (o valiente... según).

3.- Un criterio para seleccionar colores puede ser el tema de tu blog. Si es sobre ecología puedes privilegiar los verdes, si es sobre música rock puedes usar negros y rojos (por alguna razón los sitios del tema los usan). Si es de tecnología no tengo sugerencias ;-)

Recursos

Como una manera de ayudar a hacer una elección adecuada, incluyo a continuación enlaces a algunos recursos sobre color:

- ColorBlender http://colorblender.com/
- Paletteman http://www.paletteman.com/
- Color Palette http://www.degraeve.com/color-palette/
- Color Picker http://www.degraeve.com/reference/color.php

¡Buena suerte!

Fuentes
http://es.wikipedia.org/wiki/Colores_HTML
http://www.correodelmaestro.com/anteriores/2002/noviembre/1anteaula78.htm

Etiquetas:

2 recursos más

Enviado por el 11/07/2007 a las 11:25 AM
Cristian Labarca

hay un par de recursos muy buenos sobre colores, el que más ocupo es:

http://www.colourlovers.com/

Y el otro es la interpretacion de adobe al sitio anterior

http://kuler.adobe.com/ 


deveria haber

Enviado por el 11/07/2007 a las 03:56 PM
Joaquin Souyris

Un blidget con link o recursos, para bligoo seria bueno ;)

Estos link que habeses vamos mencionando, todos recopilados y ordenados en este blidget. 


asodiuaidoaudo

Enviado por aasdada el 05/09/2007 a las 11:19 AM
sadddddaaaaaaaaa

Voto por Joaquin !!!!

Enviado por el 11/07/2007 a las 08:21 PM
Leonardo Maldonado
Hay que crear el blidget que vaya resumiendo los links a recursos para el diseño

Buena idea

Enviado por el 13/07/2007 a las 11:36 AM
Daniel Rojas
Estamos recopilado material y pronto lo pondremos todo junto. Saludos.






Suscribirse a los comentarios de este artículo en RSS