Saltar al contenido principal

4.5. Paleta Cromática

Para el proyecto se han definido tres colores principales, acorde con diferentes necesidades. Cada color se destila en diferentes saturaciones, a continuación se detalla el motivo de cada color.

Paleta cromática

La paleta cromática principal está compuesta por el color de la marca. Para definir este color se mezclan el color azul común en diversas aplicaciones de trabajo y el color rojo que representa el Pomodoro. La suma de estos colores da como resultado un morado. La paleta cromática secundaria está definida por un gris, utilizado para texto base u otros elementos de soporte como por ejemplo sombras. La última paleta cromática, la de acentuación está compuesta por diferentes tonos de naranja. Un color que contrasta perfectamente con el color morado y el color gris. Se inspira en el color de los postits o bloques de notas.

Origen del color primario y de acentuación

↑ Origen del color primario y de acentuación

Dark Mode#

Normalmente el modo oscuro se desarrolla en fases posteriores del proyecto, para este proyecto es imprescindible lanzar la aplicación con dicho modo. Por lo tanto, las paletas cromáticas definidas en anterioridad se recombinan para garantizar que la interface no sea molesta a la vista en ambientes de poca luz u horarios nocturnos.1

Acceder al prototipo ↗.

mockup del dispositivo Laptop

Accesibilidad#

En el momento de escoger los colores se ha tomado en cuenta muy en serio que estos tuvieran un buen contraste y fuesen accesibles en diferentes condiciones visuales. A continuación se muestran varios ejemplos de estos tests y su puntuación.

Visualizar los tests en Figma


  1. Busquets, C. (2020b, agosto 25). Modo Oscuro: 5 hechos y tips para diseñarlo mejor. uiFromMars. https://www.uifrommars.com/modo-oscuro-beneficios-desventajas/