Unidad 3. Básico: Colores en la web


Los colores

Una página web está diseñada y pensada para verse a través de un monitor. El monitor utiliza los colores primarios aditivos rojo, verde y azul. Esto es conocido como el sistema RGB por las siglas de los colores en inglés.

De esta forma podemos crear un color indicando la cantidad de cada uno de los primarios que interviene en la mezcla. Para cada color podemos especificar 256 intensidades distintas, y al ser tres colores podemos obtener un total aproximado de 16 millones de colores.

En html, podemos definir un color RGB con valores hexadecimales, siguiendo el formato #F7F0E2 (el más utilizado), con valores para cada color entre el 00 (mínimo) y FF (máximo). Podemos expresarlo con valores decimales, con la fórmula rgb(247, 240, 226), con valores entre 0 y 255, o siguiendo este mismo formato con valores porcentuales, como rgb(90%, 60%, 35%). Así, el color        lo podemos definir como #FA75C4, rgb(250, 117, 196) o rgb(98%, 46%, 77%).

Además los colores más comunes tienen un nombre propio en inglés. Por lo que en vez de poner #0000FF podemos escribir directamente blue.

Puedes ver estos colores en la siguiente tabla:

Color Nombre RGB Color Nombre RGB
AliceBlue #F0F8FF LightPink #FFB6C1
AntiqueWhite #FAEBD7 LightSalmon #FFA07A
Aqua #00FFFF LightSeaGreen #20B2AA
Aquamarine #7FFFD4 LightSkyBlue #87CEFA
Azure #F0FFFF LightSlateGray #778899
Beige #F5F5DC LightSlateGrey #778899
Bisque #FFE4C4 LightSteelBlue #B0C4DE
Black #000000 LightYellow #FFFFE0
BlanchedAlmond #FFEBCD Lime #00FF00
Blue #0000FF LimeGreen #32CD32
BlueViolet #8A2BE2 Linen #FAF0E6
Brown #A52A2A Magenta #FF00FF
BurlyWood #DEB887 Maroon #800000
CadetBlue #5F9EA0 MediumAquamarine #66CDAA
Chartreuse #7FFF00 MediumBlue #0000CD
Chocolate #D2691E MediumOrchid #BA55D3
Coral #FF7F50 MediumPurple #9370DB
CornflowerBlue #6495ED MediumSeaGreen #3CB371
Cornsilk #FFF8DC MediumSlateBlue #7B68EE
Crimson #DC143C MediumSpringGreen #00FA9A
Cyan #00FFFF MediumTurquoise #48D1CC
DarkBlue #00008B MediumVioletRed #C71585
DarkCyan #008B8B MidnightBlue #191970
DarkGoldenrod #B8860B MintCream #F5FFFA
DarkGray #A9A9A9 MistyRose #FFE4E1
DarkGrey #A9A9A9 Moccasin #FFE4B5
DarkGreen #006400 NavajoWhite #FFDEAD
DarkKhaki #BDB76B Navy #000080
DarkMagenta #8B008B OldLace #FDF5E6
DarkOliveGreen #556B2F Olive #808000
DarkOrange #FF8C00 OliveDrab #6B8E23
DarkOrchid #9932CC Orange #FFA500
DarkRed #8B0000 OrangeRed #FF4500
DarkSalmon #E9967A Orchid #DA70D6
DarkSeaGreen #8FBC8F PaleGoldenrod #EEE8AA
DarkSlateBlue #483D8B PaleGreen #98FB98
DarkSlateGray #2F4F4F PaleTurquoise #AFEEEE
DarkSlateGrey #2F4F4F PaleVioletRed #DB7093
DarkTurquoise #00CED1 PapayaWhip #FFEFD5
DarkViolet #9400D3 PeachPuff #FFDAB9
DeepPink #FF1493 Peru #CD853F
DeepSkyBlue #00BFFF Pink #FFC0CB
DimGray #696969 Plum #DDA0DD
DimGrey #696969 PowderBlue #B0E0E6
DodgerBlue #1E90FF Purple #800080
FireBrick #B22222 Red #FF0000
FloralWhite #FFFAF0 RosyBrown #BC8F8F
ForestGreen #228B22 RoyalBlue #4169E1
Fuchsia #FF00FF SaddleBrown #8B4513
Gainsboro #DCDCDC Salmon #FA8072
GhostWhite #F8F8FF SandyBrown #F4A460
Gold #FFD700 SeaGreen #2E8B57
Goldenrod #DAA520 Seashell #FFF5EE
Gray #808080 Sienna #A0522D
Grey #808080 Silver #C0C0C0
Green #008000 SkyBlue #87CEEB
GreenYellow #ADFF2F SlateBlue #6A5ACD
Honeydew #F0FFF0 SlateGray #708090
HotPink #FF69B4 SlateGrey #708090
IndianRed #CD5C5C Snow #FFFAFA
Indigo #4B0082 SpringGreen #00FF7F
Ivory #FFFFF0 SteelBlue #4682B4
Khaki #F0E68C Tan #D2B48C
Lavender #E6E6FA Teal #008080
LavenderBlush #FFF0F5 Thistle #D8BFD8
LawnGreen #7CFC00 Tomato #FF6347
LemonChiffon #FFFACD Turquoise #40E0D0
LightBlue #ADD8E6 Violet #EE82EE
LightCoral #F08080 Wheat #F5DEB3
LightCyan #E0FFFF White #FFFFFF
LightGoldenrodYellow #FAFAD2 WhiteSmoke #F5F5F5
LightGray #D3D3D3 Yellow #FFFF00
LightGreen #90EE90 YellowGreen #9ACD32
LightGrey #D3D3D3

 

Los colores no se ven igual en todos los monitores, hay un conjunto de colores que son recomendables para su utilización en las páginas web ya que muestran pocas diferencias de color en distintos monitores, son conocidos como colores web o colores seguros.

Existen 216 colores seguros para web, se obtienen combinando los valores 00, 33, 66, 99, CC y FF y son estos:

  #000000   #000033   #000066   #000099   #0000CC   #0000FF
  #003300   #003333   #003366   #003399   #0033CC   #0033FF
  #006600   #006633   #006666   #006699   #0066CC   #0066FF
  #009900   #009933   #009966   #009999   #0099CC   #0099FF
  #00CC00   #00CC33   #00CC66   #00CC99   #00CCCC   #00CCFF
  #00FF00   #00FF33   #00FF66   #00FF99   #00FFCC   #00FFFF
  #330000   #330033   #330066   #330099   #3300CC   #3300FF
  #333300   #333333   #333366   #333399   #3333CC   #3333FF
  #336600   #336633   #336666   #336699   #3366CC   #3366FF
  #339900   #339933   #339966   #339999   #3399CC   #3399FF
  #33CC00   #33CC33   #33CC66   #33CC99   #33CCCC   #33CCFF
  #33FF00   #33FF33   #33FF66   #33FF99   #33FFCC   #33FFFF
  #660000   #660033   #660066   #660099   #6600CC   #6600FF
  #660033   #663333   #663366   #663399   #6633CC   #6633FF
  #666600   #666633   #666666   #666699   #6666CC   #6666FF
  #669900   #669933   #669966   #669999   #6699CC   #6699FF
  #66CC00   #66CC33   #66CC66   #66CC99   #66CCCC   #66CCFF
  #66FF00   #66FF33   #66FF66   #66FF99   #66FFCC   #66FFFF
  #990000   #990033   #990066   #990099   #9900CC   #9900FF
  #993300   #993333   #993366   #993399   #9933CC   #9933FF
  #996600   #996633   #996666   #996699   #9966CC   #9966FF
  #999900   #999933   #999966   #999999   #9999CC   #9999FF
  #99CC00   #99CC33   #99CC66   #99CC99   #99CCCC   #99CCFF
  #99FF00   #99FF33   #99FF66   #99FF99   #99FFCC   #99FFFF
  #CC0000   #CC0033   #CC0066   #CC0099   #CC00CC   #CC00FF
  #CC3300   #CC3333   #CC3366   #CC3399   #CC33CC   #CC33FF
  #CC6600   #CC6633   #CC6666   #CC6699   #CC66CC   #CC66FF
  #CC9900   #CC9933   #CC9966   #CC9999   #CC99CC   #CC99FF
  #CCCC00   #CCCC33   #CCCC66   #CCCC99   #CCCCCC   #CCCCFF
  #CCFF00   #CCFF33   #CCFF66   #CCFF99   #CCFFCC   #CCFFFF
  #FF0000   #FF0033   #FF0066   #FF0099   #FF00CC   #FF00FF
  #FF3300   #FF3333   #FF3366   #FF3399   #FF33CC   #FF33FF
  #FF6600   #FF6633   #FF6666   #FF6699   #FF66CC   #FF66FF
  #FF9900   #FF9933   #FF9966   #FF9999   #FF99CC   #FF99FF
  #FFCC00   #FFCC33   #FFCC66   #FFCC99   #FFCCCC   #FFCCFF
  #FFFF00   #FFFF33   #FFFF66   #FFFF99   #FFFFCC   #FFFFFF

Los colores que tienen repetidos los valores de cada color básico, se pueden representar con sólo un valor para cada color. Por ejemplo, #FF9900 es lo mismo que #F90, y #FFFFFF es igual que #FFF.

   Inicio    




.