Cuando estás revisando tu News Feed, ¿qué tiende a llamar tu atención? Lo más probable es que sean videos de YouTube, imágenes, GIF animados y otro contenido visual, ¿verdad?
Si bien el contenido basado en texto siempre es importante cuando se buscan respuestas a una pregunta, la creación de imágenes como infografías, cuadros, gráficos, GIF animados y otras imágenes compartibles puede hacer maravillas para captar la atención de sus lectores y mejorar su artículo o informe.
Sé lo que podrías estar pensando: «No sé cómo diseñar imágenes increíbles. No soy creativo».
Hola. Soy Bethany, y seré la primera en decirte que no soy naturalmente artística. Y, sin embargo, encontré una fortaleza en la visualización de datos en HubSpot, donde pasé la mayor parte de mis días creando infografías y otras imágenes para publicaciones de blog.
Entonces, aunque no diría que soy naturalmente artístico, aprendí a crear contenido visual convincente. Tu también puedes.
Y puedes hacerlo aprendiendo la teoría del color. Considere este su curso introductorio, y cubriremos los siguientes temas:
¿Qué es la teoría del color?
La teoría del color es la base de las reglas y pautas principales que rodean el color y su uso en la creación de imágenes estéticamente agradables. Al comprender los conceptos básicos de la teoría del color, puede comenzar a analizar la estructura lógica del color para crear y usar paletas de colores de manera más estratégica. El resultado significa evocar una emoción, vibra o estética particular.
Si bien existen muchas herramientas para ayudar incluso a los más inartísticos de nosotros a crear imágenes convincentes, las tareas de diseño gráfico requieren un poco más de conocimientos básicos sobre principios de diseño.
Tome elegir los colores correctos, por ejemplo. Es algo que puede parecer fácil al principio, pero cuando estás mirando una rueda de colores, desearás tener información sobre lo que estás viendo.
Siga leyendo para conocer los términos, las herramientas y los consejos que debe conocer para elegir los mejores colores para sus diseños.
Teoría del color 101
Primero volvamos a la clase de arte de la escuela secundaria para discutir los conceptos básicos del color.
¿Recuerdas haber oído sobre colores primarios, secundarios y terciarios? Son bastante importantes si quieres entender, bueno, todo lo demás sobre el color.
Colores primarios
Los colores primarios son aquellos que no puede crear combinando dos o más colores juntos. Se parecen mucho a los números primos, que no se pueden crear multiplicando otros dos números juntos.
Hay tres colores primarios:
Piense en los colores primarios como sus colores primarios, anclando su diseño en un esquema de color general. Cualquiera de estos colores o una combinación de estos puede brindarle barandas a su marca cuando se mueva para explorar otros tonos, tonos y matices (hablaremos de ellos en solo un minuto).
Al diseñar o incluso pintar con colores primarios, no se sienta restringido solo a los tres colores primarios enumerados anteriormente. El naranja no es un color primario, por ejemplo, pero las marcas ciertamente pueden usar el naranja como su color dominante (como nosotros en HubSpot lo sabemos bastante bien).
Saber qué colores primarios crear el naranja es su boleto para identificar los colores que podrían combinarse bien con el naranja, dado el tono, tono o tinte correctos. Esto nos lleva a nuestro próximo tipo de color …
Colores secundarios
Los colores secundarios son los colores que se forman al combinar cualquiera de los dos colores primarios enumerados anteriormente. Consulte el modelo de teoría del color anterior: ¿ve cómo cada color secundario es compatible con dos de los tres colores primarios?
Hay tres colores secundarios: naranja, púrpuray verde. Puede crear cada uno con dos de los tres colores primarios. Estas son las reglas generales de la creación de color secundario:
- Rojo + amarillo = naranja
- Azul + rojo = Púrpura
- Amarillo + azul = Verde
Tenga en cuenta que las mezclas de colores anteriores solo funcionan si usa la forma más pura de cada color primario. Esta forma pura se conoce como color matiz, y verá cómo estos tonos se comparan con las variantes debajo de cada color en la rueda de colores a continuación.
Colores terciarios
Los colores terciarios se crean cuando mezcla un color primario con un color secundario.
A partir de aquí, el color se vuelve un poco más complicado. Y si desea aprender cómo los expertos eligen el color en su diseño, primero debe comprender todos los demás componentes del color.
El componente más importante de los colores terciarios es que no todos los colores primarios pueden coincidir con un color secundario para crear un color terciario. Por ejemplo, el rojo no se puede mezclar en armonía con el verde y el azul no se puede mezclar en armonía con el naranja; ambas mezclas darían como resultado un color ligeramente marrón (a menos, por supuesto, que sea lo que estás buscando).
En cambio, los colores terciarios se crean cuando un color primario se mezcla con un color secundario que viene junto a él en la rueda de colores a continuación. Hay seis colores terciarios que se ajustan a este requisito:
- Rojo + púrpura = Rojo purpura (magenta)
- Rojo + naranja = Naranja roja (bermellón)
- Azul + púrpura = Azul púrpura (Violeta)
- Azul + verde = Azul verde (verde azulado)
- Amarillo + naranja = Amarillo naranja (ámbar)
- Amarillo + verde = Amarillo verde (monasterio)
La rueda de la teoría del color
Ok genial. Entonces, ahora sabe cuáles son los colores «principales», pero usted y yo sabemos que elegir combinaciones de colores, especialmente en una computadora, implica un rango mucho más amplio que 12 colores básicos.
Este es el ímpetu detrás de la rueda de colores, un gráfico circular que traza cada color primario, secundario y terciario, así como sus respectivos tonos, matices, tonos y tonos. Visualizar los colores de esta manera le ayuda a elegir esquemas de colores al mostrarle cómo cada color se relaciona con el color que viene al lado en una escala de colores del arco iris. (Como probablemente sepa, los colores de un arco iris, en orden, son rojo, naranja, amarillo, verde, azul, índigoy Violeta.)
Al elegir colores para un esquema de colores, la rueda de colores le brinda la oportunidad de crear colores más brillantes, más claros, más suaves y más oscuros al mezclar blanco, negro y gris con los colores originales. Estas mezclas crean las variantes de color que se describen a continuación:
Matiz
Hue es casi sinónimo de lo que realmente queremos decir cuando dijimos la palabra «color». Todos los colores primarios y secundarios, por ejemplo, son «matices».
Es importante recordar las tonalidades cuando se combinan dos colores primarios para crear un color secundario. Si no usa los tonos de los dos colores primarios que está mezclando, no generará el tono del color secundario. Esto se debe a que un tono tiene la menor cantidad de otros colores dentro. Al mezclar dos colores primarios que contienen otros tonos, tonos y sombras dentro de ellos, técnicamente está agregando más de dos colores a la mezcla, lo que hace que su color final dependa de la compatibilidad de más de dos colores.
Si mezclaras los tonos de rojo y azul, por ejemplo, obtendrías púrpura, ¿verdad? Pero mezclar un tinte de rojo con el tono de azul, y obtendrás un púrpura ligeramente teñido a cambio.
Sombra
Puede reconocer el término «sombra» porque se usa con bastante frecuencia para referirse a versiones claras y oscuras del mismo tono. Pero en realidad, un tono es técnicamente el color que obtienes cuando agregas negro a cualquier tono dado. Los distintos «tonos» solo se refieren a la cantidad de negro que está agregando.
Tinte
Un tinte es lo opuesto a un tono, pero las personas no suelen distinguir entre el tono de un color y el tono de un color. Obtiene un tinte diferente cuando agrega blanco a un color. Por lo tanto, un color puede tener una gama de tonos y matices.
Tono (o Saturación)
También puede agregar blanco y negro a un color para crear un tono. El tono y la saturación esencialmente significan lo mismo, pero la mayoría de las personas usarán la saturación si hablan de la creación de colores para imágenes digitales. El tono se usará más a menudo para pintar.
Teoría del color aditivo y sustractivo
Si alguna vez ha jugado con el color en cualquier programa de computadora, probablemente haya visto un módulo que enumera colores RGB o CMYK con algunos números al lado de las letras.
¿Alguna vez se preguntó qué significan esas letras?
CMYK
CMYK significa Cian, Magenta, Amarillo, Clave (Negro). Esos también son los colores que figuran en los cartuchos de tinta para su impresora. Eso no es casualidad.
CMYK es el modelo de color sustractivo. Se llama así porque tienes que sustraer colores para llegar al blanco. Eso significa que lo contrario es cierto: cuantos más colores agregue, más se acercará al negro. Confuso, ¿verdad?
Piense en imprimir un trozo de papel. Cuando coloca por primera vez una hoja en la impresora, generalmente imprime en un trozo de papel blanco. Al agregar color, estás bloqueando el paso de las longitudes de onda blancas.
Luego, supongamos que debe volver a colocar esa hoja de papel impresa en la impresora e imprimir algo en ella nuevamente. Notarás que las áreas que se han impreso dos veces tienden a colores más cercanos al negro.
Me resulta más fácil pensar en CMYK en términos de sus números correspondientes. CMYK funciona en una escala de 0 a 100. Si C = 100, M = 100, Y = 100 y K = 100, terminas con un color negro. Pero, si los cuatro colores son iguales a 0, terminas en blanco verdadero.
RGB
Los modelos de color RGB, por otro lado, están diseñados para pantallas electrónicas, incluidas las computadoras.
RGB significa rojo, verde, azul y se basa en modelo de color aditivo de ondas de luz Esto significa que cuanto más color tengas añadir, cuanto más te acercas al blanco. Para las computadoras, RGB se crea usando escalas de 0 a 255. Entonces, el negro sería R = 0, G = 0 y B = 0. El blanco sería R = 255, G = 255 y B = 255.
Cuando está creando color en una computadora, su módulo de color generalmente incluirá números RGB y CMYK. En la práctica, puede usar cualquiera de los dos para buscar colores, y el otro modelo de color se ajustará en consecuencia.
Sin embargo, muchos programas web solo le darán los valores RGB o un código HEX (el código asignado al color para CSS y HTML). Entonces, si está diseñando imágenes digitales o para diseño web, RGB es probablemente su mejor opción para elegir colores.
Siempre puede convertir el diseño a CMYK y hacer ajustes si alguna vez lo necesita para materiales impresos.
Ahora que tenemos todos los conceptos básicos de la teoría del color, hablemos sobre cómo usar este conocimiento recién descubierto para formar diseños que perfeccionen su marca y resuenen con su audiencia.
Probablemente hayas notado antes que algunos colores se ven muy bien juntos y otros, bueno, simplemente no. Los colores que elegimos pueden ayudar a mejorar un diseño, o pueden quitarle un diseño.
Cuando descubra cómo diseñar un gráfico, es importante recordar que la forma en que percibimos los colores depende del contexto en el que lo vemos.
1. Considere su contexto de color.
El contexto de color se refiere a cómo percibimos los colores a medida que contrastan con otro color. Mire los pares de círculos en el ejemplo a continuación para ver a qué me refiero.
El centro de cada uno de los círculos es del mismo tamaño, forma y color. Lo único que cambia es el color de fondo. Sin embargo, los círculos intermedios aparecen más suaves o brillantes dependiendo del color de contraste detrás de ellos. Incluso puede notar cambios de movimiento o profundidad solo en función de un cambio de color.
Esto se debe a que la forma en que usamos dos colores juntos cambia la forma en que lo percibimos. Por lo tanto, cuando elija colores para sus diseños gráficos, piense en cuánto contraste desea en todo el diseño.
Por ejemplo, si estuviera creando un gráfico de barras simple, ¿desearía un fondo oscuro con barras oscuras? Probablemente no. Lo más probable es que desee crear un contraste entre sus barras y el fondo en sí, ya que desea que los espectadores se centren en las barras, no en el fondo.
Sin embargo, elegir colores con alto contraste no siempre es tan difícil como elegir colores que se vean bien juntos.
Para mí, aquí es donde elegir el color es más complicado. Podría pasar horas eligiendo colores para una infografía simplemente porque lleva un tiempo sentir lo que se ve mejor juntos.
Sin embargo, en realidad, generalmente no tengo horas para dedicarme a elegir colores. (Y eso probablemente sería una pérdida de tiempo incluso si tuviera algunas horas).
Afortunadamente, existen reglas lógicas sobre cómo crear esquemas de color que funcionen juntos.
2. Consulte una rueda de colores para identificar colores análogos.
Los esquemas de color análogos se forman combinando un color principal con los dos colores directamente junto a él en la rueda de colores. También puede agregar dos colores adicionales (que se encuentran al lado de los dos colores exteriores) si desea utilizar un esquema de cinco colores en lugar de solo tres colores.
Las estructuras análogas no crean temas con colores de alto contraste, por lo que generalmente se usan para crear un diseño más suave y menos contrastante. Por ejemplo, podría usar una estructura análoga para crear una combinación de colores con los colores de otoño o primavera.
Me gusta usar este esquema de color para crear paletas de colores más cálidas (rojas, naranjas y amarillas) o más frías (púrpuras, azules y verdes) como la siguiente. No hay un alto contraste entre estos colores, pero ¿no se ven bien juntos?
Probablemente usaría esta paleta para diseñar una imagen en lugar de una infografía o un gráfico de barras, ya que me gustaría que todos los elementos de la imagen se fusionen bien.
3. Consulte una rueda de colores para identificar colores complementarios.
Puede haberlo adivinado, pero un esquema de color complementario se basa en el uso de dos colores directamente uno frente al otro en la rueda de colores y los matices relevantes de esos colores.
El esquema de color complementario proporciona la mayor cantidad de contraste de color. Debido a esto, debe tener cuidado con la forma en que usa los colores complementarios en un esquema. Es mejor usar un color predominantemente y usar el segundo color como acentos en su diseño.
El esquema de color complementario también es ideal para cuadros y gráficos. El alto contraste lo ayuda a resaltar puntos importantes y conclusiones.
Sin embargo, si tuviera que usar estos colores en una infografía, probablemente necesitaría usar un color mucho más claro para el fondo real. ¿Te imaginas elegir una de las naranjas como fondo con azules como acentos y texto? Eso probablemente sería demasiado abrumador y difícil de leer.
4. Centrarse en colores monocromáticos en el mismo tono.
El uso de esquemas monocromáticos le permite crear un esquema de color basado en varios tonos y matices de un tono. Aunque carece de contraste de color, a menudo termina pareciendo muy limpio y pulido. También le permite cambiar fácilmente la oscuridad y la claridad de sus colores.
Me gusta usar esquemas de color monocromáticos para tablas y gráficos, pero solo cuando no es necesario crear un alto contraste. Sin embargo, los esquemas monocromáticos no tienden a «explotar», por lo que si está buscando un esquema de color que sea brillante y llamativo, este no es su mejor opción.
Echa un vistazo a todos los colores monocromáticos que caen bajo el tono rojo, un color primario.
5. Use un esquema de color triádico para crear un alto contraste.
Los esquemas de color triádicos ofrecen esquemas de color de alto contraste mientras conservan el mismo tono. Los esquemas de colores triádicos se crean al elegir tres colores que se colocan igualmente en líneas alrededor de la rueda de colores.
Los esquemas de colores de la tríada son útiles para crear un alto contraste entre cada color en un diseño, pero también pueden parecer abrumadores si todos sus colores se eligen en el mismo punto en una línea alrededor de la rueda de colores.
Para someter algunos de sus colores en un esquema triádico, puede elegir un color dominante y usar los otros con moderación, o simplemente someter los otros dos colores eligiendo un tono más suave.
El esquema de color triádico se ve muy bien en gráficos como barras o gráficos circulares porque ofrece el contraste que necesita para crear comparaciones.
Sin embargo, si estuviera usando este esquema de color para crear una infografía, sería más probable que eligiera un color como color de fondo, como el amarillo o el verde claro, y un color de contraste más oscuro como el color dominante. Entonces podría usar los otros tres colores como acentos en todo momento. Al cambiar la intensidad de los colores en el diseño, puedo resaltar puntos importantes y conclusiones.
6. Cree un esquema de color complementario dividido.
Un esquema complementario dividido incluye un color dominante y los dos colores directamente adyacentes al complemento del color dominante. Esto crea una paleta de colores más matizada que un esquema de color complementario, al tiempo que conserva los beneficios de los colores contrastantes.
El esquema de color complementario dividido puede ser difícil de equilibrar bien porque a diferencia de los esquemas de color análogos o monocromáticos, todos los colores utilizados proporcionan contraste (similar al esquema complementario).
Me imagino usando el siguiente esquema de color complementario dividido de varias maneras. Podría usar esto en un cuadro o gráfico porque me da el contraste que necesito y los colores siguen siendo visualmente atractivos.
También podría imaginar el uso de estos colores en una infografía, aunque jugaría un poco más con los colores para ver qué pares se ven mejor juntos.
El aspecto positivo y negativo del modelo de color complementario dividido es que puede usar dos colores en el esquema y obtener un gran contraste … pero eso también significa que también puede ser difícil encontrar el equilibrio correcto entre los colores. Como resultado, puede terminar jugando un poco más con este para encontrar la combinación correcta de contraste.
No importa qué combinación de colores elija, intente y tenga en cuenta lo que necesita su gráfico. Si necesita crear contraste, elija un esquema de color que le dé eso. Por otro lado, si solo necesita encontrar las mejores «versiones» de ciertos colores, juegue con el esquema de color monocromático para encontrar los tonos y matices perfectos.
Descubrí que el simple hecho de comprender cómo se crean los esquemas de color ayuda mucho a elegir el esquema de color correcto. Si solo pienso: «¿Cuál es el objetivo de este gráfico?» Puedo comenzar a determinar cuánto (o qué poco) contraste necesito.
Recuerde, si crea una combinación de colores con cinco colores, eso no significa que tenga que usar los cinco. A veces, solo elegir dos colores de un esquema de colores se ve mucho mejor que agrupar los cinco colores en un gráfico.
7. Piense más allá de los preajustes, pero comience con un solo color.
Antes de enviarlo a crear imágenes increíbles para mejorar su blog y publicaciones en redes sociales, permítame darle algunos consejos adicionales para elegir colores:
- No te quedes con los preajustes. Casi todos los programas que usa le proporcionarán automáticamente colores preestablecidos. Supera los preajustes y explora el color por tu cuenta. No permita que el programa decida cómo usar el color en su diseño.
- Comience con un color que le guste. Cada vez que diseño algo, comienzo con un color y construyo el esquema de color a partir de ahí. Si intenta comenzar con más de un color, le resultará más difícil encontrar la armonía entre sus colores.
- Guarda tus esquemas de color. Si encuentra un color (o combinación de colores) que le guste, probablemente le sea útil más adelante. No sugeriría usar el mismo esquema de color para cada cuadro o gráfico que cree, pero siempre puede usar diferentes esquemas de diferentes maneras más adelante.
- La práctica hace la perfección. Cuanto más juegues con el color y practiques el diseño, mejor serás. Nadie crea su obra maestra la primera vez.
Herramientas de color
Ha habido mucha teoría e información práctica para comprender qué colores combinan mejor y por qué. Pero cuando se trata de la tarea real de elegir colores mientras diseña, siempre es una buena idea tener herramientas que lo ayuden a hacer el trabajo de manera rápida y fácil.
Afortunadamente, hay una serie de herramientas para ayudarlo a encontrar y elegir colores para sus diseños.
Adobe Color
Una de mis herramientas de color favoritas para usar mientras estoy diseñando cualquier cosa, ya sea una infografía o solo un gráfico circular, es Adobe Color (anteriormente Adobe Kuler).
Esta herramienta gratuita en línea le permite crear rápidamente esquemas de color basados en las estructuras de color que se explicaron anteriormente en esta publicación. Una vez que haya elegido los colores en el esquema que desea, puede copiar y pegar los códigos HEX o RGB en cualquier programa que esté utilizando.
También presenta cientos de esquemas de color prefabricados para que los explore y los use en sus propios diseños. Si es usuario de Adobe, puede guardar fácilmente sus temas en su cuenta.
Guía de color de Illustrator
Paso mucho tiempo en Adobe Illustrator, y una de mis funciones más utilizadas es la guía de color. La guía de color le permite elegir un color y generará automáticamente un esquema de cinco colores para usted. También le dará una gama de matices y tonos para cada color en el esquema.
Si cambia su color principal, la guía de color cambiará los colores correspondientes en ese esquema. Entonces, si ha elegido un esquema de color complementario con el color principal de azul, una vez que cambie su color principal a rojo, el color complementario también cambiará de naranja a verde.
Al igual que Adobe Color, la guía de color tiene varios modos preestablecidos para elegir el tipo de combinación de colores que desee. Esto le ayuda a elegir el estilo de esquema de color correcto dentro del programa que ya está utilizando.
Una vez que haya creado el esquema de color que desea, puede guardarlo en el módulo «Temas de color» para que lo use en su proyecto o en el futuro.
Guías de color preestablecidas
Si no es usuario de Adobe, probablemente haya utilizado productos de Microsoft Office al menos una vez. Todos los productos de Office tienen colores preestablecidos que puede usar y jugar para crear esquemas de color. PowerPoint también tiene varios ajustes preestablecidos de esquemas de color que puede usar para inspirarse en sus diseños.
La ubicación de los esquemas de color en PowerPoint dependerá de la versión que utilice, pero una vez que encuentre los «temas» de color de su documento, puede abrir las preferencias y ubicar los códigos RGB y HEX para los colores utilizados.
Luego puede copiar y pegar esos códigos para usar en cualquier programa que esté usando para hacer su trabajo de diseño.
Hay mucha teoría en esta publicación, lo sé. Pero cuando se trata de elegir colores, comprender la teoría detrás del color puede hacer maravillas sobre cómo usar el color. Esto puede facilitar la creación de imágenes de marca, especialmente cuando se utilizan plantillas de diseño donde puede personalizar los colores.
Nota del editor: esta publicación se publicó originalmente en octubre de 2018 y se ha actualizado para que sea exhaustiva.