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.
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.