Manual de Uso de Colores Web
Hoy vamos a ver como usar una aplicación desarrollada en JavaFX que nos permite generar colores en formato hexadecimal y rgba, que son los formatos mas comunes dentro de la web y de algunos programas de presentación de gráficos.
Bien como se menciona en el titulo la aplicación se llama Colores Web y es realmente sencilla de usar, la aplicación consta de un contenedor rectangular el cual se pinta de color en base a los 4 deslizadores que se encuentran en su parte derecha.
Para poder obtener un color deseado en la aplicación en la composición del color en términos de la intensidad de los colores primarios de la luz RGB ( Red, Green, Blue, en español Rojo, Verde, Azul), los cuales en HTML se basan individualmente en un rango de numero enteros desde el 0 hasta el 255, indicando el valor 0 que el color no interviene en la mezcla y 255 como la intensidad mas fuerte del color dentro de la mezcla.
Como se muestra en la imagen superior los tres primero deslizadores corresponden a cada uno de los colores primarios Rojo, Verde y Azul (De manera descendente), veamos algunos ejemplos.
Obteniendo el Color Rojo
Para obtener el color Rojo lo único que tenemos que hacer es mover el primer deslizador completamente de izquierda a derecha (de 0 a 255), con lo cual el contenedor de la derecha cambiará su color un rojo sin alguna otra mezcla.
Obteniendo el Color Amarillo
Como sabemos el color amarillo dentro de la escala de color primarios proviene de la mezcla única de color Rojo y el Color Verde, por lo cual lo único que tendríamos que hacer es mover el segundo deslizador (color Verde) de su valor 0 a su valor 255, y no quedaría un contenedor completamente lleno de color amarillo como la imagen inferior.
Como ya te habrás dado cuenta en la parte superior de los deslizadores existen dos leyendas las cuales cambian su información cada vez que nosotros manipulamos alguno de los deslizadores la primer leyenda, corresponde al valor hexadecimal que se muestra en ese momento dentro del contenedor visual, siendo la segunda leyenda la correspondiente al valor RGB con transparencia (RGBA, Rojo-Verde-Azul-Valor Alfa), el valor de transparencia corresponde a un valor decimal que se ubica entre el 0 y el 1, la forma de trabajar este valor dentro de la aplicación es utilizando en ultimo deslizador el cual por defecto empieza en su valor máximo (uno), lo cual indica que el color se va mostrar en su forma mas solida, y en la manera en la que el indicador del deslizador se valla acercando a la izquierda el color se degradara hasta ser totalmente transparente (cero).
Obteniendo un Azul Trasparente al 50%
Para obtener un color Azul degradado en un 50% lo que tenemos que hacer es indicar el valor de los colores Rojo y Verde en cero y el valor Azul a su máximo (255), pero con esto solo obtenemos un azul solido, para degradarlo al 50% de su solides es necesario mover exactamente a la mitad del último deslizador (hay que recordar que los valores de transparencia se basan en número decimales dentro del rango 0 y 1, por lo que 50% seria 0.5).
Pero ¿por que aparece un texto y el borde de nuestro contenedor visual cambian a un color que no corresponde?
Al utilizar la opción de transparencia automáticamente la aplicación muestra un texto y cambia el color del borde al color complementario del que nosotros le hemos indicado mediante los 4 deslizadores, por ejemplo:
Cuando nosotros indicamos un azul degradado al 50% los valores que se toman son los siguientes:
Rojo = 0, Verde = 0, Azul = 255 y transparencia = 0.5,
Por lo que los valores complementarios serian
Rojo = 255, Verde = 255, Azul = 0 y Transparencia = 0.5.
Esta idea se presenta para ver como se muestra nuestro color seleccionado y que tanto permitiría ver algún otro color que se encuentre debajo de nuestro color.
Por último para obtener el código de nuestro color seleccionado, lo único que tenemos que hacer es dar un clic derecho encima de nuestro contenedor visual para obtener el valor hexadecimal y dos clics encima del mismo para obtener el valor RGBA, la forma en la que los obtenemos es mediante la papelera de nuestra computadora lo que quiere decir que una vez que hallamos dado uno o dos clics lo único que tenemos que hacer es presionar la combinación de teclas CTRL + V (Pegar) y pegar el código donde lo deseemos.
OJO Para La ejecución de la aplicación es indispensable tener la ultima versión de Java instalada en nuestra computadora.
