La teoría básica del color nos dice que una paleta de colores verde, amarillo y rojo es ridículamente fea, son colores que chocan. Si tomamos el verde como el color prominente, los colores análogos que lo acompañan son el rojo y el azul; no hay espacio para el amarillo en ese esquema de color.
Entonces, ¿hay alguna manera de combinar verde, amarillo y rojo en un esquema de colores sin cegar a los usuarios?
Como mi ejemplo, tengo una página en un sitio web donde estos colores se usan para medir el nivel requerido de una habilidad para un proyecto contra el nivel real de esta habilidad de un usuario dado. El verde satisface o supera este nivel, el amarillo indica un ligero déficit en las expectativas y el rojo significa que no son lo suficientemente buenos o carecen por completo de una habilidad determinada.
Aquí está mi ejemplo (ignore los campos naranja y gris alrededor de las letras, no están relacionados).
Todos podemos estar de acuerdo en que esto se ve bastante terrible, pero es este formato al que debo adherirme, todo el asunto Verde-Rojo-Amarillo. : /
Al ser un programador principalmente, a diferencia de un diseñador gráfico / web, mi comprensión de la teoría del color y la experiencia del usuario es limitada.
Para aclararlo, mi pregunta es ¿Cómo se puede establecer un esquema de color tradicionalmente contradictorio sin restarle importancia a la Experiencia del usuario?
(Si mi pregunta no es adecuada, la eliminaré, no estaba seguro de dónde hacerla, me pareció la más adecuada)
fuente
Respuestas:
¿Verde, amarillo y rojo no pueden ir juntos? Los etíopes deben ser terriblemente insultados. Busque imágenes en verde, amarillo y rojo en Google, y creo que encontrará varios ejemplos atractivos (junto con los feos).
La combinación de cualquier conjunto de colores depende de las coordenadas exactas del color y de las posiciones relativas, las formas, los tamaños de los objetos coloreados y el efecto que desea tener (por ejemplo, calmante versus emocionante, divertido versus serio, audaz versus sutil). ) No tengo reglas estrictas para ti, pero aquí hay algunas cosas para experimentar.
Compensación de saturación de tamaño
Para evitar un efecto discordante (suponiendo que no desee eso), el tamaño del objeto coloreado debe ser inversamente proporcional a su saturación de color. Su ejemplo tenía saturaciones bastante altas, así que pruebe con saturaciones de color más bajas (por ejemplo, pasteles) o coloree algo diferente al fondo. Por ejemplo, puede colorear el texto y dejar el fondo neutral, o puede colorear una pequeña forma o símbolo al lado del texto. Esto último brindaría la oportunidad de usar la forma para codificar de forma redundante la coincidencia de habilidades para fines de accesibilidad e impresión en blanco y negro (marca de verificación verde para Satisfecho, signo de exclamación amarillo para Déficit y símbolo rojo de "no ingresar" para No es lo suficientemente bueno) .
Espaciado
El aspecto de los colores depende de su proximidad entre sí. Los colores que chocan cuando están adyacentes se ven bien con una pequeña separación. Intente colocar un borde neutral alrededor de cada celda para separar más los colores (como lo tiene en sus encabezados), a menos que haya un significado para que las celdas del mismo color se mezclen para ser percibidas como un solo objeto. Prueba diferentes espesores. Intente separar cada celda con bordes blancos , buscando un aspecto de mosaico.
Modelo
La combinación de los colores también cambia con el patrón de los colores, así que asegúrese de evaluar maquetas con proporciones y posiciones típicas de los colores. Por ejemplo, si la mayoría de las veces todo es verde, y es más importante que los usuarios presten atención a los "reflejos" de los amarillos y rojos, entonces elija un verde que haga un buen fondo (p. Ej., Baja saturación, luz), y amarillo y rojo parece sentarse "en la parte superior" (por ejemplo, mayor saturación, oscuro). Tenga en cuenta que la estética del patrón también puede comunicar y motivar al usuario. Si el usuario tiene un conjunto de habilidades particularmente inadecuado o desequilibrado, tal vez desee un patrón feo. El patrón más atractivo debe corresponder al estado más ventajoso para el usuario.
Usabilidad
Su pregunta se refiere a la estética, pero la elección del código de color también tiene importantes implicaciones de uso. Sus selecciones de color deben ser:
Visualmente distintos entre sí, especialmente si se usan en condiciones visuales degradadas (p. Ej., En un móvil a la luz del sol).
Proporcione un buen contraste con el fondo (si es el primer plano) o con el primer plano (si es el fondo). Por ejemplo, el texto negro sobre rojo no es tan bueno. En general, el primer plano y el fondo necesitan diferentes niveles de brillo.
Asegúrese de que los colores sean consistentes con lo que codifican. Por ejemplo, las cosas a las que el usuario debe asistir deben contrastar más con el fondo y otros colores.
Proporcione accesibilidad y capacidad de impresión, donde cada color también tiene un nivel diferente de oscuridad, con la oscuridad escalada a las filas (rojo más que amarillo más que verde). Haga que su verde sea algo azulado y / o su rojo algo anaranjado para que los usuarios daltónicos de color rojo-verde (el tipo más común de daltonismo) aún puedan ver las diferencias de color.
Use la codificación de color para una sola variable. No sé para qué usas el gris y el naranja, pero es probable que cause confusión y dificulte que los usuarios usen los colores rojo, verde y amarillo. Cada vez que tiene más de tres colores, es difícil mantener las cosas utilizables. Encuentre otra forma de codificar cualquier código gris y naranja (por ejemplo, use el tamaño o el peso de la fuente, o use líneas discontinuas para los bordes de las celdas; consulte Colocación de la G en la GUI ).
En un proyecto en el que trabajé, los colores con los que vine fueron # E00000, # FF8400 y # C0FFE0 (no era un amarillo muy amarillo, pero aún funcionaba).
Tengo más información sobre cómo elegir códigos de color, incluido cómo calcular el color y el contraste de brillo en Romper el código de color .
fuente
#C0FFEEel código hexadecimal. :)Intente usar pasteles en lugar de los colores RGY reales. Con la saturación reducida, debería ser más fácil mirar la información.
Pastel Red Hex: # F7977A RGB: 246-150-121
Pastel Green Hex: # 82CA9D RGB: 130-202-156
Hex. Amarillo pastel: # FFF79A RGB: 255-247-153
fuente
Veo tres desafíos principales con estos tres colores.
Solo puedo pensar en un par de opciones, suponiendo que no le guste el efecto pop art de grandes áreas de color saturado. Ambos minimizan el impacto de la saturación al desvanecer los colores.
Hay otro desafío aquí que no tiene nada que ver con la estética. El rojo dominará a los otros dos colores y atraerá la atención sobre las marcas negativas en la página. Si ese es tu objetivo, eres bueno. Si desea que su gráfico sea de naturaleza positiva, tendrá dificultades.
fuente
"Rojo", "Amarillo", "Verde" dejan mucho espacio para la interpretación, por lo que tiene una buena oportunidad de encontrar una combinación que funcione bien.
Para su problema de estética, tomé su color "rojo" y "verde" y lo puse en la licuadora de colores . Luego elegí pHSL como modelo de color para mezclar. Esto ya mejoró el conjunto de colores.
Luego probé diferentes "rojos" y "verdes" para mejorar aún más la impresión. Un poco más oscuro, rojo más saturado / más fuerte. Un verde con un poco más de amarillo, más una mayor saturación.
OK, no está mal, pero tampoco está listo todavía.
Para su problema de usabilidad, tenga en cuenta que existe una jerarquía de luminancia (relativa), matiz y saturación para guiar nuestra atención. Como el amarillo tiene naturalmente el mayor valor de luminancia, estos campos atraerían más nuestra atención. Así que importé los colores al convertidor de color para ajustar cada color individualmente. En mi ejemplo, di valores de luminancia iguales a "amarillo" y "verde". Una luminancia más baja para el amarillo o una luminancia más alta para el verde parecía estéticamente problemática.
Probé mi combinación en Photoshop y me di cuenta de que los bordes blancos (espaciado) causaron una buena impresión. Por lo tanto, recomendaría un espacio en blanco para las celdas y, como máximo, una delgada línea negra para dividir cada línea de entradas.
Al usar las herramientas mencionadas anteriormente, puede encontrar una combinación de colores que satisfaga sus gustos o requisitos personales aún mejor (por ejemplo, una mayor saturación para el verde) ...
fuente
Debe tener cuidado al usar colores como fondos, ya que puede dificultar la lectura y distraer al usuario del mensaje. es decir, fondo rojo y fuente negra.
Convertir un color en escala de grises normalmente ayuda a comprender qué colores contrastan mejor. es decir, cuando convierte los rojos en escala de grises, el color es gris oscuro. Por lo tanto, es un mal color para usar como fondo cuando la fuente es negra. Debe elegir un color que le ofrezca un buen contraste.
Sin embargo, si desea dar al usuario rápidamente una comprensión de lo que está tratando de hacer, le sugiero que deje las celdas en blanco (color claro) y simplemente agregue un pequeño símbolo que indique el estado (cuadrado o 5% o la celda llena con el color)
De esa forma, el usuario puede leer el texto y ver la categoría a la que pertenece con bastante rapidez.
Sin embargo, si desea combinar colores, le sugiero que compre el libro "Índice de color". Allí encontrarás miles de combinaciones que irán bien juntas y te ahorrarás algo de tiempo.
fuente
Si encuentra los tonos correctos de los colores, puede usar rojo, amarillo y verde juntos.
Recomiendo buscar en algunos de estos sitios donde puede encontrar algunas combinaciones finas:
http://www.colorschemer.com/schemes/search.php?s=red+yellow+green&submit=Search
O intente crear algunos de ellos usted mismo:
http://colorschemedesigner.com/
Lo que realmente recomiendo es que después de elegir su combinación de colores, pregunte a otra persona qué piensa de ella. A veces no tenemos suficiente aspecto exterior y simplemente nos gustan los colores juntos, incluso si no son buenos en absoluto.
No olvides pensar en el contraste y la visibilidad del texto al elegir los tonos adecuados.
Recomendaría usar un amarillo más claro ya que lo usa como un color bastante neutro.
fuente
Aquí hay tres esquemas, espero que les guste.
fuente