Colores

La elección de colores para una página web no siempre es fácil, y con la cantidad de colores existentes se complica aún más esa tarea; por eso tener una paleta a la vista es muy aconsejable.

Paleta reutilizable

Con un mismo script podemos mostrar distintas paletas para distintos elementos. pudiéndose modificar el aspecto modificando algunos parámetros.

Se pueden seleccionar colores para campos de un formulario:




O puede hacerse la selección para modificar algunos estilos de una página:


Ejemplo
Seleccione el color del texto desde arriba y
el fondo desde abajo.


También puede reutilizarse la misma paleta para editar/modificar varios elementos:


Ejemplo
Seleccione el color y el elemento
que quiera modificar



Como funciona

Para usar esta paleta, debemos enlazar con la librería colores.js en la sección head de nuestra página web:

<script type="text/javascript" src="colores.js" >
</script>

Antes de usar la paleta debemos considerar que para que la paleta sea operativa tendremos que tener previsto que se hará cuando se seleccione un color. Tenemos que usar una cadena que consideraremos como comodín para poder poner todas las paletas que necesitemos, y que cada una tenga una función específica; la primera paleta inserta el color elegido en el campo de un formulario, y las dos siguientes sirven para seleccionar los colores del texto y el fondo de un recuadro.

En el primer caso nuestra palabra comodín ha sido "formulario", y con ese comodín hemos creado una variable: "colorformulario", donde se guarda el color que se selecciona; y un método metodoformulario(color), que recibe como parámetro el color que se elige y contiene el código que deseamos ejecutar.

Luego debemos usar el método de la librería adjunta ponerPaleta(comodín, tamaño, color). Solo nos falta indicar que su segundo parámetro consiste en el tamaño en píxeles de cada celda activa, y el tercer parámetro el color que estará activo al cargarse la página.

Véase las definiciones para la primera de las paletas:

<script type="text/javascript">
	var colorformulario = "#33CC33";
	function metodoformulario(color)	{
		document.forms.ej_1.elColor.value = "#" + color;
	}
	ponerPaleta("formulario", 16, colorformulario);
</script>

Creo que no es necesario explicar el funcionamiento de la segunda y tercera paleta.


Una paleta para muchos usos

La siguiente paleta ya tiene una funcionalidad más dinámica. Podemos ver como con una sola paleta se pueden seleccionar/asignar los colores de distintos objetos.

A pesar de la aparente complejidad que podría tener un script reutilizable, ayudándonos de la librería que hemos proporcionado, tan solo tenemos que reasignar en la paleta el color que deseemos según sea el caso. La selección de un elemento resalta el recuadro que deseemos con el método "activaColor(idBase, color)"

El código es este:

<script type="text/javascript">
var multiactivo = "color";
var multicolor = colorcolormulti = "#CC0033";
var multibackgroundColor = "#FFCCCC";
var multiborderColor = "#333366";
function metodocolormulti(color)	{
	elemento = document.forms.ejemplo2["donde"].value;
	document.getElementById("ej2").style[elemento] = "#" + color;
	window["multi" + elemento] = "#" + color;
}
ponerPaleta("colormulti", 10, colorcolormulti);
</script>

Nótese que nuestro nuevo comodín "colormulti", se sigue usando igual que en los casos anteriores, pero se aplica a distintos elementos dependiendo de la selección realizada; también se actualiza la variable asociada. El elemento a modificar se recoge del elemento del formulario que estamos usando.

Otra cosa a destacar es que al cambiar la selección activa, se marca en la paleta el color correspondiente usando de nuestra librería el método activaColor(), cuyos parámetros son el comodín que hemos usado en la creación de la paleta, y el color que queremos activar.


Aspecto visual

Hasta ahora solo se ha contemplado el tamaño de la celda, pero también podemos cambiar otros aspectos visuales con el método ponerPaleta2(), con 3 nuevos parámetros: el número de columnas, si el visor es cuadrado y si el mismo se muestra.

Se adjunta un pequeño formulario con las variantes posibles y un generador del código para insertar en el destino deseado.