Combinar colores es una tarea que tendrás que hacer muy a menudo si te dedicas al diseño o a la ilustración. Si bien es algo que se puede aprender leyendo un poco sobre la teoría del color, hay personas a las que les cuesta un poco más, sobretodo cuando no son los colores básicos y entramos en terreno de colores terciarios o cuaternarios.
Existen muchas herramientas para ayudar a hacer esta labor fácil, Paletton es un generador de paletas de colores online muy completo y me ha gustado mucho todas las funcionalidades que posee. Así que atento, porque hoy te traigo un breve tutorial sobre cómo usarlo.
¿Qué encontrarás aquí?
Cómo usar Paletton para combinar colores
Cuando accedes a Paletton lo primero que verás son dos zonas claramente diferenciadas. La primera, a la izquierda muestra un círculo cromático. La segunda, a la derecha, es una paleta de colores resultado de los colores y opciones que escojamos.
En la parte superior, verás unas opciones básicas para deshacer acciones (undo), rehacer (redo) o elegir colores aleatoriamente (randomize). Ahora es cuando empieza lo verdaderamente divertido.
El círculo cromático en Paletton
El primer círculo cromático que verás en Paletton será el que viene por defecto y es monocromático (un solo color). Puedes deslizar con tu ratón ratón para señalar otros colores. En el interior de ese círculo, hay otro círculo menor con el que se puede ajustar la saturación de nuestro color. Si mantienes pulsada la tecla Shift, podrás mover cada una de la sombras individualmente.
Por supuesto, puedes cambiar el tipo de círculo cromático. Hay 5 diferentes: monocromático (1 color), colores adyacentes (3 colores), triada (3 colores) y tétrada (4 colores). Si quieres saber en qué consisten estos modos de armonía y combinación de colores, te aconsejo que le eches un vistazo a la teoría del color. El último tipo es aleatorio, donde puedes escoger entre 4 colores.
A parte de esto, también puedes afinar un poco más tu puntería con otras opciones con las que cuenta el círculo cromático:
-
- En la zona superior, justo a lado de los tipos de círculo cromático, puedes activar la casilla de “Añadir color complementario” (add complementary), que activará un color complementario al color principal.
-
- Tono (Hue). A la izquierda del círculo cromático verás la opción una opción para añadir el tono del color manualmente. Puedes poner un número desde 0 a 360.
-
- Color contrario (opposite). Si estas un color y quieres seleccionar su contrario, solo tienes que pulsar este botón.
-
- Selección manual de color RGB. Situado en la zona inferior izquierda del circulo cromático podrás añadir manualmente el número correspondiente al color RGB que quieres usar.
-
- Distancia del color secundario. Puedes establecer manualmente esta distancia que por defecto se encuentra en 30º. Obviamente, esta opción no está disponible para el modo monocromático por carecer de colores secundarios.
-
- Afinar el tono. Esta opción es bastante avanzada y permite ajustar mediante intervalos que van desde el -10 al +10 aspectos como el tono, la saturación, el brillo y el contraste del color.
Si nos fijamos en la zona inferior del círculo cromático veremos dos pestañas: “Colors” (en la que estamos) y presets. Al hacer click en este último, accederemos a los ajustes preestablecidos. Aquí, a partir del color que hayamos seleccionado en el círculo cromático, podremos aplicar otras opciones. Podemos convertir nuestra paleta a escala de grises, aplicar a tonos pastel, dar más brillo, etc y todo con un simple golpe de ratón.
La paleta de colores en Paletton
Una vez creado y ajustado nuestra combinación de colores en Paletton, podrás comprobar con más detalle como está quedando tu paleta de color en el lado derecho de la pantalla. Haciendo click en cada uno de los colores se abrirá una ventana con información detallada: color rgb hex, color rgb de 0 a 255, rgb en porcentaje, el tono, la luminosidad y el LAB.
En la zona inferior de la paleta de color, puedes escoger la simulación del modo de visualización (vision simulation), que dependiendo de lo que busques puede ser útil. Hay opciones para comprobar cómo personas con algún tipo de deficiencia visual verán los colores. También hay opciones para ver los colores desaturados o la simulación gamma. Mi consejo es que juegues un poco con estas opciones porque son muy interesantes, aunque es improbable que las uses con frecuencia en tu trabajo real.
Por último, debajo del panel de paleta de color, encontramos otras pestañas: preview (en la que estamos), examples y table/export.
En la pestaña de examples, encontraremos una serie de ejemplos de cómo se puede usar la combinación de colores que hemos elegido. Es muy útil para comprobar en un contexto real si nuestra paleta de colores funciona bien. Hay múltiples ejemplos que se agrupan en 3 grupos:
- Page Layout. Ejemplos de páginas web sencillas con la combinación de colores aplicada.
- Artwork. Ejemplos de plantillas artísticas. Hay composiciones de círculos, triángulos…
- Animated. Animaciones simples de objetos con la combinación de colores elegida.
Al entrar en la pestaña tables/export podremos exportar nuestra paleta de colores al formato que escojamos. Podemos exportar a formato web (html, css, xml…) y a formato imagen para poder usarlos en photoshop o gimp. Además, en color combination puedes ver una tabla detallada con la combinación de colores.
Video tutorial Paletton
He preparado un tutorial en vídeo sobre Paletton para que veas en movimiento todo lo explicado arriba. Espero que te guste
Como ves, crear una paleta de color con Paletton es muy sencillo. Solo necesitas saber el color base que vas a utilizar y el programa se encarga por sí sólo de hacer la combinaciones de color necesarias. Por supuesto no es la única herramienta de este tipo que existe y es posible que en próximos artículos veamos otras. Y tu, ¿Conoces alguna herramienta para combinar colores?
