Si alguien nos pregunta ¿cuál es el color intermedio entre el blanco y el negro?, no tenemos ninguna duda y respondemos gris (y luego pensamos... ¡esta pregunta fue fácil!).
Y si queremos los colores para alguna aplicación informática, tenemos que concentrarnos en el concepto RGB que proviene de las iniciales de los tres colores básicos que se necesitan: rojo, verde y azul (en inglés: Red Green Blue)
Ahora los colores dejan de serlo para convertirse en unos números que se corresponden con la cantidad o porcentaje de cada componente. En resúmen, contestando más técnicamente la pregunta inicial, el negro es ausencia de los tres componentes (rojo, verde y azul)... el blanco es la máxima cantidad de ellos... y el gris es la mitad de cada uno.
Para mostrar colores en las páginas web hay que usar su descripción en inglés, siempre que esté definido; por ejemplo existe el negro (black), el blanco (white), el gris (gray)..., pero para otras tonalidades podría no existir una descripción, así que tenemos que pensar en un sistema que indique la cantidad de cada componente del color que queremos.
Uno de esos sistemas es una especie de función "rgb()" que recibe 3 parámetros que pueden ser números entre 0 y 255, donde el blanco sería rgb(255,255,255); también pueden usarse porcentajes: rgb(100%,100%,100%). Otra forma de representación consiste en una cadena de texto empezada por el carácter almohadilla (#) seguido de los valores hexadecimales de cada componente: #FFFFFF.
En el sistema hexadecimal cada dígito puede valer entre 0 y 15 (0..F), y para los colores necesitamos un rango entre 0 y 255 (00..FF). Seguidamente mostraremos la forma de convertir valores numéricos decimales/hexadecimales ayudándonos del lenguaje javascript.
// conversión de un número entre 0 y 255 a su valor hexadecimal.
// Por ejemplo valorHex(255) = "FF"
function valorHex(n) {
return "0123456789ABCDEF".charAt(parseInt(n / 16))
+ "0123456789ABCDEF".charAt(parseInt(n % 16));
}
// conversión de un número hexadecimal "00" y "FF"
// a su valor numérico decimal (entero positivo: 0..255).
// Por ejemplo valorDecimal("FF") = 255
function valorDecimal(s) {
return ("0123456789ABCDEF".indexOf(s.charAt(0)) * 16)
+ "0123456789ABCDEF".indexOf(s.charAt(1));
}
Con la ayuda de estos conversores que acabamos de definir podemos manipular mejor los colores de nuestra página. Propongo a continuación la declaración de un objeto "Color", donde la definición se realiza introduciendo como parámetro sus tres componentes en forma numérica, o si se prefiere como una cadena de texto.
// Objeto Color: a partir de sus 3 componentes
// Entero positivo: 0..255
function Color(Rojo, Verde, Azul) {
this.Rojo = Rojo;
this.Verde = Verde;
this.Azul = Azul;
this.toString = function() {
return "#" + valorHex(this.Rojo) + valorHex(this.Verde) + valorHex(this.Azul);
}
this.toArray = function() {
return new Array(this.Rojo, this.Verde, this.Azul);
}
this.fromString = function(s) {
return new Color(valorDecimal(s.substr(1, 2)),
valorDecimal(s.substr(3, 2)),
valorDecimal(s.substr(5, 2)));
}
}
Usuarios que han visto este tema también han visto...
- La preparación mental para ganar en Internet
- Cómo evitar un doble gasto al diseñar su página Web
- Usabilidad al milímetro
- Copyleft, la alternativa radical al Copyright
- Cuatro principios del diseño web.
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.