C贸mo hacer una paleta de color: Trucos + herramientas top

C贸mo pasar de esto: una combinaci贸n de colores fea, a esto: una combinaci贸n de colores agradable.

驴Quieres hacer mejores paleta de color y no sabes c贸mo? Intentar茅 que despu茅s de leer este art铆culo puedas hacer tu propia paleta de color con muy buenos resultados.

Te contar茅 un secreto鈥 La imagen de la izquierda la hice cuando empec茅 a estudiar dise帽o gr谩fico. S铆, lo s茅, es terrible, pero por m谩s que lo intentaba, no consegu铆a usar colores que encajasen. Yo sab铆a que esos colores no funcionaban pero no sab铆a arreglarlo.聽

As铆 que, claro, tuve que pillarle el truco a los colores si quer铆a mejorar mis dise帽os. Esto que te cuento ahora es la base de lo que hace que sepa hacer mis propias paletas de color y que funcionen.

As铆 que, ya sabes, ded铆cale un momento a leer los trucos y ver谩s como mejoran las tuyas tambi茅n.

5 Trucos para hacer una paleta de colores ideal

Antes de nada, no te saltes este p谩rrafo, que te estoy viendo que quieres pasar directamente a los trucos, pero necesitas leer antes que hay tres tipos de colores:

  • El base: se refiere al color que va a tener m谩s presencia en los dise帽os en cuesti贸n de cantidad (normalmente se trata del fondo). Es un color que en la nomenclatura oficial se llama 鈥渄ominante鈥.
  • El acento de color: es el color que va a resaltar m谩s sobre todos los dem谩s. Usarlo de forma puntual, ocupando poca superficie dar谩 un buen equilibrio a la composici贸n y dirigir谩 la atenci贸n a donde t煤 quieras. Oficialmente es el color 鈥渢贸nico鈥.
  • Los mediadores: estos colores son un puente entre tu color base y de acento de color. Dependiendo de la sensaci贸n a transmitir pueden ser m谩s claros o m谩s oscuros, m谩s vibrantes o m谩s apagados, m谩s similares o m谩s contrastados.

1. Desatura todos los colores salvo el de acento

Con esto resolver谩s el problema principal de las combinaciones. Lo m谩s probable es que tengan demasiada saturaci贸n y est茅n compitiendo todos por ser el se帽or del anillo y todos sabemos que solo puede haber un 煤nico se帽or del anillo. As铆 que les tienes que decir que se calmen baj谩ndoles la saturaci贸n, apagarlos un poco no los hace menos alegres, as铆 que no tengas miedo. De hecho, es un poco lo que puedes hacer con聽Cohesive colors, una herramienta para armonizar paletas.

Ejemplo:聽Primero tienes una paleta saturada y despu茅s, los mismos colores pero menos saturados 驴cambia, verdad? 隆Pues todav铆a podemos mejorar mucho m谩s!

2. Usa solo 2/3 del c铆rculo crom谩tico

Esto suele ser mano de santo tambi茅n. Si quieres hacer una paleta con varios colores, necesitas que tengan algo en com煤n para que trabajen bien. En el caso de los colores lo que los hace trabajar mejor es su cercan铆a en el c铆rculo crom谩tico. Puedes hacerlo mediante:

Colores an谩logos: Son los colores que est谩n contiguos en el espectro lum铆nico y si los escoges de esta forma, generar谩n paletas de forma armoniosa y balanceada.

Ejemplo: En este caso, primero ves que sigue habiendo muchos colores y sigue siendo una composici贸n muy ruidosa, cosa que en la segunda imagen, pasa menos porque los colores est谩n m谩s cercanos entre ellos en el c铆rculo crom谩tico.

Colores complementarios: El truco de los dos tercios solo se rompe cuando quieres una paleta de alto contraste y gran impacto. En ese caso lo que necesitas es una paleta de colores complementarios. Son paletas que usan colores opuestos en el c铆rculo crom谩tico. Aun as铆, para que funcionen bien, conviene que sean tambi茅n opuestos en luminosidad y/o saturaci贸n (y que sean menos colores).

Ejemplo: Primero tenemos varios colores formando una paleta de an谩logos pero ocupando m谩s de 2/3 del c铆rculo crom谩tico. En la segunda, tenemos dos colores complementarios que se apoyan mutuamente.

3. Usa menos colores

Este es un consejo no aplicable en todos los casos, pero reducir la paleta a 3 colores suele ser una soluci贸n r谩pida y efectiva para que tu paleta funcione. Digamos que es cortar por lo sano, si no hay m谩s colores no puede haber 鈥渕谩s problemas鈥, 驴no?聽

Una paleta de pocos colores es ideal si vas a usar colores muy vibrantes y contrastados (si no, todos los colores compiten por la atenci贸n y suele producir agobio si no est谩n bien usados).聽

Tambi茅n es una buena opci贸n si quieres dar una sensaci贸n minimalista. Especialmente si usas como colores base el blanco o negro y como acento, un color solo.

Ejemplo: Primero encontramos la composici贸n multicolor de colores vibrantes. En la segunda, solo hemos tenido que dejar el base y el acento de color. Es una paleta atrevida y potente y ya no da sensaci贸n 芦amateur禄.

4. Ajusta la proporci贸n de la superficie

Si quitar colores te parece una medida demasiado dr谩stica, intenta ajustar la cantidad de color usado seg煤n las funciones del color: Que el color base ocupe la mayor parte de la composici贸n, que el color de acento solo est茅 en dos o tres lugares, y que los mediadores no sean demasiado llamativos.

Ejemplo: En la primera imagen el color base es demasiado llamativo y se come a los dem谩s colores. Por eso, cuando lo cambiamos por otro menos llamativo, la composici贸n respira m谩s.

5. Haz degradados

Son infalibles, el ojo los distingue entre el resto de colores y generan sensaciones muy agradables a la vista. As铆 que 隆no los subestimes!

Ejemplo: Puedes hacer un degradado que vaya de un color a otro como de violeta a magenta o un degradado monocromo como el rosa de la derecha.

Las 7 mejores herramientas para hacer paletas seg煤n lo que necesites:

Para hacer una paleta a tu gusto

Coolors: La herramienta que m谩s uso yo. Permite hacer paletas de varios colores con sugerencias autom谩ticas que puedes ir a帽adiendo y quitando seg煤n te gusten. Tambi茅n permite explorar otras predise帽adas si vas con prisa.

Para hacer una paleta desde cero

Colour Code: Con esta herramienta puedes hacer paletas de color a帽adiendo hasta ocho colores uno a uno de una forma muy curiosa. Proporciona total libertad de escoger colores pero tambi茅n te da control absoluto (muy buena combinaci贸n de variables).

Para coger paletas predise帽adas

Colrd: Te recomiendo esta porque otras herramientas suelen ofrecer paletas de color prehechas muy limitadas (lo m谩s normal es 4, y est谩 bien, pero a mi me gusta tener m谩s variedad). Adem谩s permite customizarlas en la propia p谩gina.

Para coger los colores de una imagen

Adobe Color: A ver, realmente la he colocado aqu铆 porque esto lo hace muy bien: te deja escoger colores y degradados de una imagen y adem谩s te da control para personalizarlos. Pero realmente es una herramienta complet铆sima que te permite hacer鈥 todo. Adem谩s de lo anterior, puedes empezar paletas desde cero, usa los tipos de relaci贸n entre colores que te he comentado m谩s arriba y tambi茅n tiene paletas de tendencias鈥.

Para inspirarte (que no copiar)

Pinterest: Si no sabes por d贸nde empezar, suele ser un buen comienzo porque hay de todo para todos. Basta que busques 鈥減aleta de colores鈥 y lo que sea que te quieras centrar. Tambi茅n puedes mirar por Behance si quieres ver paletas aplicadas a trabajos gr谩ficos profesionales.

Para comprobar el contraste

Contrast Ratio: Aqu铆 puedes comprobar el contraste de tu color de acento con tu color de fondo. Al poner los dos, la web te dar谩 una nota de contraste, creo que siempre es m谩s que recomendable que sea mayor de 4.5 (aunque la herramienta te guiar谩). Si quieres, tambi茅n puedes usar Color Safe, una web que permite crear paletas teniendo esto en cuenta desde el principio.

De hecho, te dejo aqu铆 otro post sobre los colores de las redes sociales en el que aplico esta herramienta con resultados sorprendentes.

Para comprobar su distorsi贸n crom谩tica

Color Blindness: Es r煤stica y est谩 en ingl茅s pero te servir谩 para visualizar tu paleta con distintos tipos de daltonismo. Es posible que al hacerlo te parezca que es todo igual, por eso, siempre es recomendable a帽adir elementos que ayuden a distinguir los colores (por ejemplo: texturas distintas, una cruz o un tic al lado del texto鈥) Te dejo esta web para aprender m谩s sobre colores y daltonismo que tambi茅n genera paletas teniendo esto en cuenta.

驴C贸mo aplicar la gama de color que has generado?

Normalmente las paletas de color suelen generarse y dar los c贸digos hexadecimales de los colores escogidos as铆 que basta con copiar y pegar en la plataforma que est茅s. Pero recuerda guardar la paleta por si la necesitas en otro momento. Y procura mirar c贸mo se ve en otras pantallas, porque cambiar谩 mucho.

A la hora de colocarlos en tu composici贸n, simplemente recuerda las tres funciones de los colores que te expliqu茅 antes de los trucos. Sabiendo eso, te resultar谩 m谩s f谩cil distribuirlos.

Te dejo esta infograf铆a para que tengas todo a mano y puedas echarle un ojo cuando est茅s haciendo paletas 馃檪

firmado, Beatriz

No te cortes, 隆comparte este post!聽馃槏馃憞

Compartir en facebook
Facebook
Compartir en twitter
Twitter
Compartir en linkedin
LinkedIn

Y si has aprendido, probablemente te interese esto tambi茅n…

Dos manos se agitan al aire con el logo de TikTok tatuado en la mu帽eca
驴Por qu茅 TikTok es tan adictivo?

TikTok no la usan solo los teenagers, es una de las redes sociales m谩s consumidas. Aqu铆 te explico, desde el dise帽o, por qu茅 no te puedes despegar de ella.