JavaScript es el lenguaje de programación favorito de los desarrolladores web por su facilidad para crear páginas web dinámicas en donde los efectos de texto, animaciones y acciones destacan por sus colores vívidos y exactos.

Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es necesario compilar los programas para ejecutarlos. Es un lenguaje muy flexible pues existen al menos tres formas para incluir código JavaScript en las páginas web.

Por otro lado, el color es un medio esencial para tocar las emociones de los visitantes de tu sitio web pues crea una reacción física y emocional en los espectadores. Los colores son capaces de establecer el tono adecuado para llevar el mensaje a los visitantes: pueden calmar, excitar, estimular a las acciones. TODO lo que desees transmitir en tu sitio web, será mucho más fácil con el color y todo adecuado y hacer el ajuste correcto de tonos, brillo y saturación ¿Quieres saber cómo hacerlo? ¡No te pierdas el siguiente artículo!

Uso de JavaScript para ajustar la saturación y el brillo de los colores RGB

RGB es un modelo de color basado en la síntesis aditiva, con el que es posible representar un color mediante la mezcla por adición de los tres colores de luz primarios. El modelo de color RGB no define por sí mismo lo que significa exactamente rojo, verde o azul, por lo que los mismos valores RGB pueden mostrar colores notablemente diferentes en distintos dispositivos que usen este modelo de color. Aunque utilicen un mismo modelo de color, sus espacios de color pueden variar considerablemente, teniendo esto en cuanta se necesitan más de cinco códigos hexadecimales atractivos de un generador de paleta de colores al crear una aplicación. Vamos a necesitar muchos grises y algunos colores primarios. A partir de estos colores primarios, tendremos una variedad de niveles de brillo y saturación.

En el uso de códigos hexadecimales o colores RGB al desarrollar aplicaciones es común ver que el proceso se relentiza al tratar de calcular diferentes niveles de luminosidad y saturación con un solo tono. Existen códigos que pueden ayudar a manipular esos colores.

Valores HSL

Valores HSL

Una forma efectiva de escribir colores web es usar valores HSL, especialmente si planea alterar los colores manualmente. HSL significa tono, saturación, luminosidad. Usando HSL, puede declarar su tono como un número de 0 a 360. Luego puede anotar un porcentaje de saturación y luminosidad respectivamente.

Ahora bien, ¿Qué pasaría si tuviéramos que lanzar un texto oscuro sobre este div? Podríamos usar un color cercano al negro, pero consistente con el fondo. Por ejemplo, podemos tomar los mismos valores de HSL y reducir la luminosidad al 5%. Así se puede obtener un texto que está muy cerca del negro, pero parece un poco más natural y está ligado a su fondo. Pero, ¿qué pasa si no se trata de un párrafo de texto, sino de un botón de llamada a la acción? Podemos llamar un poco más la atención aumentando la saturación y reduciendo un poco la luminosidad en el fondo.

O, ¿y si hubiera algún texto que no fuera tan importante? Podríamos volver a subir el brillo del texto y reducir la saturación. Esto elimina algo del contraste y permite que este texto menos importante se desvanezca un poco más en el fondo. Dicho esto, debemos tener cuidado de mantener un contraste lo suficientemente alto para la accesibilidad y la legibilidad, así que la solución es aclarar el fondo nuevamente.

Los valores HSL son compatibles con los principales navegadores y son una forma superior de definir colores en comparación con el solo uso de RGB. Esto se debe a que te permiten ser más declarativo con el tono, la saturación y la claridad de un color.

Bibliotecas

Hay muchas bibliotecas de colores excelentes que pueden convertir los valores HSL nuevamente en códigos hexadecimales o colores RGB. La mayoría de ellos también tienen una variedad de funciones de manipulación para ayudar a construir un esquema de color.

Aquí te dejamos una lista de algunas bibliotecas que son las más conocidas o usadas:

• Si la conversión entre formatos es un problema, intenta colvertize de Philipp Mildenberger. Es una biblioteca ligera que ofrece muchos métodos de conversión y algunos métodos de manipulación.
•  
• Otro es TinyColor de Brian Grinstead en Mozilla, que puedes manejar una gran cantidad de tipos de entrada, así como funciones de utilidad. También proporciona algunas funciones para ayudar a generar esquemas de color.

Herramienta Cuadrícula de colores

Otra opción es probar una herramienta de color muy frecuente llamada Color Grid. Para citar la interfaz de usuario de refactorización, “Por muy tentador que sea, no debes confiar únicamente en las matemáticas para crear la paleta de colores perfecta”. ¿Reconoces esta cita?

También, debemos hablarte de “React” una app muy útil para crear matemáticamente una paleta de colores. Lo sabemos, eso no resolverá todos sus problemas, pero puede comenzar a darte algunas opciones. La aplicación crea 100 niveles diferentes de saturación y luminosidad según el tono que selecciones. Puedes hacer clic en un elemento de la cuadrícula para copiar el código hexadecimal o copiar un color como una propiedad personalizada de CSS desde un área de texto al final. Esto podría ser algo para probar si necesita una forma rápida de obtener variaciones de uno o dos tonos.

Ya que estamos en esto de técnicas y trucos, aquí hay algunas técnicas  para procesar y/o transformar colores RGB.

Cómo encontrar la luminosidad de un color RGB

Esta técnica produce el nivel de luminosidad en función de una medida programática de la cantidad de blanco o negro que se mezcla. El brillo percibido se ve afectado por más de esta medida, así que recuerda usar también tus ojos para juzgar el nivel de luz que necesitas. El nivel de luminosidad de un color RGB se puede calcular encontrando el promedio de los valores RGB más alto y más bajo y luego dividiéndolo por 255 (el color medio no afecta la luminosidad). Esto te dará un decimal entre cero y uno que representa la luminosidad.

Cómo saturar un color RGB sin cambiar la luminosidad o el tono

¿Qué podemos hacer con nuestra nueva capacidad para encontrar la ligereza de un RGB? Puede ayudarnos a saturar un color RGB sin cambiar la luminosidad. Sin embargo, la saturación de un RGB conlleva algunos problemas:

• No hay información en el formato RGB de un color gris que nos diga cómo se verá la versión saturada porque el gris no tiene matiz. Entonces, si vamos a escribir una función para saturar un color, debemos ocuparnos de eso.
• En realidad, no se puede llegar a un tono puro a menos que el color tenga un 50% de luminosidad; cualquier otra cosa se diluirá en blanco o negro. Así que tenemos la opción de mantener la misma luminosidad a medida que saturamos el color o mover el color hasta un 50% de luminosidad para obtener la versión más vibrante.

Si queremos mantener la luminosidad igual, necesitaremos aumentar el valor más alto y disminuir el valor más bajo en una cantidad igual. Pero debido a que los valores RGB deben fijarse entre 0 y 255, nuestras opciones de saturación estarán limitadas cuando el color sea más claro o más oscuro. Esto significa que hay un rango de saturación disponible para cualquier luminosidad dada.

¿Qué pasa cuando hay un tercer valor?

Aquí es donde las cosas se complican un poco. La distancia del valor medio desde el gris se puede trabajar con la relación entre este valor y la distancia desde el gris de cualquiera de los otros dos valores. A medida que alejamos los valores más altos y más bajos del gris, el valor medio aumenta / disminuye en proporción con ellos.

Ahora, obtengamos la diferencia entre el valor más alto y el gris completo. Luego, la diferencia entre el valor medio y el gris completo. Entonces obtendremos la proporción entre estos.

También, hay un par de funciones de JavaScript que trabajan juntas para saturar un color en un 10% y que devuelve una matriz de objetos que representan los valores RGB en orden de tamaño.

¿Cómo desaturar un color RGB?

Si se desatura por completo un color, el resultado es terminar en un tono de gris. Los grises RGB siempre tendrán tres valores RGB iguales, por lo que se puede usar el grayVal de la función para hacer un color gris con la misma claridad que cualquier color dado.

Ahora bien, ¿Qué pasa si no queremos pasar directamente al gris y solo queremos desaturar ligeramente un color? Podemos hacer lo mismo, pero de manera invertida.

Es supremamente importante, que no pases por alto el “color picker” que no es más que el elector de color de cualquier gráfico que haya en la pantalla del ordenador y un creador de paletas para sitios web.

8 color pickers personalizables de Javascript que no debes pasar por alto.

Tiny Colorpicker

Es una librería multinavegador que es capaz de crear campos colorpicker. Es una manera sencilla de añadir color pickers en tus formularios o interfaz de usuario. Cuenta con una sola interfaz. Puedes establecer el picker como una imagen y elegir el color desde la imagen.

Pick-a-color

Es un color picker para Twitter Bootstrap. La interfaz no es la mejor, pero cuenta con un buen número de sliders para que puedas crear el color que tú quieras. Además, puedes crear tus propios colores y guardarlos, para utilizarlos en un futuro.

Farbtastic color picker

Es un plugin de jQuery que puede añadir uno o más widgets de color pickers en una página mediante Javascript. Cada widget se enlaza a un elemento existente (como por ejemplo, un campo de texto) y actualiza el valor del elemento en función del color que haya seleccionado el usuario.

Flexi color picker

Es un fichero de Javascript puro y duro que no utiliza ni imágenes, ni librerías externas, ni recursos ajenos. Esta librería se basa en el modelo de color HVS. Las únicas dos partes del color picker son, por lo tanto, el slider para la seleccionar el valor hue y el picker para seleccionar la saturación y el valor en sí.

Bootstrap color picker

Plugin de Twitter Bootstrap para crear tu propio color picker elegante y personalizable. Es una librería bastante extensa que cuenta con varias opciones configurables y un montón de métodos y eventos para crear el color picker de tus sueños.

Colorpicker

Es un pequeño, pero potente framework Javascript para crear elementos color pickers y también una herramienta de calculo y conversión de color que soporta los siguientes formatos de color: rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab pero solo alpha, WCAG 2.0, constraste, similaridad de colores, escala de grises. Si eres un friki de los colores, con este framework no te aburrirás jamás.

Eyecon color picker

Un componente muy simple para seleccionar colores de la misma manera que lo haces en Adobe Photoshop. Funciona con jQuery y tiene un montón de métodos y eventos.

Evol-colorpicker

Se parece mucho al que había en Microsoft Office 2010. Puede ser utilizado inline o como un popup dentro de un text box. Viene con muchas paletas de colores, cuenta con un historial y soporta el color transparente. Es un plugin de jQuery muy completo, el cual puede gestionar varias configuraciones y themes.

 

Javascript es especialmente importante porque es el único lenguaje de programación que entienden los navegadores, con el que se desarrolla la parte de la funcionalidad frontend en sitios web y aplicaciones web modernas. Cualquiera de estas herramientas te será muy útil a la hora de optimizar y crear tu sitio web. Si llegaste hasta aquí, espero que te haya gustado y que puedas sacarle partido a tus diseños web, recuerda que si tienes dudas, en Creante Lab estamos para asesorarte con cualquiera de tus proyectos.

 

Fuentes:

Puro geek / Cómo manipular colores CSS con JavaScript

Uniwebsidad / introducción al javascript

Programación.net /color pickers

Easy app code / generar colores con javascript