Manual de HTML: Colores
Los colores son muy importantes para el aspecto de las páginas web y para su legibilidad. Conviene especificar todos los colores para no estar a merced de la configuración por defecto del navegador, que puede ser inadecuada para nuestra página, y hacerlo exclusivamente en CSS.
En el X Window System algunos colores tienen nombre, que podemos utilizar en HTML (colores para la web). Para ver la lista completa de todos los nombres de colores reconocidos por las X y su valor RGB decimal ejecutaremos el comando (esta lista de colores podemos encontrarla en el archivo /usr/share/X11/rgb.txt):
$ showrgb 255 250 250 snow 248 248 255 GhostWhite 245 245 245 WhiteSmoke 220 220 220 gainsboro 255 250 240 FloralWhite 253 245 230 OldLace 250 240 230 linen 250 235 215 AntiqueWhite 255 239 213 PapayaWhip ...
Partiendo de este listado, en CSS podemos definir un color de tres maneras:
- nombre: sistema poco recomendable, le damos el control del color al navegador.
p {background: red;}
- RGB hexadecimal: el sistema más utilizado.
p {background: #ff0000;}
- RBG decimal: sistema poco utilizado.
p {background: rgb(255,0,0);}
Veamos cada color con su valor RBG decimal, RGB hexadecimal y nombre:
Colores HTML | ||
RGB decimal | RGB hexadecimal | Nombre |
Rojos | ||
rgb(255,160,122) | #ffa07a | LightSalmon |
rgb(250,128,114) | #fa8072 | salmon |
rgb(233,150,122) | #e9967a | DarkSalmon |
rgb(205,92,92) | #cd5c5c | IndianRed |
rgb(220,20,60) | #dc143c | crimson |
rgb(255,0,0) | #ff0000 | red |
rgb(178,34,34) | #b22222 | firebrick |
rgb(139,0,0) | #8b0000 | DarkRed |
Rosados | ||
rgb(255,192,203) | #ffc0cb | pink |
rgb(255,182,193) | #ffb6c1 | LightPink |
rgb(255,105,180) | #ff69b4 | HotPink |
rgb(255,20,147) | #ff1493 | DeepPink |
rgb(199,21,133) | #c71585 | MediumVioletRed |
rgb(219,112,147) | #db7093 | PaleVioletRed |
Anaranjados | ||
rgb(240,128,128) | #f08080 | LightCoral |
rgb(255,127,80) | #ff7f50 | coral |
rgb(255,165,0) | #ffa500 | orange |
rgb(255,140,0) | #ff8c00 | DarkOrange |
rgb(255,99,71) | #ff6347 | tomato |
rgb(255,69,0) | #ff4500 | OrangeRed |
Amarillos | ||
rgb(255,215,0) | #ffd700 | gold |
rgb(255,255,0) | #ffff00 | yellow |
rgb(255,255,224) | #ffffe0 | LightYellow |
rgb(255,250,205) | #fffacd | LemonChiffon |
rgb(250,250,210) | #FAFAD2 | LightGoldenrodYellow |
rgb(255,239,213) | #ffefd5 | PapayaWhip |
rgb(255,228,181) | #ffe4b5 | moccasin |
rgb(255,218,185) | #ffdab9 | PeachPuff |
rgb(238,232,170) | #eee8aa | PaleGoldenrod |
rgb(240,230,140) | #f0e68c | khaki |
rgb(189,183,107) | #bdb76b | DarkKhaki |
Verdes | ||
rgb(173,255,47) | #adff2f | GreenYellow |
rgb(127,255,0) | #7fff00 | chartreuse |
rgb(124,252,0) | #7cfc00 | LawnGreen |
rgb(0,255,0) | #00FF00 | lime |
rgb(50,205,50) | #32cd32 | LimeGreen |
rgb(152,251,152) | #98fb98 | PaleGreen |
rgb(144,238,144) | #90ee90 | LightGreen |
rgb(0,250,154) | #00fa9a | MediumSpringGreen |
rgb(0,255,127) | #00ff7f | SpringGreen |
rgb(60,179,113) | #3cb371 | MediumSeaGreen |
rgb(46,139,87) | #2e8b57 | SeaGreen |
rgb(34,139,34) | #228b22 | ForestGreen |
rgb(0,128,0) | #008000 | green |
rgb(0,100,0) | #006400 | DarkGreen |
rgb(154,205,50) | #9acd32 | YellowGreen |
rgb(107,142,35) | #6b8e23 | OliveDrab |
rgb(128,128,0) | #808000 | olive |
rgb(85,107,47) | #556b2f | DarkOliveGreen |
rgb(143,188,143) | #8fbc8f | DarkSeaGreen |
rgb(32,178,170) | #20b2aa | LightSeaGreen |
rgb(0,139,139) | #008b8b | DarkCyan |
rgb(0,128,128) | #008080 | teal |
Pastel | ||
rgb(255,255,255) | #ffffff | white |
rgb(255,250,250) | #fffafa | snow |
rgb(240,255,240) | #f0fff0 | honeydew |
rgb(245,255,250) | #f5fffa | MintCream |
rgb(240,255,255) | #f0ffff | azure |
rgb(240,248,255) | #f0f8ff | AliceBlue |
rgb(248,248,255) | #f8f8ff | GhostWhite |
rgb(245,245,245) | #f5f5f5 | WhiteSmoke |
rgb(255,245,238) | #fff5ee | seashell |
rgb(253,245,230) | #fdf5e6 | OldLace |
rgb(255,250,240) | #fffaf0 | FloralWhite |
rgb(255,255,240) | #fffff0 | ivory |
rgb(250,235,215) | #faebd7 | AntiqueWhite |
rgb(250,240,230) | #faf0e6 | linen |
rgb(255,240,245) | #fff0f5 | LavenderBlush |
rgb(255,228,225) | #ffe4e1 | MistyRose |
Violetas | ||
rgb(230,230,250) | #e6e6fa | lavender |
rgb(216,191,216) | #d8bfd8 | thistle |
rgb(221,160,221) | #dda0dd | plum |
rgb(238,130,238) | #ee82ee | violet |
rgb(218,112,214) | #da70d6 | orchid |
rgb(255,0,255) | #FF00FF | fuchsia |
rgb(255,0,255) | #ff00ff | magenta |
rgb(186,85,211) | #ba55d3 | MediumOrchid |
rgb(147,112,219) | #9370db | MediumPurple |
rgb(138,43,226) | #8a2be2 | BlueViolet |
rgb(148,0,211) | #9400d3 | DarkViolet |
rgb(153,50,204) | #9932cc | DarkOrchid |
rgb(128,0,128) | #800080 | purple |
rgb(139,0,139) | #8b008b | DarkMagenta |
rgb(75,0,130) | #4B0082 | Indigo |
Azules | ||
rgb(224,255,255) | #e0ffff | LightCyan |
rgb(0,255,255) | #00ffff | aqua |
rgb(0,255,255) | #00ffff | cyan |
rgb(127,255,212) | #7fffd4 | aquamarine |
rgb(102,205,170) | #66cdaa | MediumAquamarine |
rgb(175,238,238) | #afeeee | PaleTurquoise |
rgb(64,224,208) | #40e0d0 | turquoise |
rgb(72,209,204) | #48d1cc | MediumTurquoise |
rgb(0,206,209) | #00ced1 | DarkTurquoise |
rgb(95,158,160) | #5f9ea0 | CadetBlue |
rgb(70,130,180) | #4682b4 | SteelBlue |
rgb(176,196,222) | #b0c4de | LightSteelBlue |
rgb(176,224,230) | #b0e0e6 | PowderBlue |
rgb(173,216,230) | #add8e6 | LightBlue |
rgb(135,206,235) | #87ceeb | SkyBlue |
rgb(135,206,250) | #87cefa | LightSkyBlue |
rgb(0,191,255) | #00bfff | DeepSkyBlue |
rgb(30,144,255) | #1e90ff | DodgerBlue |
rgb(100,149,237) | #6495ed | CornflowerBlue |
rgb(123,104,238) | #7b68ee | MediumSlateBlue |
rgb(106,90,205) | #6a5acd | SlateBlue |
rgb(65,105,225) | #4169e1 | RoyalBlue |
rgb(0,0,255) | #0000ff | blue |
rgb(0,0,205) | #0000cd | MediumBlue |
rgb(72,61,139) | #483d8b | DarkSlateBlue |
rgb(0,0,139) | #00008b | DarkBlue |
rgb(0,0,128) | #000080 | navy |
rgb(25,25,112) | #191970 | MidnightBlue |
Grises | ||
rgb(220,220,220) | #dcdcdc | gainsboro |
rgb(211,211,211) | #d3d3d3 | LightGrey |
rgb(192,192,192) | #C0C0C0 | silver |
rgb(169,169,169) | #a9a9a9 | DarkGrey |
rgb(128,128,128) | #808080 | grey |
rgb(105,105,105) | #696969 | DimGrey |
rgb(119,136,153) | #778899 | LightSlateGrey |
rgb(112,128,144) | #708090 | SlateGrey |
rgb(47,79,79) | #2f4f4f | DarkSlateGrey |
rgb(0,0,0) | #000000 | black |
Marrones | ||
rgb(245,245,220) | #f5f5dc | beige |
rgb(255,248,220) | #fff8dc | cornsilk |
rgb(255,235,205) | #ffebcd | BlanchedAlmond |
rgb(255,228,196) | #ffe4c4 | bisque |
rgb(245,222,179) | #f5deb3 | wheat |
rgb(255,222,173) | #ffdead | NavajoWhite |
rgb(222,184,135) | #deb887 | burlywood |
rgb(210,180,140) | #d2b48c | tan |
rgb(188,143,143) | #bc8f8f | RosyBrown |
rgb(244,164,96) | #f4a460 | SandyBrown |
rgb(218,165,32) | #daa520 | goldenrod |
rgb(184,134,11) | #b8860b | DarkGoldenrod |
rgb(205,133,63) | #cd853f | peru |
rgb(210,105,30) | #d2691e | chocolate |
rgb(139,69,19) | #8b4513 | SaddleBrown |
rgb(160,82,45) | #a0522d | sienna |
rgb(165,42,42) | #a52a2a | brown |
rgb(128,0,0) | #800000 | maroon |
Deja un comentario