Cómo manipular colores en JavaScript usando chroma.js

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

En el tutorial en screencast de hoy, voy a mostrarte cómo manipular colores con JavaScript. Así es, JavaScript. No CSS. ¡Entremos de lleno para ver de lo que estoy hablando!

Ve el screencast

Todos nos hemos acostumbrado a la idea de que CSS gestiona los estilos, mientras que JavaScript se usa para el comportamiento, y estos dos aspectos deben mantenerse separados. Pero cuando no es posible definir estilos directamente a través de CSS, como cuando se establecen a través de la entrada del usuario, JavaScript hará todo el trabajo pesado por ti.

Chroma.js es una pequeña biblioteca que puede ser de gran ayuda para manipular colores, así que veamos cómo podemos comenzar a usarla.

Conéctala

Chroma puede obtenerse a partir de su repositorio en Github, o vincularse desde CDNJS usando este enlace:

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js"></script>

Demostración

Echa un vistazo a la demostración rápida que construí para mostrarte lo que es posible. Vamos a crear un generador de esquemas de color que toma como entrada el valor de un color y lo usa para generar un esquema monocromático.

Si deseas seguir los pasos mientras vuelvo a crear la demostración, descarga el archivo start.html (que contiene todo menos el código de JavaScript que vamos a escribir) y ábrelo en un editor de código.

Heres what were building — Esto es lo que estamos construyendo

Comienza agregando el siguiente fragmento de código entre las etiquetas <script> en la parte inferior del documento html:

       document.addEventListener('DOMContentLoaded', function() {
            
            var btnGenerateColorScheme = document.querySelector('#generate-color-scheme'),
                btnGenerateColorScale = document.querySelector('#generate-color-scale'),
                colorScheme = document.querySelector('.color-scheme'),
                colorScale = document.querySelector('.color-scale'),
                steps = 5, // is preferably an odd number
                chromaColor, userColor, colorList, scaleColors, scaleCount, scaleList;
            
            btnGenerateColorScheme.addEventListener('click', function() {
               
            });

            btnGenerateColorScale.addEventListener('click', function() {
             
            });

        });      

Este es un fragmento grande, ¡pero es mucho menos intimidante de lo que podrías imaginar al principio! Este comienza con un detector de eventos DOMContentLoaded, que espera hasta que el documento haya sido cargado antes de ejecutar cualquiera de las funciones que siguen.

A continuación defino un conjunto de variables que vamos a usar, comenzando con dos botones, luego los contenedores colorScheme y colorScale, y luego steps (un número que usaremos muy pronto).

Por último, hay dos detectores de eventos clic con funciones (hasta ahora) vacías. Vamos a comenzar con el primero de ellos, btnGenerateColorScheme, que es (como era de esperarse) el botón que generará un esquema de color.

btnGenerateColorScheme

Dentro de la función vacía, entre las llaves, vamos a comenzar colocando un arreglo vacío llamado colorList:

1	// Reinitialize the color list.
2	colorList = [];

Cuando un usuario haga clic en el botón, lo primero que debemos hacer es obtener el color introducido #user-color.

1	// Get the color value.
2	userColor = document.querySelector('#user-color').value;

Luego necesitamos restablecer los valores del interior de la lista del esquema de color. Esto se hace eliminando el valor de innerHTML del elemento .color-scheme, que en nuestro caso es un <ol>. Aquí puedes ver que estamos configurando el valor de innerHTML para que sea igual a una cadena vacía.

1	// Reset the content of the color scheme list.
2	colorScheme.innerHTML = '';

Llamando a chroma

¡Ahora viene la parte divertida! Inicializamos la biblioteca chroma.js llamando a chroma() y enviando un color:

1	// Initialize Chroma.
2	chromaColor = chroma(userColor);

Nuestro color es userColor, el valor que obtuvimos de la entrada anteriormente.

Vamos a crear un esquema de color monocromático basado en el color elegido. Haremos esto creando un arreglo, gracias a la ayuda del siguiente bucle for:

1	// Create a monchromatic color scheme.
2	for (var i = 0; i < steps; i++) {
3	colorList[i] = chromaColor.darken(i);
4	}

Este bucle itera durante la cantidad de pasos definidos en la variable steps (establecimos su valor en 5 anteriormente, ¿lo recuerdas?). Cada vez que hacemos una iteración, se agrega un tono ligeramente más oscuro a la colección.

Finalmente, necesitamos generar algunos elementos usando los cinco valores de nuestro arreglo. Cada vez que generemos un elemento <li>, le vamos a asignar un backgroundColor de acuerdo a nuestro colorList, y luego lo agregaremos a colorScheme.

                // Generate some elements.
                for (var j = 0; j < colorList.length; j++) {
                    var newItem = document.createElement('li');

                    newItem.style.backgroundColor = colorList[j];

                    colorScheme.appendChild(newItem);
                }

¡Listo!

Hemos creado exitosamente un generador de esquemas de color que devuelve una serie de bloques, comenzando con el color elegido y oscureciéndolo gradualmente.

our color scheme — Nuestro esquema de color

Quizá quieras mejorar esto colocando el color elegido a la mitad del rango, con colores más claros a la izquierda y colores más oscuros a la derecha, en cuyo caso puedes echar un vistazo al video y seguir los pasos finales. También puedes agregar detalles para el color de cada bloque, por ejemplo su valor hexadecimal; en el screencast también explico esto.

Por último, el screencast también incluye instrucciones para construir el generador de la escala de color, ¡así que comienza y cuéntame cómo te va!

Recursos adicionales

chroma.js en Github
Su creador @driven_by_data (Gregor Aisch) en Twitter
Archivo de inicio para este tutorial