Como Crear una Paleta de Colores para mi Web

Son muchas las ocasiones en las que hemos hablado sobre combinaciones de colores. En la mayoría de ellas usamos nuestro amigo el circulo cromático, pues aun teniendo más manejo sobre los colores, nunca está de más comprobar sus combinaciones sobre él. Es el primer paso para realizar una buena combinación y no podemos perderlo de vista.

Pero hoy vamos a dar un salto más, hoy no solo vamos a hablar de nuestra combinación de color, sino que nos adentraremos en el fabuloso mundo de las tonalidades. No sé si recordáis que siempre cuando hablamos de combinación, aclaramos que después habrá que decidir las tonalidad que serán las que vayan contigo o con tu marca, es decir, si tu combinación es con el color rojo, el rojo que hará que no seas igual que Coca Cola, la tonalidad de rojo que te hará único y que te diferenciará de la competencia.

Antes de comenzar, vamos a hacer un pequeño recorrido hasta llegar a la combinación de colores escogida.

Mi combinación de gama de colores

Como veníamos adelantando antes de comenzar hay que definir la combinación de colores que mejor encaja con mi marca o con el proyecto en si con el que estemos trabajando. Para ello, lo primordial es tener muy claro la psicología de los colores y escoger aquel que mas encaje con lo que quiero transmitir.

Sí, nos repetimos más que la cebolla, pero es que si escogemos un color cuya psicología nos ayuda, tendremos la mitad del trabajo hecho. Una vez que tenemos claro la elección de nuestro color y lo que este representa, debemos decidir que combinación es la que mejor va con lo que buscamos.

Aunque dependerá de para que elemento estamos diseñando, si lo necesitamos para un logotipo, lo normal es una combinación de dos colores, siempre está bien, tener otros colores en la guantera, por si en algún momento del proyecto necesitamos introducir más colores.

Además ten muy en cuenta para que estas haciendo la gama y que contrastes buscas: si vas a dibujar un fondo en la playa, piensa en combinación mar y tierra con algún detalle que resalte y si por el contrario buscas un paisaje florido, puede ser una buena opción tomar un color y sacarle su gama monocromática.

En este caso, para trabajar con una combinación en este artículo, vamos a partir de una combinación tríadica con el color rosa ( que hace mucho que no lo combinamos), pues necesitamos contraste y armonía y es la que mejor lo representa. Necesitamos fuerza, para que el rosa no quede flojo, pero sin perder la serenidad que este representa.

De esta manera partiremos del rosa y lo combinaremos con el verde y el azul. La combinación de esto dos últimos colores, es una de las que más cualidades positivas lleva aparejada, y al combinarlo con el rosa, tenemos una gama armónica.

gama-colores-circulo-cromatico

NOTA: En cada uno de los colores de las gamas, aparece la numeración web del color (#), que fácilmente podéis introducir en programas de edición Illustrator o Photoshop o directamente en código web.

Creemos nuestra paleta de colores

Hay algunos programas en línea que pueden ayudarte a realizar tu propia paleta de colores (y los veremos en otra ocasión), pero claro, al final hay cierta predefinición en eso, por lo que hoy vamos a crear nuestra paleta de colores de manera manual, consiguiendo así que sea totalmente única.

Puede parecer un complicado, pero no lo es. al igual que cuando tenemos una imagen que queremos retocar y jugamos con el brillo y la saturación, de la misma manera tenemos que pensar con los colores. Solo hay que seguir unos sencillos pasos, y la combinación casi sale sola!

1. Define cuantos colores quieres usar

Como íbamos adelantando, cuando hablamos de logotipo lo más normal es usar la combinación de dos colores, tres a lo sumo, pero cuando estamos haciendo la imagen de una marca, siempre conviene incluir en la paleta al menos cinco colores, pues nos vamos a encontrar con soportes muy distintos que van a necesitar que incluyamos mas colores de los que en un principio pensamos que eran los necesarios. Cuando diseñamos una web, no solo nos podemos quedar con los colores del logotipo, sino que habrá que ver los distintos elementos de la misma y definir otros colores de la paleta que podamos usar para esos elementos.

A parte, luego hay otros trabajos, como en nuestro caso las láminas tipográficas o los calendarios descargables en los que nos gusta jugar con un máximo de 4 o 5 colores, para que todo se entienda en la misma gama.

De cualquier manera, si quieres hacer una gama con diez colores… adelante! No seré yo quien te frene, pero si te diré que obviamente es mucho más complicado y que serán muy pocas las veces en las que las necesitaras.

Así partimos de los tres colores y vamos a añadirle por lo que queremos añadirle al menos dos colores mas… En el siguiente punto vemos como!

2. Añade tonos neutros

De esta forma, una manera muy sencilla de no equivocarte es añadir tonos neutros a la combinación. Si queremos crear una paleta con contraste no todos pueden ser brillantes ni todos neutros, tienen que haber diferencias entre ellos.

Así, es muy interesante añadir, lo que comúnmente llamamos como tonos neutros, grises, blancos, negros o marrones, son casi tonos estándar que aparecen en cualquier proyecto. De esta manera nos pueden servir como fondos o en aquellos lugares en los que no queremos que cobran más importancia de la que necesitan. Además, tienen la propiedad de poder aplicar calidez o frialdad, que a veces necesitamos para hacer perfecta la combinación.

gama-colores-paleta-web

El blanco y el negro, en general son mucho más fáciles de añadir, normalmente el uso del blanco viene casi solo para crear contraste y usar como fondo, y el negro es muy común en pequeños detalles incluso para las tipografías. Sin embargo no hemos de olvidar la fuerza de este color por lo que a veces nos puede ser de ayuda, incluir una tonalidad gris que consiga disminuir esa fuerza.

Los tonos marrones, beige, imprimen calidades de calidez y cercanía, por lo que pueden ser una buena opción cuando no queremos usar el blanco.

paleta-colores-neutros

3. Tonos, sombras y tintes

Ya tenemos decididos los colores que aparecerán en nuestra gama, pero claro, ahora viene el paso fundamental, decidir la tonalidad, el paso más importante, pero no por ello tiene que ser el más difícil.

Es cierto que puede dar cierto miedo, puesto que hay infinidad de tonalidades. Es lo mismo que cuando miras hacia el campo en pleno esplendor verde: podemos ver cientos de tonos de verdes, pero no debes conocerlos todos sino saber que existen y entre ellos escoger el que necesitas. Lo importante es no dejar que el ojo vea solo los colores puros, sino que sepa diferenciar una tonalidad de otra (que no significa conocerlas todas).

De esta manera, la clave para conseguir una buena gama de colores es jugar con esas tonalidades. Ya tenemos los colores puros, pues bien, si queremos dar contraste, porque no saturamos los dos secundarios e imprimimos brillo al principal.

Podemos practicar con ciertas tonalidades hasta que lleguemos a la que más se ajusta a lo que buscamos.

paleta-colores-web

paleta-color-rosa-combinaciones

paleta-neutra-color-rosa-combinaciones

gama-colores-rosa-combinacion

paleta-colores-fucsia

paleta-rosa-pastel

Un truco para crear una bonita paleta de colores ( mientras vamos entrenando al ojo )

Todo es entrenamiento, cuando hagáis muchas combinaciones de colores no necesitareis nada más que el circulo cromático, pero a veces, incluso cuando se tiene practica, se necesitan incentivos e inspiración. Una genial idea para conseguir una paleta de colores, es tomar como partida una imagen.

Si elegimos una buena imagen, en la que los colores se complementan y funcionan, solo hemos de tener maña con la elección de colores en ella. A partir de una fotografía podemos sacar una gama de colores y variaciones de la misma, dependiendo de hacia que colores queramos partir.

Mi consejo, tomar el color principal y su complementario y a partir de ahí ir decidiendo las distintas combinaciones con el circulo cromático. Si a la imagen le funciona en tu gama también va a funcionar.

paleta-colores-desde-imagen

gama-colores-con-imagen

como-crear-mi-gama-de-colores

Como veis, como todo es práctica y sobre todo no quedarse en la primera elección, los colores son muy versátiles y dan lugar a mucho juego, así que… a jugar!

Comentarios (13)

  1. Genial explicación, a mi Verónica lo que más me cuesta es precisamente decidirme, y ya si entramos en el tema de tonos me puedo volver loco.

    ¿Recomendarías, para casos como el mío, ir a paletas simples y sencillas a la hora de decidir paletas? En mi blog y marca personal he tomado ese camino.

    Saludos.

    1. Hola Ramón,

      Para problemas de decisión, yo siempre recomiendo el truco de las fotos. También hay programas en linea que te hacen paletas (y que veremos en otro artículo), pero si quieres diferenciarte un poco del resto elige una imagen que tenga tonos de tu agrado y haz una paleta con ella!

      Gracias por comentar.

      Un saludo!

  2. Justo lo que buscaba, tengo que hacer una paleta de colores y esto es justo lo que estaba necesitando, muchas gracias.
    Me acabo de volver fan de este bolg.

  3. Gran artículo, lo voy incluso a imprimir para tenerlo siempre presente, actualmente intento utilizar flat colors, ir a la paleta, pero hacerse una gama me parece muy interesante

  4. Buenas tardes, excelente cada uno vuestros aportes, y la devoluciones igual. Gracias. Ahora bien, escribo para consultar que programa de edición de fotografía profesional me recomiendan para Mac. Antes acostumbraba a trabajar con Photoshop, puedo seguir con el mismo?
    A la espera de una pronta respuesta. Saludos.

    1. Hola Adrian,

      Gracias por escribirnos! No trabajo con Mac, aunque tengo entendido que Photoshop también funciona. En cualquier caso, dejo abierto el hilo por si algún usuario de Mac se anima a participar.

      Un saludo!

  5. saludos gracias por compartir tan importantes estos conocimientos yo estoy en pañales con los colores siempre he deseado aprender a combinar colores. abrazos

  6. Construyo mi pagina hace unos días. Me encontré este Blog, y la verdad sigo buscando el diseño con todo los requerimientos que aquí nos enseñan. Gran Blog! Saludos desde Barranquilla, Col.

  7. Si ya tengo mi paleta de colores definida. Como defino, cual sera mi color de fondo, el color de la fuente, el color secundario para crear efectos hover?.. Esa siempre ha sido mi indecision. Las paletas de colores generalmente te muestras varias columnas de colores que combinan y se complementan, pero, como se decide cual color asignar a cada elemento de la pagina web?… Saludos y gracias desde Vzla

    1. Hola Liz,

      Muchas gracias por comentar. Aqui te dejo dos articulos que pueden ayudarte a la hora de tomar decisiones:
      https://www.silocreativo.com/diseno-elementos-web-para-mejorar-la-experiencia-usuario-ux/
      https://www.silocreativo.com/consejos-imprimir-color-los-elementos-web/
      Hay que tener en cuenta que es lo que queremos conseguir porque no todos los colores valen y hay que adaptar a paleta a la funcionalidad de cada elemento web.

      Un saludo!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *