Una guía completa de ruedas de color y esquemas de color

Cuando revisas tu sección de noticias, ¿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, tablas, gráficos, GIF animados y otras imágenes para compartir 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 impresionantes. No soy creativo».

Hola. Soy Bethany y seré la primera en decirte que no soy artística por naturaleza. 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, he aprendido a crear contenido visual convincente. Tu también puedes.

Y puedes hacer esto 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 para crear 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 crearla y usarla. paletas de colores de manera más estratégica. El resultado significa evocar una emoción, ambiente o estética particular.

Si bien existen muchas herramientas para ayudar incluso a los menos artísticos de nosotros a crear imágenes atractivas, las tareas de diseño gráfico requieren un poco más de conocimiento previo sobre criterios de diseño.

Tome la selección de la combinación de colores adecuada, por ejemplo. Es algo que puede parecer fácil al principio, pero cuando esté mirando una rueda de colores, deseará tener alguna información sobre lo que está mirando. Comprender cómo funcionan los colores juntos, el impacto que pueden tener en el estado de ánimo y la emoción, y cómo cambian la apariencia de su sitio web es fundamental para ayudarlo a destacarse entre la multitud, por las razones correctas.

Desde CTA efectivos hasta conversiones de ventas y esfuerzos de marketing, la elección correcta del color puede resaltar secciones específicas de su sitio web, facilitar la navegación de los usuarios o darles una sensación de familiaridad desde el primer momento en que hacen clic.

Pero no es suficiente simplemente seleccionar colores y esperar lo mejor: desde la teoría del color hasta los estados de ánimo y esquemas, encontrar los códigos de color HTML correctos e identificar colores accesibles en la web para productos y sitios web, cuanto más sepa sobre el uso del color, mejor. sus posibilidades son de éxito.

Siga leyendo para obtener nuestra guía de diseño sobre la teoría del color, las ruedas de colores y los esquemas de color para su sitio.

Teoría del color 101

Primero volvamos a la clase de arte de la escuela secundaria para discutir los conceptos básicos del color.

¿Recuerda haber oído hablar de los 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 puedes crear combinando dos o más colores. 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 principales, anclando su diseño en un esquema de color general. Cualquiera de estos colores, o una combinación de ellos, puede brindarle protección a su marca cuando se mueva para explorar otros matices, tonos y tintes (hablaremos de ellos en solo un minuto).

Cuando diseñe o incluso pinte con colores primarios, no se sienta restringido a solo 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 lo sabemos muy bien en HubSpot).

Saber qué colores primarios crear el naranja es su boleto para identificar los colores que pueden ir bien con el naranja, dado el tono, tono o matiz correcto. Esto nos lleva a nuestro siguiente tipo de color…

Colores secundarios

Los colores secundarios son los colores que se forman al combinar dos de los tres 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. Puedes crear cada uno usando dos de los tres colores primarios. Estas son las reglas generales de la creación de colores secundarios:

• 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. matizy 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 mezclas 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 eso 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 + morado = Rojo purpura (magenta)
• rojo + naranja = Naranja roja (bermellón)
• Azul + Morado = 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. Así que ahora sabes cuáles son los colores «principales», pero tú y yo sabemos que elegir Las combinaciones de colores, especialmente en una computadora, implican una gama mucho más amplia 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 matices, matices, tonos y matices. Visualizar los colores de esta manera lo ayuda a elegir combinaciones de colores al mostrarle cómo cada color se relaciona con el color que le sigue en una escala de colores del arco iris. (Como probablemente sepa, los colores del arcoíris, 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 prácticamente sinónimo de lo que realmente queremos decir cuando decimos la palabra «color». Todos los colores primarios y secundarios, por ejemplo, son «tonos».

Es importante recordar los tonos 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 en su interior. Al mezclar dos colores primarios que llevan otros tintes, tonos y matices en su interior, 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 tuviera que mezclar los tonos de rojo y azul, por ejemplo, obtendría púrpura, ¿verdad? pero mezcla un tinte de rojo con la tonalidad de azul, y obtendrás a cambio un púrpura ligeramente teñido.

Sombra

Es posible que reconozca 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. Los diversos «tonos» solo se refieren a la cantidad de negro que está agregando.

Tinte

Un matiz es lo opuesto a un matiz, pero la gente no suele distinguir entre el matiz de un color y el matiz de un color. Obtiene un tinte diferente cuando agrega blanco a un color. Por lo tanto, un color puede tener una gama de matices 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 están hablando de colores creados para imágenes digitales. El tono se usará más a menudo para pintar.

Con los conceptos básicos cubiertos, profundicemos en algo un poco más complicado, como la teoría del color aditiva y sustractiva.

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 enumeraba los colores RGB o CMYK con algunos números junto a las letras.

¿Alguna vez te has preguntado qué significan esas letras?

CMYK

CMYK significa cian, magenta, amarillo, clave (negro). Esos también son los colores que aparecen en los cartuchos de tinta de su impresora. Eso no es coincidencia.

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 en una hoja de papel. Cuando coloca una hoja por primera vez en la impresora, normalmente está imprimiendo en una hoja de papel blanco. Al agregar color, está bloqueando el paso de las longitudes de onda blancas.

Luego, supongamos que debe volver a colocar ese papel impreso en la impresora e imprimir algo en él nuevamente. Notará que las áreas que se han impreso dos veces tendrán 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 negro. Pero, si los cuatro colores son iguales a 0, terminas con un 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 el modelo de color aditivo de ondas de luz. Esto significa que cuanto más color agregar, 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 mostrará 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.

El significado del color

Junto con el impacto visual variable, los diferentes colores también conllevan un simbolismo emocional diferente.

• Rojo: generalmente asociado con el poder, la pasión o la energía, y puede ayudar a fomentar la acción en su sitio.
• Naranja: alegría y entusiasmo, por lo que es una buena opción para mensajes positivos.
• Amarillo: felicidad e intelecto, pero tenga cuidado con el uso excesivo
• Verde: a menudo relacionado con el crecimiento o la ambición, el verde puede ayudar a dar la sensación de que su marca está en aumento.
• Azul — tranquilidad y…