JMiur [E]

Los códigos de color los utilizamos para establecer el color de fondo de los elementos, o el color de las fuentes:

background-color: #80BFFF;
color: #80BFFF;

En la web, un color es un valor expresado como RGB o una palabra que lo identifica y que tienen su origen en los nombres dados a los 16 colores de la paleta VGA original de allá lejos y hace tiempo: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white y yellow.

Los colores pueden definirse con tres números uno para el rojo (R=red), uno para el verde (G=green) y otro para el azul (B=blue) que representan la intensidad de sus componentes. Este sistema llamado RGB utiliza números que pueden variar entre 0 y 255 (un byte) o sea que, cada componente puede tener 256 valores distintos lo que, al combinarse (256 x 256 x 256) nos da una gama de 16 millones de colores (el llamado color verdadero).


Los colores primarios son estos:

rgb(255,0,0) = #FF0000 = Rojo
rgb(0,255,0) = #00FF00 = Verde
rgb(0,0,255) = #0000FF = Azul

Los colores secundarios son:

rgb(0,255,255) = #00FFFF = Cyan
rgb(255,0,255) = #FF00FF = Magenta
rgb(255,255,0) = #FFFF00 = Amarillo

Los tonos de gris van desde el blanco (todos los colores con intensidad máxima) y el negro (todos los colores con intensidad mínima), es decir van desde rgb(0,0,0) hasta rgb(255,255,255).

Para crear tonos de gris, la técnica a utilizar es sencilla, los tres valores de RGB deben ser iguales:

rgb(0,0,0) = #000000 = Negro
rgb(64,64,64) = #404040 = Gris Oscuro
rgb(128,128,128) = #808080 = Gris
rgb(192,192,192) = #C0C0C0 = Gris Claro
rgb(255,255,255) = #FFFFFF = Blanco

Para conseguir "tonos" de un determinado color, usamos simple aritmética; si partimos del rojo rgb(255,0,0) y luego, por ejemplo, colocamos valores progresivos en el componente verde, obtendremos una gama:

0326496128160192224255

Lo mismo pasaría si variamos el otro componente, el azul:

0326496128160192224255

O ambos componentes simultáneamente:

0326496128160192224255

Para los colores puros (saturados) se combinan sólo dos colores primarios: rgb(X,Y,0), rgb(Y,X,0), rgb(0,X,Y) o rgb(0,Y,X) donde X no es cero y es mayor o igual que Y. Entonces:
  • si Y = 0 es un color primario.
  • si X = Y es un color secundario
  • si Y = X / 2 es un intermedio entre un color primario y un color secundario (rgb(255,128,0) = naranja)
  • si Y < X / 2 es un intermedio pero más cercano al color primario (rgb(255,64,0) = naranja rojizo)
  • si Y > X / 2 es un intermedio pero más cercano al color secundario (rgb(255,192,0) = naranja amarillento)
Los colores expresados como RGB pueden ser escritos de cuatro formas diferentes:
  • como un valor hexadecimal doble: #00CC00 que varía entre 000000 y FFFFFF
  • como un valor hexadecimal simple: #0C0 que varía entre 00 y FF
  • como un valor decimal: rgb(0,204,0) donde cada valor puede variar entre 0 y 255
  • como un porcentaje: rgb(0%,80%,0%) donde cada valor puede variar entre 0.0 y 100.0
Aunque cada uno elegirá el tipo de escritura que le resulte más cómodo, el formato hexadecimal es el más empleado. Los números hexadecimales, en lugar de utilizar 10 símbolos como el sistema decimal (0 ... 9) utilizan 16 (0 1 2 3 4 5 6 7 8 9 A B C D E F); así, en lugar del número 10, usamos el número A o 0A (ver tabla).

En un color hexadecimal, cada componente está representado por dos dígitos, por ejemplo:

#F08000 = F0 80 00


En la web, hay una gama de colores llamados "seguros" es decir, que no serán distorsionados por las diferentes tarjetas de video y se compone de 216 colores que resultan de todas las combinaciones posibles de seis valores 0, 51, 102, 153, 204 y 255 (00, 33, 66, 99, CC y FF) para cada uno de los componentes rojo, verde y azul (6^3 = 216) ¿Por qué esos números? Porque representan porcentajes de intensidad exactos (0%, 20%, 40%, 60%, 80% y 100%)

Como los monitores podrían manejar paletas de hasta 256 colores, esos 40 colores sin usar, Windows los reserva para identificar 20 colores de sistema del sistema operativo y deja otros 20 para que pueda definir el usuario en cada aplicación.

Esos "colores seguros", tienen "nombres así que en lugar de usar valores RGB podemos usar esos nombres. Así que es cualquiera de estos tres códigos, indica un color blanco:

color: #FFFFFF;
color: rgb(255,255,255);
color: white;


aliceblue
#F0F8FF
antiquewhite
#FAEBD7
aqua
#00FFFF
aquamarine
#7FFFD4
azure
#F0FFFF
beige
#F5F5DC
bisque
#FFE4C4
black
#000000
blanchedalmond
#FFEBCD
blue
#0000FF
blueviolet
#8A2BE2
brown
#A52A2A
burlywood
#DEB887
cadetblue
#5F9EA0
chartreuse
#7FFF00
chocolate
#D2691E
coral
#FF7F50
cornflowerblue
#6495ED
cornsilk
#FFF8DC
crimson
#DC143C
cyan
#00FFFF
darkblue
#00008B
darkcyan
#008B8B
darkgoldenrod
#B8860B
darkgray
#A9A9A9
darkgreen
#006400
darkkhaki
#BDB76B
darkmagenta
#8B008B
darkolivegreen
#556B2F
darkorange
#FF8C00
darkorchid
#9932CC
darkred
#8B0000
darksalmon
#E9967A
darkseagreen
#8FBC8B
darkslateblue
#483D8B
darkslategray
#2F4F4F
darkturquoise
#00CED1
darkviolet
#9400D3
deeppink
#FF1493
deepskyblue
#00BFFF
dimgray
#696969
dodgerblue
#1E90FF
firebrick
#B22222
floralwhite
#FFFAF0
forestgreen
#228B22
fuchsia
#FF00FF
gainsboro
#DCDCDC
ghostwhite
#F8F8FF
gold
#FFD700
goldenrod
#DAA520
gray
#808080
green
#008000
greenyellow
#ADFF2F
honeydew
#F0FFF0
hotpink
#FF69B4
indianred
#CD5C5C
indigo
#4B0082
ivory
#FFFFF0
khaki
#F0E68C
lavender
#E6E6FA
lavenderblush
#FFF0F5
lawngreen
#7CFC00
lemonchiffon
#FFFACD
lightblue
#ADD8E6
lightcoral
#F08080
lightcyan
#E0FFFF
lightgoldenrodyellow
#FAFAD2
lightgreen
#90EE90
lightgrey
#D3D3D3
lightpink
#FFB6C1
lightsalmon
#FFA07A
lightseagreen
#20B2AA
lightskyblue
#87CEFA
lightslategray
#778899
lightsteelblue
#B0C4DE
lightyellow
#FFFFE0
lime
#00FF00
limegreen
#32CD32
linen
#FAF0E6
magenta
#FF00FF
maroon
#800000
mediumaquamarine
#66CDAA
mediumblue
#0000CD
mediumorchid
#BA55D3
mediumpurple
#9370DB
mediumseagreen
#3CB371
mediumslateblue
#7B68EE
mediumspringgreen
#00FA9A
mediumturquoise
#48D1CC
mediumvioletred
#C71585
midnightblue
#191970
mintcream
#F5FFFA
mistyrose
#FFE4E1
moccasin
#FFE4B5
navajowhite
#FFDEAD
navy
#000080
oldlace
#FDF5E6
olive
#808000
olivedrab
#6B8E23
orange
#FFA500
orangered
#FF4500
orchid
#DA70D6
palegoldenrod
#EEE8AA
palegreen
#98FB98
paleturquoise
#AFEEEE
palevioletred
#DB7093
papayawhip
#FFEFD5
peachpuff
#FFDAB9
peru
#CD853F
pink
#FFC0CB
plum
#DDA0DD
powderblue
#B0E0E6
purple
#800080
red
#FF0000
rosybrown
#BC8F8F
royalblue
#4169E1
saddlebrown
#8B4513
salmon
#FA8072
sandybrown
#F4A460
seagreen
#2E8B57
seashell
#FFF5EE
sienna
#A0522D
silver
#C0C0C0
skyblue
#87CEEB
slateblue
#6A5ACD
slategray
#708090
snow
#FFFAFA
springgreen
#00FF7F
steelblue
#4682B4
tan
#D2B48C
teal
#008080
thistle
#D8BFD8
tomato
#FF6347
turquoise
#40E0D0
violet
#EE82EE
wheat
#F5DEB3
white
#FFFFFF
whitesmoke
#F5F5F5
yellow
#FFFF00
yellowgreen
#9ACD32

12 comentarios:

...Markos...  

¡Interesante esto de los colores!

Saludos

Responder
Toni  

Muy buen artículo, gracias.

Responder
Gem@  

jajajaja perdonaaa pero casi me da algo al verte en plan navideño jajajaja !!que bueno¡¡
Una decoración austera pero con buen sentido de humor al mismo tiempo.
Gracias por hacerme reír con ganas :D

Responder
JMiur  

¿Risa? ¡Y yo que creí que estaba muy elegante con mi gorrito! :D

Responder
Gem@  

!!Y lo estás y también abrigadito¡¡ a mi me vendría muy bien con este frío ufff hace un tiempo verdaderamente navideño, solo falta que nevara pero no ocurrirá al menos en esta zona :(

Responder
JMiur  

Bueno, pues yo me siento un poco acalorado con los 35 grados de Buenos Aires ... sopla un poco que necesitamos viento :D

Responder
Sisco  

Como fan de los colores en cualquiera de sus interpretaciones, es estupendo este artículo.

Responder
JMiur  

Me alegro que te gustara, Sisco :)

Responder
Josefina  

todo lo que fui leyendo me sirvió muchísimo...
algo sobre colores...muy bueno ! y muy didáctica la forma de explicar.
gracias x compartir !!!

Responder
JMiur  

Gracias por el comentario, Josefina :)

Responder
deni  

olaa...oie esk tngo un problema, tengo una plantilla de la pagina web google templates o algo asi y no se como cambiar el color a las letras! ayudame porfa,me refiero a las de las entradas..:(

Responder
Alastor-Soujiro Balkzarsson  

muchas gracias por el aporte esta muy bien pero hay un pequeño error con el ejemplo de la converción de decimal a hexadecimal.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR