You are on page 1of 6

A.

Los colores en HTML


1. La notacin en hexadecimal
Como hemos visto ya en el captulo El texto y su presentacin, los colores se codi-
fican generalmente siguiendo el sistema RGB (del ingls Red, Green, Blue rojo,
verde y azul), utilizando un valor decimal de 0 a 255 para cada componente. Sin
embargo, el HTML ha preferido utilizar valores hexadecimales, es decir, de 00 a
FF, para cada componente. Esta notacin es ms compacta y tiene la ventaja de
expresar en 6 dgitos el conjunto de todos los colores disponibles. La notacin
hexadecimal puede resultar, a primera vista, algo desconcertante.
Pero cmo conocer este valor hexadecimal?
a. La conversin con calculadora
Aunque no muy elaborada desde el punto de vista informtico, esta solucin tiene
al menos la ventaja de poder calcular el valor hexadecimal si no dispone de aplica-
ciones grficas.
Las aplicaciones de Windows que proponen la ventana de color con los valores
RGB son numerosas (por ejemplo en Microsoft Word).
k
Convierta cada valor a hexadecimal con la aplicacin "Calculadora" de
Windows.
k
En el men Inicio - Programas - Accesorios - Calculadora, active la opcin
Cientfica.

E
d
i
t
i
o
n
s
E
N
I
-
A
l
l
r
i
g
h
t
s
r
e
s
e
r
v
e
d
Las imgenes y los fondos
Dominar el cdigo fuente 121
k
Codifique el valor a convertir pulsando las teclas de cifras con el botn Dec
activo (predeterminado).
k
Para obtener el valor hexadecimal, pulse el botn Hex.
En el Anexo B hallar una tabla de conversin de los valores decimales de 0 a
255 en valor hexadecimal.
Captulo 5
122 HTML 4
b. Pequeas aplicaciones de conversin
Es posible descargar pequeos programas que aseguran la conversin del color a
hexadecimal; as, Hexacolor, gratuito para los particulares, que encontrar en el
sitio www.htmledit.com, y ColorTohexa, por ejemplo, totalmente freeware. Ambos
programas, as como el sitio Web reseado, se encuentran en francs. Sin embar-
go, al tratarse de programas de interfaz sencilla, no encontrar ningn obstculo
para su uso.
Un doble clic sobre el rectngulo de color en Couleur permite cambiar de color.
c. Las aplicaciones grficas
Todas las aplicaciones grficas, como Adobe Photoshop, Paint Shop Pro, Macro-
media Fireworks..., proponen el valor RGB y su cdigo hexadecimal.
d. Los editores de HTML
Todos los editores de HTML proponen, naturalmente, la posibilidad de elegir cual-
quier color con su cdigo hexadecimal.
Algunos editores de HTML proponen directamente algunas herramientas grficas,
limitadas pero suficientes en el marco de la creacin de sitios, como la transparen-
cia, agregar texto a la imagen, la conversin de formato de imagen, la seleccin de
una parte de la imagen, etc.
A ttulo de ejemplo, veamos la ventana de color de Adobe Dreamweaver CS4.

E
d
i
t
i
o
n
s
E
N
I
-
A
l
l
r
i
g
h
t
s
r
e
s
e
r
v
e
d
Las imgenes y los fondos
Dominar el cdigo fuente 123
e. Los sitios Web
Muchos sitios destinados a los webmasters proponen pginas que detallan el
abanico de colores y su correspondencia en hexadecimal.
Algunas pginas Web dedicadas a la ilustracin de los colores se encuentran en
los ejemplos de esta obra, descargables en la direccin:
www.ediciones-eni.com/ejemplos en la carpeta "colores".
Las hojas de estilo (vase Captulo Las hojas de estilo) ofrecen, entre otras
posibilidades de notacin de colores, una notacin en RGB claramente ms
amigable. Por ejemplo el rojo podr escribirse: color: rgb(255,0,0).
2. La designacin mediante un nombre
Para designar colores, puede utilizarse su nombre. Estos nombres de colores estn
en ingls y se necesita un conocimiento avanzado del ingls para percibir todos los
matices entre nombres de color como crimson, gainsboro, oldlace, etc.
Adems, estos nombres no han sido normalizados por el W3C y cada navegador
(Internet Explorer o Firefox) tiene su propia lista de nombres y no reconoce los
nombres de color del competidor. Los riesgos de incompatibilidad son pues muy
elevados.
Captulo 5
124 HTML 4
Los profesionales de la creacin de sitios Web siguen siendo fieles a la codificacin
en hexadecimal, salvo tal vez para algunos grandes clsicos.
Color hexadecimal nombre
Negro #000000 black
Marrn #800000 maroon
Verde botella #008000 green
Verde oliva #808000 olive
Azul marino #000080 navy
Violeta #800080 purple
Cyan oscuro #008080 teal
Gris claro #C0C0C0 silver
Gris medio #808080 gray
Rojo #FF0000 red
Verde claro #00FF00 lime
Amarillo #FFFF00 yellow
Azul #0000FF blue
Fucsia #FF00FF fuchsia
Azul claro #00FFFF aqua
Blanco #FFFFFF white
Las hojas de estilo (vase Captulo Las hojas de estilo) ofrecen, entre otras
posibilidades de notacin de colores, una notacin en RGB claramente ms
amigable. Por ejemplo, el rojo podr escribirse: color: rgb(255,0,0).
B. Las imgenes de la Web
Las imgenes han contribuido en gran medida a la popularidad de la Web, crean-
do su aspecto amigable y atractivo que la convierten en un completo universo de
creacin y de comunicacin.
Para reducir al mximo el tiempo de transmisin, la Web reclama un formato de
imagen reducido y, por lo tanto, comprimido.

E
d
i
t
i
o
n
s
E
N
I
-
A
l
l
r
i
g
h
t
s
r
e
s
e
r
v
e
d
Las imgenes y los fondos
Dominar el cdigo fuente 125
Antes de incluir las imgenes, a menudo resulta indispensable convertirlas a un
formato (comprimido) compatible con la Web, optimizar su tamao y en especial
su tamao en bytes. Esta modificacin slo puede llevarse a cabo mediante
programas grficos como Adobe Photoshop, Paint Shop Pro, Macromedia Fire-
works o Gimp.
Por lo que respecta al diseo de pginas Web, la mayor reserva de herramientas
se encuentra precisamente en la propia Web. As, se pueden recuperar fcilmente
imgenes o "cliparts" apuntando con el ratn sobre la imagen y pulsando la opcin
Guardar imagen como del men contextual que aparece a continuacin.
Una bsqueda por la palabra clave "clipart" debera llevarle a sitios donde se
encuentran a su disposicin colecciones de imgenes gratuitas. Estas imgenes
estn ya en el formato adecuado.
Atencin: puede existir un copyright sobre ciertas imgenes, y la cortesa exige que
se pida permiso de uso para una difusin por la Web.
La Web slo soporta tres formatos de imagen, que son el GIF, el JPEG y el PNG.
Captulo 5
126 HTML 4

You might also like