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:
Los gradientes allí se ven bastante naturales para el diseño. Pero si empiezo a mezclar y combinar, termino con esto:
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!
color
gradient
color-theory
Hayden McAfee
fuente
fuente
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 delAeje. No estoy seguro si esto tiene algún respaldo científico, pero fue solo una observación.Respuestas:
La principal diferencia entre el ejemplo inicial y sus experimentos es que el original no cubre un cambio de tono tan drástico.
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.
fuente
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.
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.
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.
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.
fuente
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.
fuente
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 SaturationoCtr+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 (presioneI) 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.
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.
fuente