sábado, 13 de septiembre de 2014
TAREA 3: Rango de colores en HTML
COLORES EN HTML
Quizá, una de las posibilidades más llamativas a la hora de
montar una página sea el uso de colores para el fondo de la misma. Si no
asignamos un color de fondo de pantalla, éste será blanco por defecto del área
de navegación.
Para cambiar eso, necesitamos añadirle al tag <body>
otro atributo. En concreto el que usamos para cambiar el color de la página es bgcolor, y le asignaremos un valor que
indique el color que deseamos. La palabra bgcolor es abreviatura de background
color (color de fondo). Por ejemplo: si queremos que nuestra página tenga como
color de fondo el amarillo, el tag <body> quedará de la siguiente forma: <body bgcolor=”yellow”>
El color de fondo es sin duda lo primero que capta el
usuario; pero ¿cómo se definen los colores en HTML? Pues bien, podemos
establecer los colores de fondo con su nombre en inglés, por ejemplo: red,
pink, skyblue o lightgreen. Esto es válido en la mayoría de los casos. De
hecho, existe una variedad suficiente de nombres de colores como para
satisfacer todas nuestras necesidades. Pero existe una manera alternativa de
establecer el color. Para ello, necesitamos saber cómo se crean los colores en
el monitor. Para definir un color cualquiera en el monitor, se hace a partir de
una combinación de tres colores: rojo, verde y azul. Todos los colores que
pueda ver en su monitor están formados a partir de juntar determinadas
proporciones de estos tres colores. Por esta razón, los llamamos colores
primarios (o también colores básicos).
El magenta, el cyan y el amarillo son los colores primarios
de la tinta. A partir de esos tres, se forman los demás colores en tinta (para
imprimir). Por ejemplo, el verde está
formado por azul y amarillo. Si mezcla los tres colores primarios de la tinta,
obtendrá el negro. Por esta razón, a la mezcla de estos colores-tinta se la
conoce como síntesis substractiva.
Sin embargo, el monitor de su ordenador emite luz. Y los colores de la luz o
colores luz, se basan en otros tres colores primarios que son: rojo, verde y
azul. La mezcla de estos tres colores en la mayor cantidad posible da como
resultado el blanco. Por esta razón, se dice que los colores-luz se mezclan por
síntesis aditiva.
Nosotros vamos a usar los colores-luz, ya que luz es lo que
emite el monitor. Cualquier color que necesitemos crear se forma mezclando
distintas proporciones de rojo, verde y azul. Le podemos indicar a nuestro
código HTML un color cualquiera en el que cada uno de los colores primarios
reciba un valor entre 0 y 255. Esto hace un total de 256 posibles proporciones
para cada uno de los tres colores primarios. Por lo tanto tenemos 256*256*256 =
16,777,216 colores posibles.
Por ejemplo, el amarillo estaría formado por el máximo
posible de rojo, el máximo posible de verde y nada de azul, es decir, sería la
combinación 255,255,0. Los valores de los colores primarios los expresaremos
siempre en dicho orden. Por eso, a este formato de color se le conoce como RGB
(de Red, Green, Blue). En muchos libros y programas verá que se refieren a este
formato con el nombre traducido RVA (de Rojo, Verde, Azul).
Sin embargo, no es tan fácil. Los creadores de HTML,
decidieron que había llegado el momento de complicarnos un poco la vida y han
hecho el lenguaje de tal modo que los valores de los tres colores primarios hay
que expresarlos en hexadecimal y con dos dígitos.
Como sabemos, la numeración hexadecimal permite emplear las
letras de la A a la F, asignándoles los valores numéricos de 10 a 15. Así pues,
el 0 decimal sería 00 hexadecimal, el 15 decimal sería 0F en hexadecimal, el
255 decimal sería FF en hexadecimal, y así sucesivamente. Esto en realidad,
viene dado por una serie de normas y fundamentos de numeración que se
establecieron en los primeros tiempos de la informática (sí, cuando los
ordenadores iban a válvulas) y que siguen vigentes en nuestros días por haber
demostrado su eficiencia en muchos terrenos. Así pues, el color amarillo, que
lo definíamos como 255 de rojo, 255 de verde y 0 de azul, expresado en
hexadecimal sería FFFF00. Los dos primeros dígitos expresan la proporción de
rojo (FF=255), los dos siguientes la de verde y los dos últimos la de azul.
Además HTML nos pide que añadamos, delante de la combinación de colores, el
signo #; por lo tanto tenemos que:
<body bgcolor=”yellow”> sería equivalente a <body
bgcolor=”#FFFF00”>
Este mismo Sistema para fijar el color de fondo nos servirá
para establecer los colores de texto y de otros elementos de la página web.
Existen lo que se llaman colores seguros para la web. Son una
paleta de 216 posibles combinaciones. Son colores seguros para la web aquéllos
que se visualizan exactamente igual en una plataforma PC que en un Macintosh,
ya sea con un Navegador Internet Explorer o con Netscape Navigator. Nuestra
página puede ser visitada por usuarios de distintas plataformas y deben poder
verla igual. Los colores seguros para la web son aquéllos que están formados
por cualquier combinación de los valores 00, 33, 66, 99, CC o FF. Así pues, los
siguientes colores serán seguros para la web:
#FF66CC
#FFFFFF
#00CC99
#FF3366
Y, en general,
cualquiera que cumpla la condición de que los tres valores respondan a uno de
los valores especificados. En general, optaremos por tonos pastel o tonos
apagados para el fondo.
El valor que se le
pasa a un atributo puede ir indistintamente entre comillas o sin ellas. Por
ejemplo:
<body bgcolor=”#FFFF00”>
es igualmente válido <body bgcolor=#FFFF00>
Debemos poner cuidado en que si
ponemos comillas al principio del valor, debemos ponerlas al final y viceversa.
Otro aspecto a observar es que funcionaría igual si los valores los pusiéramos
en minúsculas.
Ejemplos de colores para HTML
A continuación, se presenta una
lista de colores de ejemplo que puede emplear en sus páginas. Empléela como
referencia para localizar colores para fondos, textos, bordes, barra de scroll,
etc.
CÓDIGO
|
NOMBRE
|
CÓDIGO
|
NOMBRE
|
#F0F8FF
|
aliceblue
|
#FFA07A
|
lightsalmon
|
#FAEBD7
|
antiquewhite
|
#20B2AA
|
lightseagreen
|
#00FFFF
|
aqua
|
#87CEFA
|
lightseablue
|
#7FFFD4
|
aquamarine
|
#778899
|
lightslategreen
|
#F0FFFF
|
azure
|
#B0C4DE
|
lightsteelblue
|
#F5F5DC
|
beige
|
#FFFFE0
|
lightyellow
|
#FFE4C4
|
bisque
|
#00FF00
|
lime
|
#000000
|
black
|
#32CD32
|
limegreen
|
#FFEBCD
|
blanched
|
#FAF0E6
|
linen
|
#0000FF
|
blue
|
#FF00FF
|
magenta
|
#8A2BE2
|
blueviolet
|
#800000
|
maroon
|
#A52A2A
|
brown
|
#66CDAA
|
mediumaqua
|
#DEB887
|
burlywood
|
#0000CD
|
mediumblue
|
#5F9EA0
|
cadetblue
|
#BA55D3
|
mediumorchid
|
#7FFF00
|
chartreuse
|
#9370DB
|
mediumpurple
|
#D2691E
|
chocolate
|
#3CB371
|
mediumseagreen
|
#FF7F50
|
coral
|
#7B68EE
|
mediumslateblue
|
#6495ED
|
cornflower
|
#00FA9A
|
mediumspring
|
#FFF8DC
|
cornsilk
|
#48D1CC
|
mediumturquoise
|
#DC143C
|
crimson
|
#C71585
|
mediumviolet
|
#00FFFF
|
cyan
|
#191970
|
midnightblue
|
#00008B
|
darkblue
|
#F5FFFA
|
mintcream
|
#008B8B
|
darkcyan
|
#FFE4E1
|
mistyrose
|
#B8860B
|
darkgoldener
|
#FFE4B5
|
moccasin
|
#A9A9A9
|
darkgrey
|
#FFDEAD
|
navajowhite
|
#006400
|
darkgreen
|
#000080
|
navy
|
#BDB76B
|
darkkhaki
|
#FDF5E6
|
oldlace
|
#8B008B
|
darkmagent
|
#808000
|
olive
|
#556B2F
|
darkolivegreen
|
#6B8E23
|
olivedrab
|
#9932CC
|
darkorchid
|
#FF4500
|
orangered
|
#8B0000
|
darkred
|
#DA70D6
|
orchid
|
#E9967A
|
darksalmon
|
#EEE8AA
|
palegoldenred
|
#8FBC8B
|
darkseagreen
|
#98FB98
|
palegreen
|
#483D8B
|
darkslateblue
|
#AFEEEE
|
paleturquoise
|
#2F4F4F
|
darkslategreen
|
#DB7093
|
palevioletred
|
#00CED1
|
darkturquoise
|
#FFEFD5
|
papayawhip
|
#9400D3
|
darkviolet
|
#FFDAB9
|
peachpuff
|
#FF1493
|
deeppink
|
#CD853F
|
peru
|
#00BFFF
|
deepskyblue
|
#FFC0CB
|
pink
|
#696969
|
dimgray
|
#DDA0DD
|
plum
|
#1E90FF
|
dodgerblue
|
#B0E0E6
|
powderblue
|
#B22222
|
firebrick
|
#800080
|
purple
|
#FFFAF0
|
floralwhite
|
#FF0000
|
red
|
#228B22
|
forestgreen
|
#BC8F8F
|
rosybrown
|
#FF00FF
|
fuchsia
|
#4169E1
|
royalblue
|
#DCDCDC
|
gainsboro
|
#8B4513
|
saddlebrown
|
#F8F8FF
|
ghostwhite
|
#FA8072
|
salmon
|
#FFD700
|
gold
|
#F4A460
|
sandybrown
|
#DAA520
|
goldenred
|
#2E8B57
|
seagreen
|
#808080
|
gray
|
#FFF5EE
|
seashell
|
#008000
|
green
|
#A0522D
|
sienna
|
#ADFF2F
|
greenyellow
|
#C0C0C0
|
silver
|
#F0FFF0
|
honeydew
|
#87CEEB
|
skyblue
|
#FF69B4
|
hotpink
|
#6A5ACD
|
slateblue
|
#CD5C5C
|
indianred
|
#708090
|
slategray
|
#4B00B2
|
indigo
|
#FFFAFA
|
snow
|
#FFFFF0
|
ivory
|
#00FF7F
|
spinggreen
|
#F0E68C
|
khaki
|
#4682B4
|
steelblue
|
#E6E6FA
|
lavender
|
#D2B48C
|
tan
|
#FFF0F5
|
lavenderblue
|
#008080
|
teal
|
#7CFC00
|
lawngreen
|
#D8BFD8
|
thistle
|
#FFFACD
|
lemonchiffon
|
#FF6347
|
tomato
|
#ADD8E6
|
lightblue
|
#40E0D0
|
turquoise
|
#F08080
|
lightcoral
|
#EE82EE
|
violet
|
#E0FFFF
|
lightcyan
|
#F5DEB3
|
wheat
|
#FAFAD2
|
lightgolden
|
#FFFFFF
|
white
|
#90EE90
|
lightgreen
|
#F5F5F5
|
whitesmoke
|
#D3D3D3
|
lightgray
|
#FFFF00
|
yellow
|
#FFB6C1
|
lightpink
|
#9ACD32
|
yellowgreen
|
Podemos observar que algunos de
los códigos de la lista aparecen repetidos. Esto es porque existen códigos que
pueden reproducirse con más de un nombre. Aquellos colores cuyo nombre y color
aparecen en negritas y sombreados son de
los que se llaman seguros para la web.
Suscribirse a:
Entradas (Atom)