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:    Seleccione el esquema deseado de la lista desplegable.  uno.    Ingrese el valor de color requerido en el campo indicado como color base  dos.    Determinar qué colores se adaptan a mis necesidades. tres.    Transferirlos a mi espacio de trabajo, en mi caso, usando Figma. cuatro.  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:  Elija el color de su encabezado (no necesariamente negro).  Cambie al modo HLS.  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    Introduzca el valor del color que desee.  uno.    Seleccione los tonos y el número de pasos (yo usé 5).  dos.    Elija tintes y el número de pasos.  tres.    . Como resultado, para un color, creé la siguiente tabla cuatro    = Primaria, P    = este es nuestro color primario, P 60    = estos son los tonos claros que recopilamos en Tints, de P 10 a P 50    = estos son los tonos oscuros que recopilamos en el panel Sombras.  de P 60 a P 100  ¡Repita el mismo proceso para otros colores, texto y estados de error!  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 (   ), 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. WCAG  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   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. directrices de IBM   Estados flotantes  Si tu color principal está   , debes subir medio paso a tonos más claros.  entre el negro y el 70  Si tu color principal está   y el blanco deberás bajar medio paso a tonos más oscuros.  entre el 60   Prensa / Estados activos  Para valores de   el estado activo se vuelve dos pasos completos más ligero 100 a 70,  Para valores de   el estado activo se vuelve dos pasos más oscuros.  60 a 10,   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.  Recuerda que estos son consejos basados en mi experiencia, puedes agregar tus propios pasos, cambiar la secuencia, pero no olvides hacer pruebas de accesibilidad para que cualquier usuario pueda leer bien el contraste de tu texto y los diferentes estados de la interfaz.  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.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The writer was physically present in relevant location(s) to this story. The location is also a prevalent aspect of this story be it news or otherwise.

Read my Articles 

Read My Stories

Coveted Careers: Mastering the Art of Securing Top UI/UX Design Roles in 2024

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Boost your HackerNoon story @ $159.99! 🚀

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Una breve introducción a la teoría del cerebro de Boltzmann

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Una breve introducción a la teoría del cerebro de Boltzmann

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps