Uso del color en páginas web

Tema: Diseño web

Autor: Albert Gimeno

Fecha: Mayo del 2020

Albert Gimeno / Diseño web

volver-blog  Volver al Blog

La ciencia del color se convierte en arte cuando un diseñador sabe utilizarlos con las proporciones adecuadas para lograr una reacción y hacer composiciones visuales equilibradas y eficaces.

En este artículo te voy a mostrar los aspectos importantes sobre el uso del color en páginas web y elijas los colores de manera meditada y consciente para conseguir un propósito.

1. Un poco de teoría del color.

Entender la física y los procesos que llevamos a cabo en nuestro cerebro para traducir longitudes de onda en colores es complejo, pero no te preocupes, la teoría del color es más sencilla cuando quieres aplicar colores de forma correcta en una página web.

Lo primero que debes saber es que cuando hablamos de colores para la web se tratan de colores aditivos o RGB, también conocidos como colores luz.

Ilustración con los tres colores primarios RGB rojo, verde y azul
Colores primarios RGB

Las siglas RGB vienen de sus tres colores primarios en inglés; Red, Green y Blue (Rojo, Verde y Azul).

Ilustración con los tres colores primarios RGB rojo, verde y azul
Colores primarios RGB

Las siglas RGB vienen de sus tres colores primarios en inglés; Red, Green y Blue (Rojo, Verde y Azul).

Los colores RGB están formados por tres colores primarios, rojo, verde y azul y a partir de ellos, mezclándolos entre si, obtenemos los colores secundarios y terciarios.

Ahora que ya tenemos claro que cuando hablamos de colores que serán representados en pantallas son colores RGB, ahora te presento los términos que dan el aspecto final al color que se mostrará en pantalla; estos son el tono, la saturación y el brillo (H, S, B).

famosa rueda cromática RGB divide colores en HSB
Rueda cromática RGB.

Tono, saturación y brillo son los diferentes aspectos que intervienen en los colores y forman la famosa rueda cromática RGB.

famosa rueda cromática RGB divide colores en HSB
Rueda cromática RGB.

Tono, saturación y brillo son los diferentes aspectos que intervienen en los colores y forman la famosa rueda cromática RGB.

1.1. Tono.

Es el termino con que definimos cada uno de los colores: rojo, verde, azul, amarillo, naranja, magenta, etc.

1.2. Saturación.

Es el termino que define la pureza de un color. Se mide por la cantidad de blanco que tiene, contra menos blanco tenga un color más saturado será por lo que será más puro. Por lo contrario, contra más porcentaje de blanco tenga una tonalidad menos saturado será ese color. Los colores menos saturados se conoce como colores pastel o pálidos.

1.3. Brillo.

Es la cantidad de luz que tiene un color. Va relacionado con la cantidad de negro que tiene un color. Contra menos brillo tenga un tono obtendremos un color más oscuro de esa tonalidad concreta.

Selector de color Photoshop muestra de manera intuitiva los selectores HSB
Tono, saturación y brillo.

En el selector de color de Adobe Photoshop se manipula de manera muy fácil estos valores y su representación gráfica ayuda a entender estos términos y sus efectos en los colores.

Selector de color Photoshop muestra de manera intuitiva los selectores HSB
Tono, saturación y brillo.

En el selector de color de Adobe Photoshop se manipula de manera muy fácil estos valores y su representación gráfica ayuda a entender estos términos y sus efectos en los colores.

Debes saber de los tonos: los tonos puros, o lo que es lo mismo, tonos con 100% de saturación y 100% de brillo son colores muy vibrantes para el ojo humano, por lo que resultan molestos y no es aconsejable su uso en páginas web ni interfaces digitales. Mi consejo es que los uses con mesura, como por ejemplo el color que enmarca este texto para destacarlo.

2. Psicología del color.

Las personas percibimos los colores fisicamente, mentalmente y emocionalmente.

Es conocido por todos que asociamos colores a acciones, emociones y estados de ánimo. Esta percepción nos viene dada por tradiciones culturales y sociales del entorno en el que vivimos. Conocer la atribución psicológica que tienen los colores sin duda influye en la elección que se hace en los colores de una web.

A continuación te presento una lista de las atribuciones y características psicológicas de los colores así como curiosidades que pueden dar contexto a un diseño.

ilustración con distintas tonalidades de rojo y ejemplo aplicación

Asociado con: fuego, sangre, sexo.

Connotaciones positivas: pasión, amor, energía, entusiasmo, emoción, color, poder.

Connotaciones negativas: agresividad, sangre, lucha, inmoralidad.

Además: es el color más dominante visualmente, sugiere acción.

ilustración con distintas tonalidades de amarillo y ejemplo aplicación

Asociado con: sol.

Connotaciones positivas: entendimiento, sabiduría, optimismo, gloria, alegría, idealismo.

Connotaciones negativas: celos, cobardía, engaño, cautela.

Además: es el primer color que percibe el ojo humano.

ilustración con distintas tonalidades de azul y ejemplo aplicación

Asociado con: mar, cielo.

Connotaciones positivas: conocimiento, tranquilidad, paz, masculinidad, contemplación, lealtad, justicia, inteligencia.

Connotaciones negativas: depresión, frialdad, indiferencia, apatía.

Además: la ropa azul simboliza lealtad o confianza.

ilustración con distintas tonalidades de rojo y ejemplo aplicación

Asociado con: plantas, entorno natural.

Connotaciones positivas: fertilidad, dinero, crecimiento, curación, éxito, naturaleza, armonía, honestidad, juventud.

Connotaciones negativas: avaricia, envidia, náuseas, veneno.

Además: el verde es un color relajante y refrescante.

ilustración con distintas tonalidades de púrpura y ejemplo aplicación

Asociado con: realeza, espiritualidad.

Connotaciones positivas: lujo, sabiduría, imaginación, sofisticación, inspiración, riqueza, nobleza, misticismo.

Connotaciones negativas: exageración, exceso, locura.

Además: se dice que el purpura fomenta la imaginación.

ilustración con distintas tonalidades de naranja y ejemplo aplicación

Asociado con: otoño, cítricos.

Connotaciones positivas: creatividad, vitalidad, energía, intensidad, estimulación, sociabilidad, actividad.

Connotaciones negativas: ignorancia, seguir la moda, ruido.

Además: el naranja estimula el apetito.

ilustración con distintas tonalidades de blanco y ejemplo aplicación

Asociado con: luz, pureza.

Connotaciones positivas: perfección, matrimonio, limpieza, verdad, suavidad, sagrado, minimalismo.

Connotaciones negativas: fragilidad, aislamiento.

Además: la luz blanca puede ser cegadora.

ilustración con distintas tonalidades de negro y ejemplo aplicación

Asociado con: noche, luto, elegancia.

Connotaciones positivas: poder, autoridad, peso, sofisticación, formalidad, seriedad, estilo, misterio.

Connotaciones negativas: vacio, miedo, negatividad, maldad.

Además: hace que el resto de los colores sean más intensos.

3. Uso del color en páginas web.

El uso correcto del color en sitios web aporta coherencia, consistencia, ritmo, contraste, incluso que tu marca pueda ser reconocible, pero todos estos principios fundamentales carecen de sentido si no se dirigen hacia un propósito y por supuesto, si no se piensa en facilitar la vida al visitante de la web, que en definitiva es quien hace uso de ella.

Un diseño con ritmo, contraste, coherencia, incluso pausa, interviene directamente el color. Para hacerlo de manera correcta existen una serie de conceptos que debes saber para luego aplicarlos en tus diseños web y acercarte al objetivo al cual destinas dicha web a través de una buena usabilidad y experiencia de usuario.

3.1. Conceptos básicos.

Suguiendo la lógica de diseñar para proporcionar una buena experiencia de usuario al visitante de una web, es recomendable utilizar sólo 2 ó 3 colores en sitios web aparte del color de fondo y el de imágenes e ilustraciones.

Diagrama explicación de la lógica UX en la aplicación de color
Lógica UX en el uso del color.

Las páginas web tienen que diseñarse de manera atractiva para atraer y captar atención, con usabilidad sencilla y con una experiencia de usuario memorable.

Diagrama explicación de la lógica UX en la aplicación de color
Lógica UX en el uso del color.

Las páginas web tienen que diseñarse de manera atractiva para atraer y captar atención, con usabilidad sencilla y con una experiencia de usuario memorable.

Con el propósito de no confundir, focalizar correctamente y favorecer la usabilidad del sitio web, la elección de la paleta cromática de la web la formará un color activo, uno o dos colores pasivos y el color de fondo o color del espacio negativo.

Color activo: es el color que damos a los elementos que realizan una acción en la web como botones y textos de enlace. Son elementos que necesitan ser reconocibles fácilmente y por norma general son del mismo color en todo el sitio web. Ayuda a no confundir al usuario y los localice y asocie a una acción fácilmente.

Color pasivo: es el color que damos por ejemplo a los textos. Se recomienda utilizar solo un color, máximo dos colores para textos. Un color principal y quizás un secundario para diferenciarlo. Se recomienda no abusar de colores pasivos para no fatigar la vista de los usuarios y favorecer la comprensión del mensaje en la web. Para diferenciar distintos elementos en un texto puedes recurrir a la escala y a la familia tipográfica.

Color espacio negativo: se trata del color de fondo. El espacio negativo es realmente importante en una página web. Dotar a las distintas secciones que componen una página web del suficiente espacio negativa focaliza mejor el contenido; ayuda al usuario a tomarse un respiro, descansar la vista y favorece la capacidad cognitiva del contenido.

Ejemplo de aplicación real de color pasivo, activo y espacio negativo
Color de fondo. El poder del espacio negativo.

Usa márgenes generosos y contrasta las diferentes secciones. Puedes ver un ejemplo en la página que ofrecemos diseño web. La primera estrategia de marketing es pensar en una buena experiencia de usuario.

Ejemplo de aplicación real de color pasivo, activo y espacio negativo
Color de fondo. El poder del espacio negativo.

Usa márgenes generosos y contrasta las diferentes secciones. Puedes ver un ejemplo en la página que ofrecemos diseño web. La primera estrategia de marketing es pensar en una buena experiencia de usuario.

3.2. Antes de elegir el color.

Antes de elegir un color de tu paleta cromática debes tener claro que éste siempre irá en un contexto y lo más importante, el diseño tiene que ser entendido y comunicar un mensaje determinado.

Con esta premisa previa es obvio adivinar que la elección de colores tiene que partir de un briefing inicial. Un análisis inicial que defina bien tu servicio, los objetivos, a que público te diriges y que estructura y características tendrá el sitio web.

Debes saber antes de elegir colores: los colores tienen que comunicar un mensaje a tu público objetivo, los usuarios deben tener una buena experiencia al visitar tu sitio web, tu marca tiene que ser reconocible y tienen que servir para hacer una web memorable.

* Una web memorable se refiere a tener un mensaje claro, fácil de interpretar con un servicio reconocible asociado a tu marca.

3.3. Elegir paleta cromática.

Tener una armonía cromática que suscite una experiencia visual equilibrada a los visitantes de tu web transmite coherencia y genera confianza.

Estas relaciones agradables entre elementos gráficos que equilibren el diseño es más que aconsejable compensarlas con un contraste consciente en los puntos que quieras destacar para que el usuario de tu web ponga mayor atención.

Una de las maneras más eficaces de conseguir este equilibrio entre armonía y contraste es utilizar en tu paleta cromática colores fríos y cálidos, por ejemplo; usa como pasivos colores fríos y como color activo uno cálido. Es una manera fácil de presentar una jerarquía visual fácil de interpretar al usuario de la web.

Hay herramientas y conceptos que debes conocer para crear tus paletas cromáticas.

Las herramientas para crear las paletas de color que posteriormente utilizo en mis proyectos web son las siguientes:

Adobe Color: se trata de una herramienta web de Adobe pensada para crear paletas de color a través de una rueda cromática. Me es muy útil para hacer la primera investigación sobre colores y sus relaciones entre ellos

Color Thief: se trata de otra herramienta web en la cual puedes sacar una paleta cromática a partir de una imagen que compartas en la plataforma.

Eye Dropper: Es una extensión de Google Chrome que una vez instalado en tu navegador tendrás disponible un cuentagotas para capturar el valor RGB, HSB (hsl) y hexadecimal del píxel seleccionado.

Photoshop: se trata de un programa de Adobe. Es en este programa, gracias a su alta funcionalidad en gestión de color, donde hago la selección definitiva de la paleta de color que utilizaré en mi proyecto web.

Los conceptos teóricos que guían mi elección son los siguientes:

Los conceptos que te presento te pueden servir como un punto de partida para ver la relación que tienen los colores entre si y poder componer un relato visual a partir de distintas tonalidades en una paleta de color.

Ilustración esquemática de selección de colores monocromáticos
Esquema cromático colores monocromáticos.

Esquema cromático compuesto por matices de un mismo color con valores de saturación y brillo distintos para crear una combinación afín de colores similares.

Ilustración esquemática de selección de colores monocromáticos
Esquema cromático colores monocromáticos.

Esquema cromático compuesto por matices de un mismo color con valores de saturación y brillo distintos para crear una combinación afín de colores similares.

Ilustración esquemática de selección de colores análogos
Esquema cromático colores análogos.

Son combinaciones de colores situados a la misma distancia entre sí en el círculo cromático. Esta combinación de colores al estar en una longitud de onda similar resultan agradables a la vista.

Ilustración esquemática de selección de colores análogos
Esquema cromático colores análogos.

Son combinaciones de colores situados a la misma distancia entre sí en el círculo cromático. Esta combinación de colores al estar en una longitud de onda similar resultan agradables a la vista.

Ilustración esquemática de selección de colores complementarios
Esquema cromático colores complementarios.

Son colores directamente opuestos entre sí en el círculo cromático. Es la combinación de colores con más contraste. Al provocar vibración visual alta esta combinación de color estimula la vista.

Ilustración esquemática de selección de colores complementarios
Esquema cromático colores complementarios.

Son colores directamente opuestos entre sí en el círculo cromático. Es la combinación de colores con más contraste. Al provocar vibración visual alta esta combinación de color estimula la vista.

Ilustración esquemática de selección de colores triádicos
Esquema cromático triádico.

Son combinaciones entre tres colores espaciados de manera regular en el círculo cromático. Las triadas en las que dos de los colores comparten un primario en común son más suaves y agradables a la vista.

Ilustración esquemática de selección de colores triádicos
Esquema cromático triádico.

Son combinaciones entre tres colores espaciados de manera regular en el círculo cromático. Las triadas en las que dos de los colores comparten un primario en común son más suaves y agradables a la vista.

3.4. Encontrar inspiración.

Encontrar inspiración es sencillo pero requiere cierta práctica ¿Dónde puedes encontrar inspiración? en todo lo que te rodea. Fijarte en la combinación de colores cuando visitas un sitio web, cuando miras una revista, cuando entras en tu casa, cuando vas al campo y en definitiva en toda la combinación de colores que pasa delante tuyo, te servirá para ver en la práctica mucha de la teoría que se escribe sobre el color.

ilustración inspiración encontrada en la ropa de cama de un familiar
Aprender a observar.

Esta paleta cromática es de una visita a casa de la madre de mi pareja. Me llamo la atención y quise tomar nota para futuras ideas.

ilustración inspiración encontrada en la ropa de cama de un familiar
Aprender a observar.

Esta paleta cromática es de una visita a casa de la madre de mi pareja. Me llamo la atención y quise tomar nota para futuras ideas.

4. Amplía información.

Este artículo sirve como tutorial inicial para usar colores de forma correcta en tus proyectos de diseño web, pero es sólo el inicio.

Si te interesa ampliar información y seguir profundizando te dejo una serie de enlaces a libros y cursos que recomiendo 100%.

Color (Bases del diseño) de Ambrose y Harris.

El color en el diseño gráfico de Sean Adams y Terry Lee Stone.

Linkedin Learning plataforma de cursos Online con cursos de altísima calidad de teoría y práctica sobre el uso del color.

Salud y disfruta del color.

By Albert Gimeno