Dado un esquema de color, ¿cómo se aplica al diseño del sitio web?

Para que haya algo concreto que discutir, digamos que tengo este esquema de color:

Fuente

Hay muchos artículos sobre cómo elegir un esquema de color coherente basado en colores complementarios, colores monocromáticos, etc. Sin embargo, una vez que tengo un conjunto de colores, ¿cómo decido qué color es el encabezado, qué color es el enlace, cuál es el fondo? y texto. Incluso si decido que quiero un esquema claro sobre oscuro u oscuro sobre claro, poner el resto de los colores en la pantalla aún puede hacer que el sitio se vea feo.

¿Existen reglas generales o pautas generales que ayuden a uno a decidir qué colores van a dónde?

Veo a mucha gente comentando cosas como "no hay una respuesta correcta" con la que (más o menos) no estoy de acuerdo ... Ciertamente hay al menos una respuesta correcta, tal vez algunas y estoy seguro de que también hay un montón de respuestas incorrectas, Un buen diseño consiste en llegar a la mejor solución posible en función de los recursos y el tiempo disponibles para usted. Y seguramente esa solución superará varias alternativas. Nos ha dado una paleta de colores para fines de discusión, por lo que haré eso y responderé su pregunta en función de la paleta de colores suministrada. (Dado que no he visto el diseño con el que está trabajando, esto seguirá siendo bastante amplio, pero tendrá que seguir algún proceso).

Entonces, los primeros colores que me gusta elegir al crear un esquema de color en un proyecto web son el fondo para el cuerpo y el color del texto principal. Normalmente es una buena idea elegir los dos colores más contrastantes para cumplir con estos roles y su paleta de ejemplo no es una excepción, por lo que en este caso los colores son # DEE1DD y # 28363D. Ahora tenemos que decidir cuál usar para el texto y cuál usar para el fondo y en la mayoría de los casos trato de usar el color más claro para el fondo y el más oscuro para el texto. Se ha realizado una investigación considerable para demostrar que leemos un color oscuro en un color claro más fácilmente que un color claro en oscuro, así que eso es lo que generalmente prefiero a menos que haya una razón para un aspecto más oscuro (como si estuvieras haciendo un sitio web para un metal pesado banda o algo ... Voy a asumir que ese no es el caso aquí). Entonces,

A continuación, me gusta pasar a lo que creo que es el siguiente elemento más importante, que son los hipervínculos. Desea un color que contraste lo suficiente del fondo para que no sea difícil de leer, pero que también contraste lo suficiente del texto para que sea notable. En este ejemplo, la mayoría de los verdes más claros serán ilegibles en el fondo claro, por lo que la respuesta más obvia es # 2F575D.

Luego, aludiste a un encabezado que necesitaba ser coloreado, y nuevamente necesitamos que haga contraste con el fondo. En aras del minimalismo, trato de reutilizar los colores que ya he usado en el cuerpo, y en este caso el color del texto es probablemente demasiado oscuro para llenar grandes cantidades de espacio, por lo que me inclinaría a elegir # 2F575D y para todas las razones anteriores usaría el color de fondo del cuerpo # DEE1DD para completar cualquier texto o enlace en el encabezado.

Finalmente, cubro elementos de diseño no esenciales como los estados de desplazamiento al final y tenemos algunos verdes diferentes para elegir. De nuevo, esto probablemente deba contrastar con el fondo lo suficiente, ya que los enlaces no desaparecen al pasar sobre ellos, por lo que si se inclina por ir con # 658B6F ...

¡Y voilá! Ahora tiene un esquema de 4 colores (básico). ¡Espero que este proceso te ayude tanto como a mí :)!

El sitio web al que se vinculó le muestra cómo usar esos colores:

#28363D for the active state 
#2F575D as the navigation background 
#DEE1DD as background 
#C4CDC1 as banner ...

Normalmente salpico mi propio color en el diseño, incluso si sé que están ligeramente equivocados, al menos tengo aproximadamente dos colores sólidos o al menos uno. Luego, cuando he presentado mi idea, tomo mi color primario (el que más he usado) y lo agrego a una rueda de colores. De esa manera, reemplazo mis otros colores. O trato de encontrar algunas imágenes que tengan la mayoría de mis colores originales.

He leído artículos que dicen, toma una imagen y diseña tu trabajo en función de ese color, no puedo hacer eso. Creo mi propio diseño, con al menos un color en mente y luego uso las técnicas de la teoría del color.

Espero eso ayude

No existe una fórmula sobre qué tomar, que debe ser un trasfondo y demás, por eso el diseño es un arte.

Normalmente haré muchas pruebas con el conjunto de colores que tengo, por ejemplo, qué color de fuente se ve mejor en qué fondo.

Sin embargo, existe una regla general, que es contrastar los colores utilizados, la mayoría de la gente dirá que esto es de sentido común, como la fuente de color claro con un fondo de color oscuro. Entonces puede surgir, ¿cómo se determina el color de los subcomponentes, como cuadros de alerta, navegación, etc.

Tal como lo veo, debe tener su estructura básica para el sitio web lista, luego deberá determinar cuál es su contenido principal y cómo desea presentarlo. Tal vez un color más suave en los subcomponentes, que no necesita atención inmediata.

¿Cómo sabes si es bueno o no? Fácil, tan pronto como dices "Esto es bueno", es cuando es bueno. Siempre ayuda obtener la segunda opinión de otras personas.

Con todo, sigue intentando con la combinación de colores, no te quedes solo con una y te sorprenderás de la composición que podrías lograr al final.

Combinación de colores: la combinación proporcionada por el sitio web es lo suficientemente buena para comenzar.

Recuerdo un momento en que mi primera esposa y yo obtuvimos un gran panel de lona y varios tubos de pintura acrílica. Ponemos el lienzo en el suelo y rociamos colores al azar sin rumbo por todos lados. Lo dejamos secar y luego lo colgamos sobre nuestra chimenea. Con el tiempo, varios invitados comentaron lo maravilloso que se veía y pensaron que era una obra de arte cara ... hasta que les dijimos cómo estaba pintada. Todo está en el ojo del espectador.

Habiendo relatado esa historia, debo decir que estoy de acuerdo en que hay combinaciones de colores incompatibles, feos para la mayoría de los espectadores. Sin embargo, no hay muchos. No creo que debas preocuparte demasiado por hacerlo bien . Lo que contiene el sitio web puede compensar una gran cantidad de malas elecciones de color. El contenido siempre triunfará sobre el diseño.