Color de fondo aleatorio

Vamos a crear una página que tiene un color de fondo aleatorio, de modo que, cada vez que se visite, se muestre con un fondo distinto. Ahora bien, como el color de la página va a ser distinto cada vez, para asegurarnos que el texto se pueda leer correctamente, haremos que el texto de la página sea o blanco o negro, dependiendo de la gama del color de fondo: si es oscuro, el texto de la página será blanco y si el fondo es claro, el texto se verá en negro.

Hay que darse cuenta que, si el color es aleatorio, a veces saldrá más oscuro y a veces más claro. Para que se lea bien el texto, su color tiene que contrastar lo suficiente con el color de fondo, por eso calcularemos la oscuridad o claridad del fondo para fijar el color del texto.

Primero conseguiremos un color aleatorio.

function dame_numero_aleatorio(superior, inferior){
   var numPosibilidades = (superior + 1) - inferior;
   var aleat = Math.random() * numPosibilidades;
   aleat = Math.floor(aleat);
   aleat = (inferior + aleat);
   return aleat
}

function dame_color_aleatorio(){
   color_aleat="#"
   hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
   var inferior = 0;
   var superior = hexadecimal.length-1;
   for (i=0;i<6;i++){
      color_aleat += hexadecimal[dame_numero_aleatorio(superior, inferior)];
   }
   return color_aleat
}

Ahora veremos la manera de conocer la oscuridad o claridad de un color con aleatorio generado por Javascript. Para calcular la oscuridad (o claridad) de un color en formato RGB hexadecimal, vamos a realizar varios pasos:

Tenemos que saber que, a mayores valores de RGB, el color resultante será mas claro. Si los valores de RGB son más bajos, el color será más oscuro. Los valores de R, G y B, por separado pueden ir, en decimal, desde 0 a 255. Diremos que es claro cuando sea mayor que 255 / 2 y que es oscuro cuando sea menor de 255 / 2. Vamos a suponer un umbral a partir del cual el color lo consideramos más oscuro o más claro. Digamos que si sumamos por separado los valores rojo, verde y azul y nos dan más de la mitad de ((255 + 255 +255) / 2), es que el color es claro. Si está por debajo de ese umbral, el color es oscuro.

1. Separaremos los valores hexadecimales de los tres componentes del color (rojo, verde y azul)
2. Convertiremos esos valores a enteros en base 10
3. Sumamos los valores de cada color, obteniendo un número entero, del que vamos a deducir la claridad u oscuridad.
4. Si el número resultado de la suma es menor que ((255 + 255 + 255) / 2), entonces es que el color de fondo es oscuro, luego el color del texto debe ser claro. Y al revés, si deducimos que el color de fondo es claro, entonces el color de texto tendrá que ser oscuro.

Esto se hace de la siguiente manera, en código Javascript, teniendo un color en un string con el formato #RRGGBB:

//obtengo un aleatorio
colorin = dame_color_aleatorio()

//voy a extraer las tres partes del color
rojo = colorin.substring(1,3)
verde = colorin.substring(3,5)
azul = colorin.substring(5,7)

Siguiente

Usuarios que han visto este tema también han visto...

- Contador de dias online con JavaScript
- Cambio de color al poner el cursor
- Mostrar una imagen distinta cada vez que se carga la página en JavaScript
- Rollover con javascript
- Precarga de imagenes en Javascript

- Versión imprimible de este documento
- Enviar por e-mail este documento