Estamos en 2018 y cualquier persona con interés por el mundo digital necesita contar con una página web, tanto para su marca personal como para ofrecer sus servicios o su negocio. Visto este aumento del nicho de mercado interesado en contar con un propio sitio web, se han creado numerosas plataformas que prometen una web maravillosa en cinco minutos.
El problema es que esto no es tan cierto como parece y realmente es necesario contar con un mínimo de conocimientos sobre diseño. Por ejemplo, ¿sabes cómo combinar colores web? Puedes ser un hacha en programación, pero no tener ni un ápice de estilo estético. Crear una web requiere jugar con las tonalidades, los matices y los colores complementarios.
Pero no te preocupes, en este artículo te ofrezco todas las claves de estilos para combinar los colores de forma correcta y te muestro una serie de generadores de paletas y gamas de color.
¿Qué es la gama de colores?
Para dar respuesta a esta pregunta debemos recurrir a la teoría del color. La gama de color es la proporción de color que se puede representar con un determinado dispositivo o proceso. Es importante saber que existen limitaciones físicas que impiden que cualquier dispositivo muestre toda la información de color al ojo humano. Este es el motivo principal por el que los colores en una pantalla no son los mismos una vez impreso el documento. Por ejemplo, la gama de colores RGB de un monitor de ordenador es mucho más amplia que la de las tintas CMYK sobre el papel que usan las impresoras.
¿Y qué es una gama de color?
Aunque parezca el mismo concepto, no es lo mismo. Una gama de color hace referencia a la escala o la gradación de colores. Un mismo color puede contar con diferentes intensidades dentro de una misma gama.
Se pueden diferenciar hasta tres gamas:
- Gama de colores cálidos.
En esta gama podemos encontrar colores verdes amarillento, amarillo, naranja, rojo, púrpura y violeta. Se trata de colores que tienen cromáticamente hacia el rojo o el amarillo principalmente, pudiéndose incluso entremezclarse.
- Gama de colores fríos.
El azul es el color principal de esta gama de colores, pero no deben de contar con parte de este color necesariamente. Podemos encontrar colores como el verde esmeralda, el cyan, el violeta o tonos diferenciados de azul.
- Gama de colores quebrados.
La gama de colores quebrados está marcada por una mezcla de colores complementarios a partes desiguales y el blanco.
Cómo elegir los colores de una página web
El color es un elemento primordial en el diseño de una página web o un proyecto digital. Muchos diseñadores o profesionales del marketing tienden en elegir los colores que más les gustan personalmente. Sin embargo, aunque muchos piensen que tienen un buen sentido estético, no siempre es así.
Cuando se tienen dudas al respecto, es muy interesante dejarse guiar por la teoría del color, leer artículos sobre esta temática, tutoriales o utilizar herramientas que permitan obtener una combinación de colores adecuada. Además, según esta teoría, cada color tiene un significado. Sin embargo, no todos los colores significan lo mismo o generan las mismas sensaciones a cada persona.
Clasificación de los colores
Colores primarios
Considerados como únicos y que no se pueden crear con la mezcla de otros colores.
Primarios clásicos: azul, rojo y amarillo. Si se mezclan estos colores de manera correcta se obtienen todo el resto de tonos.
Primarios aditivos: rojo, verde y azul.
Primarios sustractivos: magenta, amarillo y cyan.
Colores secundarios
Se obtienen al mezclar partes iguales los dos primarios y son el naranja, el violeta y el verde.
Colores terciarios
Colores conseguidos por la mezcla de un primario y un secundario.
Generadores de paletas y gamas de color
Saber cómo combinar colores web de forma correcta es muy complicado. Por este motivo, puedes emplear estar herramientas, extensiones y plataformas tanto para saber cuáles son los tonos que mejor se adaptan a tu página como para saber cuáles son los colores idóneos que combinan entre ellos.
1. Extensión de temas de Adobe Color
Si estás acostumbrado a los programas de Adobe, esta opción es una de las más interesantes para no salir de estas herramientas diseñas. La extensión de Adobe Color ayuda a combinar los colores web de una forma armoniosa y atractiva. La herramienta está disponible tanto para Photoshop como para InDesign y After Effects, aunque también está disponible en su sitio web.
Si no se tiene mucha idea de los colores ni de la combinación que se va a implantar en la página web, Adobe Color permite conocer cuáles son los colores más populares en el momento entre los usuarios especializados en diseño. También se pueden obtener combinaciones o colores al azar o basados en otros temas publicados por el mismo usuario.
2. Coolors, la herramienta más rápida para obtener colores
Una herramienta muy interesante si no se tiene ningún color ni tono en la mente a la hora de realizar la página web ya que permite inspirarse de una forma maravillosa. Una vez que entras, solamente necesitas darle a la barra espaciadora para ir generando combinaciones de colores. Coolors también permite fijar un color que te guste para encontrar posibles combinaciones a partir de él.
Una vez que tengas los colores definitivos, esta herramienta para combinar colores web permite obtener el código de color para utilizar en herramientas de diseño como Photoshop. Coolors además tiene una extensión para Google Chrome muy útil si utilizas este navegador.
3. Cohesive Colors
Se trata de una herramienta con la que puedes crear esquemas y combinaciones de color web. Cohesive Colors tiene un funcionamiento muy sencillo y unos resultados muy interesantes. Una vez que entras en la página, puedes generar una combinación de colores totalmente alternativa. Una vez hecho puedes elegir cuántos tonos quieres obtener en dicha combinación. Parece que incluso no tiene un número máximo.
Una vez que tienes seleccionada tu combinación perfecta de colores, esta plataforma te ofrece una serie de resultados en función del color principal. Para facilitar el trabajo, Cohesive Colors permite copiar todos los códigos de color HTML de golpe o uno a uno.
4. Color Hunt Tab, la extensión más inspiracional
Suelo encontrar las extensiones de Google Chrome muy útiles e interesantes y este es el motivo principal por el que Color Hunt Tab me encante tanto, aunque no sea tan funcional como otras herramientas. Esta extensión quiere ayudarte a obtener la mejor combinación de colores web y cada vez que abras una nueva pestaña en el navegador podrás obtener una propuesta de tonos diferentes que te ayudarán a inspirarte cada día. Además, le das un poco más de color a la vida.
5. Color Hex, la herramienta para obtener colores web
Esta herramienta proporciona información sobre todos los colores disponibles, incluyendo los modelos de color RGB, HSL y CMYK, colores triádicos, colores monocromáticos y colores análogos calculados en la página de colores. Esta herramienta para la generación de colores web combinados genera un código CSS simple para cada uno de los tonos.
También puede utilizarse de manera contrario a la habitual. Es decir, introducir el código de color y conocer toda la información necesaria sobre él.
Otros recursos con Colores html
A la hora de crear una página web es muy importante tener en cuenta los códigos de colores html ya que se emplearán en todas las ocasiones que tengas que introducir algún elemento con color, a pesar de que utilices plantilla o cualquier formato de diseño sencillo.
Html Color Codes: La mejor tabla de colores
En esta web puedes encontrar la mejor tabla de colores con sus determinados códigos html. Se trata de un sitio muy sencillo, buen diseñado y que permite encontrar cuál es el código de terminados colores. Además, gracias al planteamiento que tiene se pueden encontrar combinaciones de colores sin problema.
En HTML Color Codes también se encuentra una tabla de diseño de materiales desarrollado por Google con colores de estilo casi plano y brillantes. A su vez, ofrecen una tabla de colores web seguros con 216 tonos que van verse de manera correcta en cualquiera de los navegadores principales.
Tabla de Colores HTML y RGB
En este sitio web puedes encontrar una tabla de colores completa y organizada según los tonos, con sus respectivos nombres, su código hexadecimal y su código RGB. Esta página no recoge todos los colores que existen pero tienen una buena exposición con los más importantes y los tonos más adecuados para una página web de cualquiera que sea su característica.
