He leído y acepto la política de privacidad

    Acepto recibir contenido o propuesta comercial de diligent

    El uso de los colores en el diseño web

    Escrito por: Diligent Team

    Hace unas semanas publicamos una entrada dedicada al uso del color en el diseño web. Explicamos que el color es una de las partes más importantes del diseño, y que todo cuanto transmiten está estudiado al detalle. Cuando se nos encarga una identidad corporativa, uno de los trabajos que hacemos es analizar qué color es el más adecuado para transmitir sus valores y para impactar en sus potenciales clientes.

     

    El buen uso de los colores en la web

     

    Cómo escoger una combinación de colores

    A la hora de diseñar una web es importante elegir bien los colores que vamos a usar. Para ello un recurso muy interesante es la rueda de color, y eligiendo dos o tres colores a partir de la relación entre ellos.

     

    El uso de los colores en el diseño web

     

    Combinación monocromática

    En este caso se apuesta por un solo color y se utilizan variaciones de saturación de este para obtener distintos tonos. Es una elección de muy bajo contraste.

     

    Combinación complementaria

    Una combinación de muy alto contraste. Los colores complementarios son los que están uno delante del otro en la rueda de color, como por ejemplo rojo y verde o azul y amarillo. Crea una imagen muy vibrante, aunque es poco recomendable usarlo en grandes cantidades, sirve para destacar algo.

     

    Combinación colores triádicos

    Se trata de un esquema que usa colores equidistantes alrededor de la rueda. También tienen un resultado vibrante. Es importante usar un color dominante y los otros para destacar elementos para obtener un equilibrio.

     

    Combinación colores tétradas

    Utiliza un rectángulo en la rueda, de forma que usa cuatro colores en dos grupos de pares complementarios. Las posibilidades de variación son enormes, pero también funciona mejor si se usa un color dominante y el resto para complementar.

     

    Combinación colores análogos

    Una combinación que recurre a colores que están uno junto al otro en la rueda, ofreciendo un diseño que transmite serenidad, armonía y confortabilidad. Sin embargo, es más difícil obtener contraste, por lo que es recomendable usar uno dominante con un segundo de apoyo, y utilizar el tercero junto a negro o gris para acentuar elementos.

     

    Combinación colores split-complementarios

    Una variación del anterior en el que se utiliza un color base junto a los dos adyacentes a su complemento. Ofrece un buen equilibrio de armonía con elementos destacados.

     

    Ejemplos del uso de los colores en el diseño web

    En el post anterior vimos algunos ejemplos de páginas web que usan determinados colores. Vimos el amarillo, el color de la luz, que transmite alegría y optimismo. También repasamos el rojo, el color de la pasión, peligro, sexo y energía. Y vimos la combinación de estos dos, el naranja, que combina ambos y está asociado a la juventud, a la creatividad y a la espontaneidad.

    Para esta ocasión te ofreceré ejemplos del uso de los colores en el diseño web en azul, verde, negro y blanco.

     

    Azul

    Un color usado por muchas empresas tecnológicas -por ejemplo IBM o Microsoft- por su asociación con el progreso. También se asocia a la protección y a la tranquilidad, por lo que es ideal para empresas de seguridad.

    Ejemplos del uso del azul en páginas web →

     

    uso de los colores en el diseño web azul dataminr
    el color azul en la webuso de los colores en el diseño web azul supercity uso de los colores en el diseño web azul ouigo uso de los colores en el diseño web azul digital agency london

     

    Verde

    Es el color ideal para cualquier empresa que se quiera asociar al medio ambiente, como puede ser el caso de Iberdrola. También es un color que se asocia a la libertad, razón por la que Google lo escogió para ser el tono de Android, un sistema operativo de código abierto.

    Ejemplos del uso del verde en páginas web→

    el uso del color verde en la web oval money

    el color verde en al web sirinlabsel uso del color verde en la web 7up el uso del color verde en la pagina web el uso del color verde en la web

     

     

    Negro

    Un color que muchos casos se asocia a la muerte, pero también a la elegancia, a la autoridad, a la sobriedad, distinción y al respeto. Netflix es un ejemplo de diseño web en el que domina el negro. Amsterdam Dance Event, una web dedicada al mundo de la noche también apostó por el negro.

    Ejemplos del uso del negro en páginas web→

    ejemplo de color negro en la web oxs sneakers

    ejemplo de color negro en la web cinemascotti

    clouds over cuba

    ejemplo de color negro en la web stealth instalation

     

    Blanco

    Es un color asociado a la pureza y a la simplicidad. También a la perfección, razón por la que seguramente Apple lo eligió para dominar su página web. Es un color asociado a la verdad, razón por la que la mayoría de diarios digitales lo usan.

    Ejemplos del uso del blanco en páginas web→

    ejemplo del color blanco en la web upperdog ejemplo del color blanco en la web creative wallonia

     

     

     

    Espero que te haya sido de ayuda a la hora de hacer buen uso de los colores en el diseño web. Hasta la próxima.

     

    Alimenta con lectores tu blog

    Recibe el ebook en formato pdf y empieza a desarrollar tu blog desde hoy.

      Acepto las política de privacidad

      Acepto recibir la newsletter de diligent

      Al darte de alta te suscribes a la newsletter de diligent. Solo te enviaremos contendido interesante para proyectos digitales

      ×
      Del blog al éxito

      Recibe el ebook en formato pdf y empieza a desarrollar tu blog desde hoy.

        Acepto las política de privacidad

        Acepto recibir la newsletter de diligent

        Al darte de alta te suscribes a la newsletter de diligent. Solo te enviaremos contendido interesante para proyectos digitales

        ×
        Como triunfar con tu tienda online

        Descarga el eBook en Formato PDF y empieza a desarrollar tu tienda online.

          Acepto las política de privacidad

          Acepto recibir la newsletter de diligent

          Al darte de alta te suscribes a la newsletter de diligent. Solo te enviaremos contendido interesante para proyectos digitales

          ×
          Fotografía de producto

          Descarga el eBook en Formato PDF y empieza a desarrollar tu tienda online.

            Acepto las política de privacidad

            Acepto recibir la newsletter de diligent

            Al darte de alta te suscribes a la newsletter de diligent. Solo te enviaremos contendido interesante para proyectos digitales

            ×