Temas Dinámicos Automáticos y Accesibles Con OKLCH Color Space

Hola a todos. Bienvenidos a React Advanced. Y hoy, hablemos sobre la construcción de temas dinámicos accesibles y automáticos utilizando Ocale CH ColorSpace. Pero primero, unas palabras sobre mí. Mi nombre es Nina. Soy ingeniera en Evil Martians. Nos dedicamos al desarrollo de productos para grandes empresas y startups, y también construimos activamente nuestros propios productos de código abierto.

Entonces, ¿qué es exactamente un tema dinámico? Los temas dinámicos permiten a los usuarios elegir los colores principales de la interfaz ellos mismos. La forma en que lo hacen puede variar. Podría ser algo lúdico como un deslizador de color en esta demo o simplemente un conjunto de opciones definidas como tenemos en GitHub. Usemos la interfaz de usuario para un tema que les guste. La idea principal sigue siendo la misma. Los usuarios pueden personalizar el aspecto y la sensación del producto con colores que se adapten a su estilo o preferencias.

Suena genial, pero ¿es solo un truco estético o algo más? ¿Por qué la gente necesita incluso temas dinámicos? La primera razón, hace que el producto se sienta más personal. Cuando las personas pueden elegir sus propios colores, sienten que la aplicación es suya. El toque personal ayuda a los usuarios a sentirse más conectados y los mantiene regresando. Transforma la aplicación en algo que se ajusta a su vibra y no solo una interfaz genérica. Y al personalizar el producto, los usuarios se vinculan con él. Y está comprobado por muchos estudios. Piénsalo como un impulso extra de compromiso que puede ayudar a mantener a las personas alrededor y hacer que toda la experiencia sea más agradable.

El esquema de color no es solo un pequeño detalle. Establece el tono para toda la interfaz. La segunda razón por la que nos gustan los temas dinámicos es porque con ellos, todo se mantiene visualmente en sincronía. Los temas dinámicos aseguran que tu interfaz de usuario siempre se vea bien coordinada. Ya sean botones, banners o secciones enteras, los colores simplemente coinciden con la vibra general para que nada se sienta fuera de lugar. Mira esta redecoración del banner promocional. De tema de playa a tema de cúpula en solo un segundo. El tema simplemente se ajusta a los colores de la imagen que das. Presta atención a cómo todo se mantiene visualmente conectado mientras también cambia. La última razón para empezar a amar los temas dinámicos, es una victoria fácil que hace que tu producto destaque.

No muchos productos hacen esto realmente bien. Así que agregar temas dinámicos puede instantáneamente hacer que tu producto sea notable. ¿Y la mejor parte? Es bastante simple de implementar, especialmente en comparación con el valor que agrega. Es tan encantador, pero si es algo tan genial, ¿por qué los temas dinámicos siguen siendo una rareza? Y la respuesta son los espacios de color y cómo funciona la percepción del color en ellos. La mayoría de los espacios de color no funcionan bien cuando se trata de modificaciones de color como hacer los colores más claros o modificaciones como hacer los colores más claros o cambiar el tono para un nuevo tema. Y te mostraré por qué.

Primero, echemos un vistazo a los formatos de color más populares, RGB y HEX. El formato de color RGB utiliza tres valores numéricos del 0 al 255 para cada canal de color. HEX utiliza un código hexadecimal de seis dígitos, cada uno contiene tres números que representan la cantidad de rojo, verde y azul. RGB y HEX no son convenientes para modificaciones de color, que son necesarias para construir temas dinámicos. Porque para la gran mayoría de los humanos, es difícil establecer colores intuitivamente cambiando la cantidad de rojo, azul y verde.

Mira este ejemplo. ¿Puedes averiguar cómo deberías cambiar este valor HEX para recibir el tono más claro de verde o una versión más saturada de verde? En realidad, es muy difícil y no podemos confiar en ello de manera estable. Mira esta diapositiva. Aquí puedes ver diferentes tonos de verde y su representación en formatos RGB y HEX. ¿Entiendes cómo necesitas cambiar el valor para hacer que un color específico sea un paso más claro o más oscuro? Personalmente, yo no. Echemos un vistazo a otro espacio de color popular. HSL es un formato que está mucho más cerca de la forma en que las personas piensan naturalmente sobre los colores. Pero en realidad, tampoco es genial. HSL contiene tres números para codificar el tono, saturación y luminosidad. HSL intenta ser más intuitivo, pero en realidad es un espacio de color deformado y no se puede usar para modificaciones de color adecuadas. Es mejor que RGB, pero aún no garantiza que los colores se vean igualmente brillantes o legibles después de la modificación del color.

Aquí hay un ejemplo. Esa es una sección de luminosidad de HSL y para la conversión espacio de color KLCH con la misma croma y versiones en blanco y negro abajo. Como puedes ver, la luminosidad de HSL no es consistente a través de los ejes de tono. Diferentes tonos representan diferentes valores reales de luminosidad. Esto lleva a problemas de contraste y mala accesibilidad. Pero la luminosidad de KLCH, por otro lado, es consistente y asegura accesibilidad. Por eso KLCH es nuestra elección para temas dinámicos.

Permíteme decir unas palabras al respecto. KLCH es un espacio de color relativamente nuevo diseñado para la uniformidad perceptual y es perfecto para crear temas dinámicos, ya que las modificaciones de color son extremadamente simples con él. A pesar de ser bastante nuevo, puede ser utilizado en todos los navegadores modernos. Aquí hay una explicación más detallada de cada eje de KLCH. L luminosidad es la luminosidad percibida. Va de 0, que es negro, a 1, que es blanco, o de 0% a 100%. C es croma, la saturación del color. Va de 0, que es gris, a infinito. En la práctica, hay un límite real, pero depende del gamut de color de la pantalla. H es tono, ángulo de tono. Va de 0 a 360, rojo, que es 20, amarillo, que es 90, verde, 140, azul, 220, púrpura, 320, y luego de nuevo a rojo. Y A es alfa, es opacidad. Va de 0 a 1, o de 0% a 100%.

Aquí hay algunos ejemplos de colores KLCH. Brillantes, negro, blanco, gris. Con KLCH, puedes ajustar el tono, la luminosidad o el croma y estar seguro de que el resultado se mantendrá equilibrado, accesible y visualmente coherente. Y compáralo con hex. Los valores parecen constantes mágicas. Apenas podemos entender que el segundo valor es solo un tono más brillante de azul. A diferencia de RGB o hex, KLCH es legible para los humanos. Puedes entender rápidamente qué color y valor KLCH representan simplemente mirando estos números. Ahora, hablemos de accesibilidad. HSL es malo para la modificación de color.

In HSL, hue changes to accessibility issues from low contrast. KLCH works like HSL, but it encodes lightness better than HSL. KLCH uses perceptual lightness to prevent unexpected results, and accessibility issues. But enough theory for now. Let's see how it works in practice, and how we can implement dynamic themes in our application. We will use KLCH along with CSS, just for simplicity. You can build your dynamic themes with any other CSS framework, there is no problem in it. And even using RGB.

Although, we don't recommend this color space. And the first step towards integration of dynamic themes is switching from spectrum based classes of CSS, like text 500, to semantic classes, such as text primary 500. Important here is that it should be part of your pack as a designer. Any color that we add to the project needs to be semantic. And on Figma layout as well. The semantics of names is an important thing. It helps to define the role of color in the application, and to understand it automatically while reading the code.

Now, that in dynamic themes, not every single color in the interface should be customizable. Some colors need to send signals to users, like errors which need to scream in red. Or warnings that wave a yellow flag. We would still recommend naming the signal colors, not just text red, but text error, for instance. But the color that tailwind CSS suggests us out of box, as a static palette, is not enough to build a full palette for dynamic themes. Now, I'll show you how we can build our own palette with the KLSH color space, and with maximum consistency between colors. Here, we need to define two things for our palette. The set of lightness values, and the set of chroma values. Because the hue is either set by you, when you build the theme, or chosen by the user, using hue picker, that's already one part done.

Comencemos con la luminosidad. En la paleta predeterminada de tailwind, hay 11 pasos de color, desde el más claro, que es 50, hasta el más oscuro, que es 950. Para definir el valor de luminosidad para nuestra paleta KLSH, podemos crear un paso similar ajustando el valor de luminosidad del 0% al 100%, en lugar de 50 a 950. En lugar de intentar calcular los valores de luminosidad con alguna fórmula, simplemente los fusionaremos visualmente con los valores predeterminados de tailwind. Porque confiar en tu ojo a veces da incluso mejores resultados que imponer las matemáticas.

Toma algo de tiempo, pero aquí hay una lista de resultados de valores de luminosidad que usaremos para 11 tonos. Esto nos da a nuestra paleta dinámica personalizada la misma sensación que la construcción de tailwind CSS 1, pero con más control. Ahora, cuando tenemos valores de luminosidad, necesitamos definir la chroma, o saturación, para nuestra paleta. Entonces, podemos aplicar la fórmula KLSH, y dejar que el usuario elija cualquier tono deseable. Este paso es más complicado que hacer coincidir las cosas visualmente, pero aquí, entra en juego el sitio de KLSH para ayudarnos.

Ve a KLSH.com, y primero, establece el tono que deseas. Elegimos púrpura, 320. Para la luminosidad del arreglo que definimos, aquí es 0.4689, elegí uno del medio, y luego vamos a ChromaSider. Necesitamos el valor de chroma más alto que aún cubra todo el espectro de tonos sin huecos. Los huecos significan que algunos tonos no estarán disponibles, y se recurrirá al color más cercano, lo que puede causar inconsistencias. Necesitas encontrar un nivel de chroma con cobertura completa de tonos, como el de la captura de pantalla, y luego lo anotamos. Aquí hay un video, y muestro cómo lo hago.

Primero, verifico el tono deseable, y luego pongo la luminosidad que hemos elegido antes de nuestro arreglo. Luego, cambio la chroma, prestando atención al eje de tono. Primero, hay huecos. Lo cambio de nuevo. Ahora no hay huecos, y puedo elegir este valor de chroma, y evitar inconsistencias visuales. Como resultado, repitiéndolo con todos nuestros valores de luminosidad, obtenemos un arreglo de valores de chroma, y esta paleta es muy consistente.

Ahora tenemos tanto chroma como luminosidad, y escribiendo los valores de estos arreglos, podemos aplicarlo a cualquier tono que queramos, o que el usuario quiera. Todo lo que queda es un selector de color de tema bonito, pero ¿cuál es la forma más adecuada de mostrarlo? Hay una solución nativa, un viejo tipo de entrada de color regular, pero no es adecuado para nuestro caso. Permite a los usuarios elegir todos los componentes de color, lo que significa tanto tono como luminosidad y chroma juntos, lo que podría confundir al usuario.

Solo queremos permitir que un usuario elija el tono. Especialmente para resolver este problema, en Little Martians, desarrollamos un selector de color de código abierto llamado Simple Hue Picker. Es una biblioteca ligera y agnóstica al framework. Mira cómo funciona este selector de tono. Funciona de maravilla. Aquí, el usuario solo elige el tono que desea. Por cierto, si tomas el mismo conjunto de tonos que tiene la paleta de Tailwind CSS, y comparas tus resultados en la paleta dinámica con la estática de Tailwind, no habrá una gran diferencia en absoluto.

Después de que creamos una paleta de colores personalizada, acordamos con el diseñador los nombres de los colores, y asignamos nombres semánticos a los colores de señal y de marca, nuestro siguiente paso es transferir todos los nuevos colores para temas dinámicos a nuestro archivo de configuración de Tailwind CSS. O, nuevamente, podemos hacer exactamente lo mismo usando otros enfoques CSS. Por ejemplo, en modelos CSS, se verá así. Básicamente hemos terminado. Nuestro paso final será revelar el secreto, cómo podemos manejar todos los cálculos de color para hacer que nuestro tema cambie en vivo. Para todos los cálculos de color, usamos la Colory Library. Es una herramienta súper útil para cualquier tipo de modificaciones de color. Revísalo en GitHub.