Tecnología publicitariaMarketing de contenidoHerramientas de marketingCapacitación en ventas y marketing

Por qué nuestros ojos necesitan esquemas de paleta de colores complementarios ... y dónde puede hacerlos

¿Sabías que en realidad hay ciencia biológica detrás de cómo dos o más colores se complementan entre sí? No soy oftalmólogo ni optómetra, pero intentaré traducir la ciencia aquí para gente sencilla como yo. Comencemos con el color en general.

Los colores son frecuencias

Una manzana es roja… ¿verdad? Bueno en realidad no. La frecuencia con la que la luz se refleja y se refracta en la superficie de una manzana la hace detectable, nuestros ojos la convierten en señales y la envían a nuestro cerebro, donde la identificamos como "roja". Uf… me duele la cabeza solo de pensarlo. Sin embargo, es cierto... el color es simplemente una frecuencia de luz. Aquí hay una vista del espectro electromagnético y las frecuencias de cada color:

El color y el espectro electromagnético

Esta es exactamente la razón por la que la luz blanca apuntada a un prisma produce un arco iris. Lo que realmente está ocurriendo es que el cristal está cambiando la frecuencia de la longitud de onda a medida que la luz se refracta:

Prisma
El prisma de cristal dispersa la luz blanca en muchos colores.

Tus ojos son detectores de frecuencia

Su ojo es realmente un detector de frecuencia para el rango de frecuencias de color en el espectro electromagnético. Su capacidad para detectar colores ocurre a través de diferentes tipos de conos en la pared de su ojo que luego se conectan a sus nervios ópticos. Cada rango de frecuencia es detectado por algunos de estos conos, luego se traduce en una señal a su nervio óptico, enviada a su cerebro, donde se identifica.

¿Alguna vez notó que puede mirar durante mucho tiempo algo con un contraste realmente alto, mirar hacia otro lado y continuar viendo una imagen residual que no coincide con los colores originales que estaba mirando? Digamos que es un cuadrado azul en una pared blanca:

Después de un tiempo, las células del ojo que procesan la luz azul se fatigarán, lo que debilitará ligeramente la señal que envían al cerebro. Dado que esa parte del espectro visual está ligeramente suprimida, cuando miras una pared blanca después de mirar el cuadrado azul, verás una imagen secundaria de color naranja tenue. Lo que está viendo es el espectro de luz blanca de la pared, menos un poquito de azul, que su cerebro procesa como naranja.

Teoría del color 101: cómo hacer que los colores complementarios funcionen para usted

Si esa fatiga no sucedió, nuestros ojos y cerebros no tienen que esforzarse tanto para interpretar las múltiples longitudes de onda (por ejemplo, colores) que están viendo.

Ruido visual versus armonía

Hagamos una analogía de sonido versus color. Si escuchara diferentes frecuencias y volúmenes que no fueran complementarios entre sí, lo consideraría como ruido. Esto no es diferente al color, donde el brillo, el contraste y el color detectados pueden ser visualmente ruidoso o complementario. Dentro de cualquier medio visual, queremos trabajar hacia la armonía.

Es por eso que no ves un extra en el fondo de una película con una camisa roja brillante. Y es por eso que los decoradores de interiores se esfuerzan por encontrar colores complementarios en las paredes, los muebles, el arte y otras características de la habitación que están diseñando. El color es fundamental para crear el estado de ánimo que adquiere el visitante cuando entra en él en función de lo fácil que sea para su cerebro interpretar los colores.

paleta de color es el equivalente a montar una banda en hermosa armonía. Y así como las voces y los instrumentos ensamblados se alinean estrechamente en volumen y frecuencia ... también lo hacen los colores complementarios de su paleta de colores. El diseño de la paleta de colores es verdaderamente una forma de arte para los profesionales que han ajustado con precisión su detección de color, pero también es absolutamente una ciencia computacional porque las frecuencias complementarias se pueden calcular.

Más sobre armonías pronto… volvamos a la teoría del color.

Colores RGB

Los píxeles dentro del espectro digital son combinaciones de rojo, verde y azul. Rojo = 0, verde = 0 y azul = 0 se muestra como complejo de salvador blanco y rojo = 255, verde = 255 y azul = 255 se ve como negro. Todo lo que hay en el medio es de un color diferente compuesto por los tres. Los conceptos básicos para calcular un color complementario son bastante simples ... simplemente reste los valores RGB de 255 para obtener el nuevo Valor RGB. He aquí un ejemplo:

La diferencia en esta frecuencia de luz entre el naranja y el azul está lo suficientemente alejada como para contrastar, pero no tan lejos que sea difícil de interpretar para nuestros ojos. ¡Las frecuencias de color son complementarias y agradables para nuestros receptores!

Calcular un color es fácil ... calcular 3 o más colores complementarios requiere que calcule cantidades equivalentes entre cada una de las opciones. Es por eso generadores de esquemas de paleta de colores ¡Ven tan útil! Con muy pocos cálculos necesarios, estas herramientas pueden proporcionarle varios colores que se complementan entre sí.

La rueda de color

La comprensión de la relación entre los colores se visualiza mejor utilizando una rueda de colores. Los colores se organizan en un círculo en función de su frecuencia relativa. La distancia radial es la saturación del color y la posición azimutal en el círculo es el matiz del color.

La rueda de color

Dato curioso: Sir Isaac Newton desarrolló por primera vez la rueda de colores en 1665, una base para sus experimentos con prismas. Sus experimentos llevaron a la teoría de que el rojo, el amarillo y el azul eran los colores primarios de los que se derivan todos los demás colores. Nota al margen ... incluso aplicó "notas" musicales a cada color.

Ármame con Harmony ...

círculo de color newton

Tipos de armonías de color

Las relaciones entre y cómo se calcula cada conjunto de colores complementarios se conocen como armonías. Aquí hay un gran video de descripción general:

A cada tipo se asocian diferentes características:

  • Análogo - grupos de colores que están uno al lado del otro en la rueda de colores. 
  • Monocromo - grupos derivados de un solo tono base y extendidos usando sus matices, tonos y tintes.
  • Tríada - grupos de colores que están espaciados uniformemente alrededor del Color rueda
  • Complementario - grupos de colores opuestos entre sí en la rueda de colores.
  • Complementario dividido - una variación de complementario donde se utilizan dos colores adyacentes al complemento.
  • Rectángulo (tetradic) - utiliza cuatro colores dispuestos en dos pares complementarios
  • Cuadrada - similar al rectángulo, pero con los cuatro colores espaciados uniformemente alrededor del círculo de color
  • Compuesto - color y los dos colores adyacentes a su color complementario
  • Sombras - ajuste del matiz (aumento de la claridad) o del tono (oscuridad) del color primario.

Estos no son temas subjetivos, son cálculos matemáticos reales con buenos nombres aplicados que nos ayudan a comprender mejor los cálculos.

Generadores de esquemas de paleta de colores

Con un generador de esquemas de paleta de colores, puede obtener hermosas combinaciones de colores complementarias como esta:

A menudo uso generadores de esquemas de paleta de colores cuando trabajo en sitios de clientes. Como no soy un experto en colores, estas herramientas me ayudan a seleccionar mejor cosas como fondos, bordes, fondos de pie de página, colores de botones primarios y secundarios. ¡El resultado es un sitio web mucho más agradable a la vista! Es una estrategia sutil e increíblemente poderosa para aplicar a su diseño de cualquier cosa, desde un anuncio hasta un sitio web completo.

Aquí hay algunos generadores de esquemas de paleta de colores geniales en línea:

  • adobe - una herramienta fantástica con hasta 5 colores donde puede probar diferentes tipos, hacer ajustes e incluso guardar su tema en cualquier producto de Adobe.
  • MarcaColores - la mayor colección de códigos de colores oficiales de marcas que existen.
  • Canva - ¡Sube una foto y la usarán como base para tu paleta!
  • Colllor - Genere una paleta de colores web consistente con solo unos pocos clics. 
  • Diseñador de color - Simplemente elija un color o use los colores preseleccionados y la aplicación hace el resto. 
  • Búsqueda de color - plataforma abierta y gratuita para la inspiración del color con miles de modernas paletas de colores seleccionadas a mano
  • Colorkuler - Genere una paleta de colores para Instagram para que sea más agradable estéticamente.
  • Colormind - un generador de esquemas de color que utiliza aprendizaje profundo. Puede aprender estilos de color a partir de fotografías, películas y arte popular.
  • Espacio de color - ¡Simplemente ingrese de uno a tres colores y genere algunos esquemas!
  • Código de color - una experiencia realmente genial en toda la pantalla para crear su paleta de colores con varios estilos de armonía a la izquierda.
  • COLOURlovers - una comunidad creativa donde personas de todo el mundo crean y comparten colores, paletas y patrones, discuten las últimas tendencias y exploran artículos coloridos.
  • Coolers - crea la paleta perfecta o inspírate con miles de hermosos esquemas de colores.
  • Selector de color de datos - Utilice el selector de paleta para crear una serie de colores que se visualmente equidistante
  • Khroma - utiliza IA para aprender qué colores le gustan y crea paletas para que las descubra, busque y guarde.
  • Diseño de materiales - cree, comparta y aplique esquemas de color para su interfaz de usuario. ¡Incluso viene con una exportación para tu aplicación!
  • Colores Muzli - agregue un nombre o código de color y produzca una paleta hermosa.
  • Paletton - elige un color básico e inspírate.

Color y accesibilidad

Cuando decida diseñar su próximo esquema de paleta, tenga en cuenta que hay una cantidad significativa de personas con discapacidades visuales y deficiencias de color que necesitan interactuar con sus experiencias.

  • Comparación - Cada color independiente tiene un luminancia. Los colores de las superposiciones y los objetos adyacentes deben tener una relación de luminancia relativa de 4.5: 1 para que las personas con discapacidad visual puedan distinguirlos. No me tomaría la molestia de intentar calcular las proporciones usted mismo, puede probar las proporciones de dos colores con relación de contrasteo Color seguro.
  • Iconografía - Resaltar un campo en rojo no ayuda a alguien que tiene una deficiencia de color. Asegúrese de aplicar algún tipo de mensaje o icono para informarles que también hay un problema.
  • Focus – Mucha gente navega con teclados o lectores de pantalla. Asegúrese de que su interfaz de usuario esté diseñada correctamente con todas las etiquetas de accesibilidad para que puedan aprovechar su sitio. Para las personas con discapacidades visuales, el uso de espacios en blanco y la capacidad de aumentar o disminuir el tamaño de las fuentes donde no destruya el diseño es fundamental.

¿Eres un experto en ojos? ¿Experto en color? ¿Experto en accesibilidad? ¡No dude en proporcionarme cualquier orientación para mejorar este artículo!

Divulgación: estoy usando enlaces de afiliados en este artículo.

Douglas Karr

Douglas Karr es CMO de AbrirINSIGHTS y el fundador de la Martech Zone. Douglas ha ayudado a docenas de nuevas empresas exitosas de MarTech, ha colaborado en la diligencia debida de más de $5 mil millones en adquisiciones e inversiones de Martech y continúa ayudando a las empresas a implementar y automatizar sus estrategias de ventas y marketing. Douglas es un orador y experto en transformación digital y MarTech reconocido internacionalmente. Douglas también es autor de una guía para principiantes y de un libro sobre liderazgo empresarial.

Artículos Relacionados

Volver al botón superior
Cerrar

Adblock detectado

Martech Zone puede proporcionarle este contenido sin costo porque monetizamos nuestro sitio a través de ingresos publicitarios, enlaces de afiliados y patrocinios. Le agradeceríamos que elimine su bloqueador de anuncios mientras visita nuestro sitio.