Inicio > HTML, Programación > Colores en páginas HTML

Colores en páginas HTML

rgb El uso del color en un documento solo tiene sentido únicamente cuando va a ser visualizado o impreso en un dispositivo capaz de reproducir ese tipo de información, tal como puede ser una pantalla o una impresora a color. La composición de los colores difiere según el dispositivo. Si se va a utilizar como soporte del documento un papel, lo usual es partir de un fondo blanco al que se le van añadiendo unos colores base, concretamente celeste, magenta y amarillo, para conseguir otros, siendo el negro la combinación de esos tres. En contraposición, si el documento va a ser visualizado en una pantalla, se parte de un fondo negro y los colores básicos son rojo, verde y azul, cuya adición va produciendo los restantes colores hasta llegar al blanco como combinación de los tres.

Dado que los navegadores muestran los documentos HTML en una pantalla, no es de extrañar que el modelo de color utilizado en HTML sea el RGB (Red, Green, Blue).

Un color codificado en RGB se compone de tres bytes, o lo que es lo mismo, 24 bits, utilizándose un byte, 8 bits, para cada componente: rojo, verde y azul. Con 8 bits pueden representarse 256 colores diferentes: de 0 a 255 en decimal o de 00 a FF en hexadecimal. Esto significa que podríamos definir colores usando 256 tonalidades para rojo, otras tantas para verde y lo mismo para el azul. Si por cada rojo tenemos 256 de verde y por cada verde 256 de azul, una simple multiplicación: 256x256x256 nos dirá el número total de colores que podemos obtener: 16.777.216. Más de dieciséis millones de colores.

NOTA:
En realidad no son 16 millones de colores diferentes, ya que además de colores realmente distintos existirán miles de tonalidades o matices de un mismo color. En muchas ocasiones nuestra vista ni siquiera nos permitirá apreciar esas pequeñas diferencias.

Para asignar al atributo color, o cualquier otro que acepte un color, un valor RGB tendremos que expresarlo así:

color="#rrvvaa"

La almohadilla que precede a la secuencia de dígitos indica que se trata de un código RGB en hexadecimal. Los valores de rr, vv, aa, indicarán la intensidad de rojo, verde y azul, respectivamente, a usar para obtener el color. Cada uno de ellos debe de estar comprendido entre 00 y FF.

Colores más usuales:
Color Nombre Código
  Snow #FFFAFA
  Ghost White #F8F8FF
  White Smoke #F5F5F5
  Gainsboro #DCDCDC
  FloralWhite #FFFAF0
  Old Lace #FDF5E6
  Linen #FAF0E6
  Antique White #FAEBD7
  Papaya Whip #FFEFD5
  Blanched Almond #FFEBCD
  Bisque #FFE4C4
  PeachPuff #FFDAB9
  Navajo White #FFDEAD
  Moccasin #FFE4B5
  Cornsilk #FFF8DC
  Ivory #FFFFF0
  Lemon Chiffon #FFFACD
  Seashell #FFF5EE
  Honeydew #F0FFF0
  Mint Cream #F5FFFA
  Azure #F0FFFF
  Alice Blue #F0F8FF
  Lavender #E6E6FA
  Lavender Blush #FFF0F5
  Misty Rose #FFE4E1
  White #FFFFFF
  Black #000000
  Dark Slate Gray #2F4F4F
  Dim Grey #696969
  SlateGrey #708090
  Light Slate Gray #778899
  Dark Grey #A9A9A9
  Gray #BEBEBE
  Light Gray #D3D3D3
  Midnight Blue #191970
  Navy Blue #000080
  Cornflower Blue #6495ED
  Dark Slate Blue #483D8B
  Slate Blue #6A5ACD
  Medium Slate Blue #7B68EE
  Light Slate Blue #8470FF
  Medium Blue #0000CD
  Royal Blue #4169E1
  Blue #0000FF
  Dodger Blue #1E90FF
  Deep Sky Blue #00BFFF
  Sky Blue #87CEEB
  Light Sky Blue #87CEFA
  Steel Blue #4682B4
  Light Steel Blue #B0C4DE
  Light Blue #ADD8E6
  Powder Blue #B0E0E6
  Pale Turquoise #AFEEEE
  Dark Turquoise #00CED1
  Medium Turquoise #48D1CC
  Turquoise #40E0D0
  Cyan #00FFFF
  Light Cyan #E0FFFF
  Cadet Blue #5F9EA0
  Medium Aquamarine #66CDAA
  Aquamarine #7FFFD4
  Dark Green #006400
  Dark Olive Green #556B2F
  Dark Sea Green #8FBC8F
  Sea #2E8B57
  Medium Sea Green #3CB371
  Light Sea Green #20B2AA
  Pale Green #98FB98
  Light Green #90EE90
  Spring Green #00FF7F
  Lawn Green #7CFC00
  Green #00FF00
  Chartreuse #7FFF00
  Medium Spring Green #00FA9A
  Green Yellow #ADFF2F
  Lime Green #32CD32
  Yellow Green #9ACD32
  Forest Green #228B22
  Olive Drab #6B8E23
  Dark Khaki #BDB76B
  Pale Goldenrod #EEE8AA
  Light Goldenrod #FAFAD2
  Light Yellow #FFFFE0
  Yellow #FFFF00
  Gold #FFD700
  Light Goldenrod #EEDD82
  Goldenrod #DAA520
  Dark Goldenrod #B8860B
  Rosy Brown #BC8F8F
  Indian Red #CD5C5C
  Saddle Brown #8B4513
  Sienna #A0522D
  Peru #CD853F
  Burlywood #DEB887
  Beige #F5F5DC
  Wheat #F5DEB3
  Sandy Brown #F4A460
  Tan #D2B48C
  Chocolate #D2691E
  Firebrick #B22222
  Brown #A52A2A
  Dark Salmon #E9967A
  Salmon #FA8072
  Light Salmon #FFA07A
  Orange #FFA500
  Dark Orange #FF8C00
  Coral #FF7F50
  Light Coral #F08080
  Tomato #FF6347
  Orange Red #FF4500
  Red #FF0000
  Hot Pink #FF69B4
  Deep Pink #FF1493
  Pink #FFC0CB
  Light Pink #FFB6C1
  Pale Violet Red #DB7093
  Maroon #B03060
  Medium Violet Red #C71585
  Violet Red #D02090
  Magenta #FF00FF
  Violet #EE82EE
  Plum #DDA0DD
  Orchid #DA70D6
  Medium Orchid #BA55D3
  Dark Orchid #9932CC
  Dark Violet #9400D3
  Blue Violet #8A2BE2
  Purple #A020F0
  Medium Purple #9370DB
  Thistle #D8BFD8
  Dark Blue #00008B
  Dark Cyan #008B8B
  Dark Magenta #8B008B
  Dark Red #8B0000
Paleta segura:
CÓDIGO COLOR
#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  
CÓDIGO COLOR
#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  
CÓDIGO COLOR
#660000  
#660033  
#660066  
#660099  
#6600CC  
#6600FF  
#663300  
#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  
CÓDIGO COLOR
#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  
CÓDIGO COLOR
#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  
CÓDIGO COLOR
#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  
Anuncios
Categorías:HTML, Programación
  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: