Los diseñadores y el desarrollador web a menudo usan el código hexadecimal en sus archivos CSS para decir qué color se va a ser cierto elemento. Este método tiene sus propios méritos y defectos. Ayuda enormemente, ya que estandariza todo el flujo de trabajo entre los diferentes desarrolladores.Puede usar diferentes tipos de pantalla con una precisión de color variable y aún así adherirse a la paleta de colores original sin confusión. Pero a menudo es engorroso usar códigos hexadecimales para representar los colores. El número en sí no significa nada para un desarrollador humano y que puede obstaculizar la creatividad.Si bien puede usar una multitud de recolectores de color desde Adobe hasta el selector de color HTML de W3Schools, cambiar entre ellos y su editor puede romper la concentración y hacer que su vida sea mucho más difícil.

Para remediar esta situación, veamos un selector de color que puede instalar como un complemento para el editor de texto de Atom, lo que hace que todo el proceso sea mucho más suave. Necesita tener un átomo instalado en su sistema. Una vez que tenga eso instalado, puede instalar este paquete en particular. Tiene más de 1.7 millones de descargas y eso lo hace destacar, si decide buscar a través de Atom Editor en sí mismo.

Instalación del selector de color

Abrir el Ajustes [Ctrl +,] en tu editor Atom, y en el Instalar Sección de búsqueda de nuevo paquetes.

Instala el selector de color (versión 2.3.0 o posterior) y una vez que esté instalado, recuerde Permitir él.

Una vez que todo está hecho. Puede seguir adelante y abrir un nuevo archivo de texto y podemos comenzar a probarlo.

Varias opciones de selección de color

Abra un nuevo archivo dentro del átomo, y con él abierta, use la KeyBinding [Ctrl+Alt+C] si está en Windows o Linux o usa [CMD+Shift+C] si usa Mac OSX.

Verá una serie de controles deslizantes y diferentes barras a la derecha. El más a la derecha es seleccionar el color que le queda la barra que determina la opacidad de su color y el cuadrado en el medio decide qué tono de un color dado se seleccionará.

Puede ir extremadamente ligero, que se vería blanco sin importar cuál sea la elección inicial de su color o puede elegir una versión completamente gris o negro. El caso de uso normal implica elegir algo entre el cual se ajusta a su caso de uso.

Por ejemplo, las personas usan diferentes colores para el mismo elemento para que el sitio se sienta un poco más interactivo. A los hipervínculos se les puede asignar color azul y cuando pase el mouse sobre él, el color cambia al negro.

La opacidad es otro factor importante que los desarrolladores usan para ocultar elementos debajo de un parche de color, y cuando el usuario realiza una cierta acción, la opacidad va a cero y el elemento debajo se hace visible.

Diferentes estándares

Notarás que los colores se pueden mostrar en diferentes estándares, sobre todo en RGB (verde rojo y azul), hexagonal y HSL.

Comencemos con el formato hexadecimal, ya que se usa bastante, al menos a nivel de principiante.

Es simplemente un dígito hexadecimal (que es un sistema de numeración que va de 0 a 9 y luego tiene a representar 10, b representar 11 y así sucesivamente, hasta las 15 que se representa usando F). Elija un color con el paquete de selección de color, haga clic en el botón Hex debajo del widget y verá que el código hexadecimal correspondiente para ese color está pegado en su editor.

El siguiente estándar usa RGB, que muestra qué porcentaje de color es rojo, qué porcentaje es verde y cuánto es azul.

El mismo color que arriba tiene la representación RGB de la siguiente manera

Por último, debe saber sobre HSL que representa el tono, la saturación y la ligereza.

El tono representa que el color tiene el elemento. Podría variar desde el extremo rojo del espectro hasta el azul y simplemente ignora los colores como combinaciones de rojo, verde y azul (al menos desde el punto de vista del desarrollador). Esto a menudo se describe como una rueda de colores con rojo, verde y azul a 60 grados aparte del otro, pero el selector de color la había abierto a una sola barra a la derecha.

Lo siguiente de lo que preocuparse es la saturación, que describe cuán intenso será el color. Los colores completamente saturados no tienen tonos de gris, el 50% saturados son colores más claros y el 0% son indistinguibles del gris. El espacio cuadrado es perfecto para seleccionar esto.

La ligereza describe cuán brillantes van a aparecer los colores. Los colores 100% ligeros son indistinguibles del blanco y el 0% aparecen completamente negros. Por ejemplo, si su sitio tiene mucho material de lectura, desea una solución menos brillante para que sea más fácil para el lector participar. Entonces eso es HSL.

Conclusión

Editores como Atom y Visual Studio Code tienen un espíritu completo de paquetes y temas útiles construidos a su alrededor. El selector de color es solo un ejemplo que un desarrollador puede usar para renunciar a los viajes innecesarios a W3Schools o al desbordamiento de la pila. El uso de Color Sicker todavía requiere que tenga una pantalla precisa de color que esté correctamente calibrada.

Sin embargo, una vez que haya decidido la paleta de colores para su proyecto, puede comenzar a construir proyectos de manera más rápida y suave utilizando paquetes como Color Picker.