jueves, 17 de noviembre de 2016

Paletas de color para diseño web, con códigos HTML

En esta entrada voy a recoger un buen puñado de paletas de color –un total de 40, cada una compuesta a su vez por 5 tonos diferentes-, ideales para servir de base para cualquier diseño web que vayamos a emprender. Junto a cada color he incluido el código hexadecimal (o HTML) del mismo, de forma que sea todavía más fácil usar estas paletas. Cualquiera de ellas hará que nuestra web luzca con un aspecto armónico, al menos en lo que a sus colores se refiere.


¿De dónde salen estas “armonías cromáticas” en forma de paleta? Es sencillo, y en realidad podemos crear todas las que queramos. Ello se debe a que los colores son susceptibles de agruparse siguiendo diversas “normas” o “reglas”. Dichas normas no son más que relaciones matemáticas proporcionales entre los colores, en función de su ubicación en la rueda cromática. Esto se ve muy bien gráficamente:


Paleta de color obtenida siguiendo una regla cromática de colores análogos.


Las reglas cromáticas, por tanto, no son más que una distribución regular de los colores en dicha rueda, y pueden ser de tipo análogo, monocromático, triadas, colores complementarios, compuestos, etc (en realidad podemos crear la norma que queramos). Básicamente, la cosa consiste en partir de un color en concreto, y a partir de él coger los restantes siguiendo alguna regla. El resultado será una paleta de colores armónica, compuesta por tonos que tendrán una relación entre sí de algún tipo. Debido a la “magia” de las matemáticas y la geometría, estos colores combinarán entre sí mucho mejor que si los cogemos al azar, de eso no hay duda.


La rueda de arriba procede de la web Adobe Color CC (antiguamente llamada Kuler). Hay varios sitios como ese, en los que de forma gratuita y muy fácilmente podremos crear paletas de color como las que veremos aquí. En un artículo anterior recogí las principales: “Combinar colores: dos herramientas web para elegir nuestras paletas de color“ (en realidad son 3). Dichas herramientas son particularmente útiles para el diseñador web, pues a partir de un color que nos interese por alguna razón podremos crear una paleta relacionada muy rápidamente.


Otra opción es valernos de programas que incluyen paletas de color “de serie”, por así decirlo, como por ejemplo Illustrator y otros programas de Adobe en sus últimas versiones. Pero, si no disponemos de dicho software, o sencillamente no queremos complicarnos la vida, también podemos coger directamente una de estas paletas que pongo a continuación. Será fácil usarlas pues he escrito debajo de cada tono su código hexadecimal, y por tanto están listas para aplicarse directamente en nuestros estilos CSS. Las hay de todo tipo: colores cálidos, fríos, suaves tonos pastel, de poco contraste y viceversa. Como dije al principio, cualquiera de ellas hará que nuestra web o blog luzca con colores bien combinados. La clave consiste en usar exclusivamente los colores de la paleta en nuestra web -y ningún otro más-, para los títulos, fondos, textos, etc.


Por último, para las personas interesadas en todo esto de la teoría del color, comentar que en este blog profesional existen otras entradas relacionadas. Basta con realizar una búsqueda poniendo la palabra “color” en el mismo.


Artículos relacionados: