Cómo seleccionar colores y determinar sombras para diferentes estados: pasar el cursor, activar, presionar, desactivar

El proceso de selección de colores para la interfaz puede ser complejo, especialmente cuando se consideran varios estados de botones, fuentes y otros elementos de la interfaz de usuario. En este artículo, compartiré mis métodos y principios que te ayudarán a elegir con éxito una combinación de colores para tu proyecto.

1. Definición del color primario

Al diseñar un sitio web, a menudo es necesario elegir una combinación de colores. En ocasiones, el cliente ya tiene un color de marca primario. En este caso, su tarea es seleccionar colores y tonos adicionales que complementarán el color primario. Además del color principal, en el sitio se utilizan colores adicionales para diversos fines, como indicar estados de error, enlaces, ilustraciones, iconos o para su uso en gráficos y paneles.

2. Usar armonía de colores

Para garantizar que los colores armonicen bien, es beneficioso utilizar varios esquemas de armonía de colores, como monocromáticos, complementarios, triangulares y otros. Pueden ayudar a crear una paleta de colores armoniosa que complemente el color primario del proyecto. Actualmente vivimos en un mundo donde la tecnología avanza rápidamente y existen servicios especiales que generan fácilmente una combinación de colores. Por ejemplo, yo uso color.adobe.com.

Así es como lo hago:

uno. Seleccione el esquema deseado de la lista desplegable.

dos. Ingrese el valor de color requerido en el campo indicado como color base

tres. Determinar qué colores se adaptan a mis necesidades.

cuatro. Transferirlos a mi espacio de trabajo, en mi caso, usando Figma.

3. Selección de tonos

A continuación, debemos determinar las tonalidades de cada uno de los colores seleccionados. Para seleccionar tonalidades para los colores elegidos, puede utilizar servicios específicos que pueden ayudarle en este proceso. Hay dos formas de determinar los tonos de tus colores:

El primer método implica una fórmula más compleja:

1. Elija el color de su encabezado (no necesariamente negro).
2. Cambie al modo HLS.
3. Omita la primera celda, disminuya el valor en 2 para la segunda celda y aumente en 5 para la tercera celda.

El segundo método es utilizar el servicio (fácil y rápido)

colores.dopely.top

uno. Introduzca el valor del color que desee.

dos. Seleccione los tonos y el número de pasos (yo usé 5).

tres. Elija tintes y el número de pasos.

cuatro . Como resultado, para un color, creé la siguiente tabla

P = Primaria,

P 60 = este es nuestro color primario,

de P 10 a P 50 = estos son los tonos claros que recopilamos en Tints,

de P 60 a P 100 = estos son los tonos oscuros que recopilamos en el panel Sombras.

4. Comprobación de la accesibilidad del color

Es importante asegurarse de que los colores elegidos sean accesibles para todos los usuarios, incluidos aquellos con capacidades limitadas. Existen pautas, como las Pautas de accesibilidad al contenido web ( WCAG ), que se pueden seguir al crear una interfaz. Para comprobar la accesibilidad de tus colores, puedes utilizar herramientas específicas como complementos o servicios web que verificarán el contraste y la accesibilidad de los colores seleccionados.

Complemento Figma – Contraste

Servicio web – Refrigeradores

5. Definir colores para diferentes estados de la interfaz

En la etapa final del diseño de la paleta de colores para su proyecto web, es necesario determinar la cantidad de pasos necesarios para estados de elementos específicos. Normalmente, identificamos cuatro estados clave:

• Habilitado (estado de calma y normalidad del elemento)
• Colocar el cursor sobre (mouse over)
• Activo (haciendo clic en un botón u otro control)
• Deshabilitado (elemento bloqueado)

Para determinar el número de pasos, utilizamos el panel de color, donde fijamos nuestro valor de color principal (principal). Luego, contamos el número de pasos para los estados activo y flotante. Después de eso, probamos diferentes estados de accesibilidad para asegurarnos de que nuestros botones y el texto que contienen sean fácilmente legibles.

Por ejemplo, las directrices de IBM describen el siguiente enfoque: el estado de desplazamiento está a un paso y medio del color inicial, mientras que el estado activo está a dos pasos del color principal. Del mismo modo, el estado seleccionado estará un paso más lejos del color principal. Este método nos permite definir la paleta de colores y garantizar su accesibilidad para una audiencia amplia, incluidos usuarios con capacidades limitadas. El mismo enfoque se aplica a los textos, donde se identifican los estados activos y de desplazamiento.

Estados flotantes

Si tu color principal está entre el negro y el 70 , debes subir medio paso a tonos más claros.

Si tu color principal está entre el 60 y el blanco deberás bajar medio paso a tonos más oscuros.

Prensa / Estados activos

Para valores de 100 a 70, el estado activo se vuelve dos pasos completos más ligero

Para valores de 60 a 10, el estado activo se vuelve dos pasos más oscuros.

Estados seleccionados

Para valores de 100 a 70, el estado seleccionado se vuelve un paso más claro

Para valores de 60 a 10, el estado seleccionado se vuelve un paso más oscuro

También es importante probar sus diseños y textos para asegurarse de que sean legibles y se muestren correctamente. Después de completar el trabajo, asegúrese de que los diferentes estados y textos de la interfaz se vean y funcionen correctamente.

La elección correcta de una combinación de colores juega un papel clave en la creación de una interfaz de usuario atractiva y fácil de usar. Siguiendo estos sencillos pasos y utilizando las herramientas disponibles, podrá seleccionar y optimizar colores para su proyecto.

Espero que hayas disfrutado de mi artículo. Si tiene alguna pregunta o necesita más información, no dude en dejar un comentario.