¿Por qué es que este degradado de color es mucho más atractivo que otros?

24

He estado jugando con algunos gradientes en un sitio que estoy desarrollando, y estoy realmente interesado en la psicología u otro significado detrás de por qué ciertos colores parecen más atractivos que otros.

Aquí está el sitio ahora mismo:

Inicio de sesión original del sitio Centro principal del sitio original

Los gradientes allí se ven bastante naturales para el diseño. Pero si empiezo a mezclar y combinar, termino con esto:

Intento de gradiente diferente Intento de gradiente diferente Intento de gradiente diferente

Parece que no puedo encontrar otro gradiente decente que se vea "natural". Me pregunto cuál es la psicología detrás de cómo percibimos estas mezclas de colores ... ¿hay algún tipo de regla para encontrar colores que combinen bien en un degradado? Me imagino que depende del tipo de sensación que estés buscando. Agradezco cualquier y toda entrada!

Hayden McAfee
fuente
2
Esta es una pregunta puramente subjetiva, basada en la opinión. El hecho de que sienta que algunos gradientes son mejores, no significa que nadie más lo hará.
Scott
66
Estoy de acuerdo con Scott e iré tan lejos como para responder "¿Por qué se ven bien?" con "¿Quién dice que se ven bien?". Pero eso es subjetivo. Mi comentario objetivo es: le garantizo que está evaluando los colores dentro del contexto de toda la pantalla que incluye el borde verde claro de la ventana. Este color solo lo perjudicará contra ciertas opciones de color dentro de la ventana gráfica.
horatio
Muy buenos puntos tanto en la máscara del navegador como en el color azul. ¡Votaría si tuviera el representante! Comenzaré a verlos en modo de pantalla completa para evitar ese sesgo.
Hayden McAfee
Algo que noté hoy. Todos estos gradientes son posibles con diferentes variaciones de pares LAB cuando se gira a lo largo de A. Para aquellos con photoshop, vaya al selector de color, marque la casilla de radio de ala derecha y juegue con el control deslizante vertical de la paleta. La mayoría (¿todas?) De las combinaciones señaladas aquí se pueden encontrar en los diferentes valores del Aeje. No estoy seguro si esto tiene algún respaldo científico, pero fue solo una observación.
Qix

Respuestas:

34

La principal diferencia entre el ejemplo inicial y sus experimentos es que el original no cubre un cambio de tono tan drástico.

Rueda de colores de matices saturados

Pasar de amarillo dorado a magenta / rosa es aproximadamente 1/6 de vuelta en la rueda de colores. En contraste, tus experimentos (naranja-rojo a azul-violeta, azul-violeta a amarillo-verde y cian a azul-violeta) son más de 1/4 de vuelta.

Ese cambio no se percibe como un solo cambio en un color, sino como una progresión a través de múltiples colores. Debido a que su gradiente está bastante condensado en sus encabezados, eso se ve como un cambio bastante brusco y puede explicar por qué no se siente "natural" para usted.

Si desea tener un color diferente para sus bloques de color principales de "destino", elija un color vecino para el inicio del gradiente. Por ejemplo, para azul violeta como punto final, elija un azul profundo o magenta para el punto de partida. Para amarillo-verde como punto final, comience con verde brillante o rojo.

Por supuesto, estos todavía le darán diferentes "estados de ánimo" dependiendo del estado de ánimo de los colores involucrados: el azul-violeta es un color mucho más frío y tranquilo que el rosa en el original. Pero al menos los gradientes deberían verse un poco más suaves.

AmeliaBR
fuente
Calculé el desplazamiento del tono para los dos colores originales y obtuve un valor de 96 (de 360 ​​valores de tono posibles). Entonces, alrededor de un cuarto de vuelta alrededor de la rueda de colores. Comencé a encontrar otros valores de color con la misma diferencia, y aún así los valores se sentían extraños, aunque más naturales. Perdona mi falta de familiaridad con los colores y demás, pero ¿puedes pensar en alguna razón en particular para esto? Quizás son solo colores de un estado de ánimo diferente. i.imgur.com/utU1Oex.png
Hayden McAfee
En ese caso, mi sensación es que no se trata tanto del gradiente como del color final; el verde brillante es bastante discordante. Compárelo con la versión en la prueba de @ cockypup, que es un verde mucho más suave (menos saturado / brillante). Es mucho más difícil cuantificar el estado de ánimo de los colores, pero en general los colores menos saturados o secundarios son un poco más tranquilos que los rojos y verdes brillantes. Se vuelve muy subjetivo, pero hay muchos recursos, muchos con ejemplos de buenas combinaciones de colores.
AmeliaBR
44
Aquí hay otra cosa a considerar: contraste. El amarillo es el color más brillante, con su máximo contraste con el negro. En su primer ejemplo, el amarillo es solo la parte superior de su gradiente. No sobresale. "Se siente" casi como un punto culminante en la parte superior. Ayuda a mover el ojo de abajo hacia arriba del gradiente. En su tercer ejemplo, el amarillo es el color principal del gradiente. El cuerpo del gradiente sobresale. La parte superior del gradiente, que culturalmente se lee como el valor máximo, se siente menos importante que el cuerpo. El ojo lucha entre arriba y abajo. Esto podría hacer que parezca menos natural.
cockypup
29

Como se pregunta "por qué se perciben de manera diferente", aquí hay otra cosa (muy geek) a considerar: la luminiscencia percibida de un color RGB. Esto es difícil de aplicar, así que toma mi respuesta casi como una trivia:)

El valor de luminiscencia de un color indica qué tan "iluminado" lo percibes. Si el color fuera una bombilla, un color con baja luminiscencia se percibiría como tenue (bombilla de 40W), mientras que un color con alta luminiscencia se percibiría como muy brillante (bombilla de 100W).

De hecho, los colores RGB se muestran con pequeñas "bombillas". Las pantallas están formadas por pequeñas "bombillas", tres por cada píxel: R (ed), G (reen) y B (lue). Los valores específicos R, G y B de un color indican qué tan brillante debe encenderse cada pequeña bombilla para crear la ilusión de ese color. Por ejemplo, el color naranja RGB (255, 100, 0) se crea girando la bombilla roja a su máxima potencia (255), haciendo que la bombilla verde se oscurezca (100) y apague la bombilla azul (0).

Aquí hay una ilustración que muestra algunos colores y qué tan "brillante" debe hacerse cada uno de los componentes RGB para crear la ilusión del color. Los pequeños puntos debajo de cada color indican qué tan oscuro o brillante se hace el componente.

ingrese la descripción de la imagen aquí

Como puede ver en la ilustración, para crear blanco, por ejemplo, gira los 3 componentes al máximo (255). Esta combinación de las 3 pequeñas "bombillas" es percibida por el ojo como blanca (explicando por qué sería una gran digresión). Para crear negro, apaga todos. Eso es fácil: sin luz ni color.

La luminiscencia de cada color se calcula agregando "cuán brillante" son cada uno de los 3 componentes. El blanco sería el color con mayor luminiscencia, ya que los 3 componentes se convierten en su valor máximo. Negro, sería el que tenga el más bajo. El amarillo tendría una luminiscencia más alta que el verde ya que para hacer el amarillo necesitas 2 componentes al máximo, pero para hacer el verde solo necesitas uno. Entonces, más o menos se podría decir que

L = R + G + B

Sin embargo, es un poco más complicado. Al observar la ilustración, notará que el componente verde parece ser más brillante. De hecho, es percibido por el ojo como el más brillante. Azul, por otro lado, se percibe como muy tenue. La fórmula exacta para calcular la luminiscencia lo tiene en cuenta.

L = 0.2126 R + 0.7152 G + 0.0722 B

Aquí está la ilustración nuevamente, con la luminiscencia calculada para cada color.

ingrese la descripción de la imagen aquí

Notarás que, como te podría haber dicho tu ojo, el amarillo es más luminoso que el naranja, pero el naranja es más o menos tan luminoso como el magenta.

Ahora, tomé los colores de dos de sus paletas originales y calculé su luminiscencia.

ingrese la descripción de la imagen aquí

En el primer caso, el que le guste, notará que la luminiscencia del primer color, en la parte inferior, es más baja (125) que la del segundo color, en la parte superior (200). El gradiente, entonces, se percibe como un aumento en la luminosidad, como si se estuviera iluminando.

En el segundo caso, no hay mucha diferencia, por lo que el gradiente se percibe solo como un cambio en el tono.

En el tercer caso, el color inferior tiene una luminiscencia más alta que el superior, por lo que el gradiente se percibe como una disminución de la luminosidad, como si se atenuara.

Esto explicaría por qué, incluso cuando selecciona 2 tonos que se colocan relativamente a la misma distancia entre sí en la rueda de colores que los que le gustan, el resultado se percibiría de manera diferente.

cockypup
fuente
Fantástica respuesta! Gracias por la explicación clara; Parece que mi respuesta es realmente la combinación de estas respuestas.
Hayden McAfee
Esta es una respuesta increíble. Estoy seguro de que esto combinado con la respuesta de Hayden puede resultar en algunos resultados asombrosos.
Qix
2
Tenga en cuenta que esto es algo complicado por la visualización de gamma. Para obtener un valor de luminiscencia preciso para un color RGB de pantalla, primero debe aplicar la corrección gamma para convertir los valores R / G / B en un espacio de color lineal antes de promediarlos utilizando su fórmula. Para una gamma de visualización típica de 2.2, la fórmula correcta es L = (0.2126 R ^ 2.2 + 0.7152 G ^ 2.2 + 0.0722 B ^ 2.2) ^ (1 / 2.2).
Ilmari Karonen
4

De http://www.colormatters.com/color-and-design/basic-color-theory

1 - Un esquema de color basado en colores análogos

Los colores análogos son cualquiera de los tres colores que están uno al lado del otro en una rueda de colores de 12 partes, como amarillo-verde, amarillo y amarillo-naranja. Por lo general, uno de los tres colores predomina.

2 - Un esquema de color basado en colores complementarios

Los colores complementarios son cualquiera de los dos colores que están directamente opuestos entre sí, como rojo y verde y rojo-púrpura y amarillo-verde. En la ilustración anterior, hay varias variaciones de amarillo verdoso en las hojas y varias variaciones de rojo púrpura en la orquídea. Estos colores opuestos crean el máximo contraste y la máxima estabilidad.

3 - Un esquema de color basado en la naturaleza

La naturaleza proporciona un punto de partida perfecto para la armonía del color. En la ilustración de arriba, el amarillo rojo y el verde crean un diseño armonioso, independientemente de si esta combinación se ajusta a una fórmula técnica para la armonía del color.

usuario3437670
fuente
1) Verde oscuro a amarillo claro. Como una imagen teñida en escala de grises. 2) Rojo v / s Primavera Verde / Cian. Naranja v / s Azure. Indigo / Violet vs Yellow. Uno de los dos debe estar menos saturado que el otro, para un contraste adicional. 3) Observe cómo el rojo es más oscuro y más saturado que la combinación verde-amarillo, que también es un gradiente de verde oscuro a amarillo lima claro.
Locoluis
3

Solo agrego a la respuesta de AmeliaBR (debería ser un comentario, pero quiero publicar una imagen). Una forma de intentar "cambiar" su tono pero manteniendo la misma distancia relativa entre los colores iniciales y finales podría ser utilizando la herramienta de tono de Photoshop.

Tome la primera imagen (la que tiene el degradado que le gusta) y ábrala en Photoshop. Luego abra la herramienta Tono / Saturación ( Image->Adjustment->Hue Saturationo Ctr+U) y juegue con el primer control deslizante (Tono). Esto cambiará el tono de toda la imagen pero mantendrá la misma relación entre todos los tonos existentes (en particular, el tono inicial y el final de sus gradientes). Como la parte posterior de su interfaz es negra (o gris neutro), el cambio de tono no la afectará.

Si encuentra una combinación que le guste, simplemente acepte los cambios de Tono / Saturación (haga clic OK) y use la herramienta Cuentagotas (presione I) para elegir los colores iniciales y finales del gradiente.

En este ejemplo, he cambiado el tono -155 y el gradiente ahora va del verde aguamarina (siempre de moda) al azul, que es un degradado fresco y relajante con ecos náuticos.

ingrese la descripción de la imagen aquí

Eso sí, la percepción del color tiene un componente muy personal. Lo que puede encontrar "natural" para otra persona puede ser percibido como una aberración.

cockypup
fuente
Ya veo, esa es una buena manera de abordarlo. ¡Tal vez debería tomar algunas clases de teoría del color para tener una mejor idea de cómo se perciben ciertos colores en general!
Hayden McAfee