Paleta Cubo de Color

Noviembre 2015: Puede encontrar una nueva versión de esta aplicación integrada en el nuevo marco de herramientasweb Tools online.

Aplicación

 
RGB 
Red (0-255)Green (0-255)
Blue (0-255)Alpha (0.0-1.0)
 
Dimensionar
Lista colores CSS
Lista colores SVG

Paleta cubo color Una paleta de color es una utilidad que antes o después usaremos para buscar un determinado color o conjunto de colores que queremos aplicar a una página. Se trata de representar el espacio de colores en una pequeña superficie de pantalla. Recordemos que en RGB podemos tener hasta 2563 = 16.777.216 colores. En el cubo de color que ya presenté en el tema cubo de color CSS3 intenté representar ese espacio en tres dimensiones disponiendo cada color en una celda de tabla HTML. Se estructura en una guía Z y un plano XY. El color se forma con la combinación de las tres dimensiones (Z, X, Y) en el caso de que Z sea la guía roja (la seleccionada inicialmente en esta aplicación). Con un tamaño de 13 supone llegar a 133=2.197 colores. Variando las guías podemos tener tres vistas distintas: con guía roja (Z, X, Y), verde (X, Z, Y) y azul (X, Y, Z). Pero en todo caso son los mismos 2.197 colores. Si quisiera acceder a todos los colores tendría que construir un plano de 256×256 celdas, que sumadas a otras 256 de la guía supondrían 65.792 celdas. Indudablemente esto son muchas celdas para una tabla HTML. Para resolverlo he realizado algunos cambios en ese cubo de color para efectuar un ajuste de color a cada celda y mostrar el valor exacto que se vaya a buscar, es decir, acceder a cada uno de los 16.777.216 de colores RGB.

He incorporado aquí también las listas de color CSS y SVG, donde los colores se identifican con una clave de color. Se puede editar cualquier color para cambiar sus valores así como la opacidad (o transparencia), trabajando en formato rgb decimal (RGB-DEC), rgb hexadecimal (RGB-HEX), rgb porcentaje (RGB-%) y sus versiones con transparencia rgba. También podemos usar el formato hsl y hsla. La tabla puede dimensionarse hasta un tamaño de 32×32. Aunque por código no habría límite para que fuese mayor, pienso que con eso es suficiente para la ejecución teniendo en cuenta que con el ajuste de color podemos acceder a cualquier color.

Esta aplicaciones de color usan el módulo general-color.js, un JavaScript con funciones comunes de uso general en la gestión del color. Tiene las siguientes funciones

  • extraeArrayColores(color) a partir de una cadena RGB, RGBA, HSL, HSLA devuelve un array de tres colores y, si fuera el caso, también con el valor de transparencia.
  • resaltarColor(red, green, blue, alpha) nos devuelve un color resaltado que nos sirve para poner texto encima de un color de fondo y que siempre destaque.
  • rgbToHex(rgb) recibe un array de colores RGB y lo devuelve en formato hexadecimal.
  • hexToRgb(hex) recibe un string del valor hexadecimal y devuelve una cadena "rgb(red, green, blue)"
  • rgbToHsl(rgb)recibe un array de colores RGB o RGBA y devuelve una cadena "hsl(hue, sat, lum)" o "hsla(hue, sat, lum, alpha)"
  • hslToRgb(hsl) recibe un array de colores HSL o HSLA y devuelve una cadena "rgb(red, green, blue)" o "rgba(red, green, blue, alpha)"
  • colorRgb(color) recibe un color en cualquier formato de porcentajes, hexadecimal, HSL-HSLA o clave de color y devuelve siempre rgb(red, green, blue) o rgba(red, green, blue, alpha)
  • formatoColor(color) recibe también un color en cualquier formato RGB, RGBA, hexadecimal, porcentajes, HSL, HSLA o claves de color y devuelve un objeto con las siguientes propiedades:
    • obj.error y obj.mensaje informan si se encontró algún error al procesar
    • obj.tipo devuelve una cadena con un valor de la lista "rgb", "hsl"
    • obj.unidad devuelve una cadena con un valor de la lista "dec", "hex", "%", "". La combinación de tipo y unidad nos dará todos los formatos posibles: rgb dec, rgb hex, rgb % y hsl.
    • obj.val0, obj.val1, obj.val2, obj.val3 portará los valores de color en el formato de entrada. El cuarto valor llevará la transparencia si fuera el caso.