Colores de Css Codigos

ColoresEn una página web o en una hoja de estilo se puede definir los colores mediante códigos numéricos o mediante nombres de colores. Existen varios códigos numéricos, aunque lo habitual es utilizar códigos RGB.

En esta página se tratan los siguientes temas:

Códigos de colores RGB Nombres de colores HTML 3.2 Nombres de colores X11 / SVG Nombres de colores del sistema Códigos de colores HSL Opacidad: opacity

Para combinar los colores de las páginas, se puede recurrir a sitios como Color Scheme Designer.

Códigos de colores RGB

Las pantallas de ordenador consiguen los colores mezclando tres colores básicos (rojo - verde - azul). Cada color admite 256 niveles de intensidad, lo que hace un total de 256 x 256 x 256 = 16.777.216 colores distintos. Para codificar un color es suficiente indicar las intensidades de cada uno de los tres colores. Como las intensidades van de 0 a 255, se suelen expresar en notación hexadecimal (de 00 a FF) en vez de en notación decimal. El código de un color se escribe #RRGGBB, donde RR, GG y BB son los valores (hexadecimales) de la intensidad de los colores rojo, verde y azul respectivamente.

El color negro se consigue con la ausencia de cualquier color, así que su código RGB es #000000. El color blanco se consigue mezclando los tres colores con la máxima intensidad, así que su código RGB es #FFFFFF.

Volver al principio de la página

Nombres de colores HTML 3.2

En la recomendación HTML 3.2 (aprobada el 14 de enero de 1997) se incluyeron dieciséis nombres de colores: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white y yellow. Estos colores son los colores de la paleta VGA de Windows.

La tabla e ilustración siguientes muestran estos 16 colores, sus nombres y códigos RGB.

ColorNombre

Código RGB

Color

Nombre

Código RGB

blue #0000FF navy #000080fuchsia #FF00FF purple #800080red #FF0000 maroon #800000yellow #FFFF00 olive #808000lime #00FF00 green #008000aqua #00FFFF teal #008080gray #808080 black #000000white #FFFFFF silver #C0C0C0


Nombres de colores X11 / SVG

En el módulo CSS3:Color (apobado en septiembre de 2011) se permiten los nombres de colores X11 (o SVG), que la mayoría de navegadores son capaces de representar desde hace tiempo. La tabla siguiente muestra los 140 colores, sus nombres y códigos RGB.

Nota: Los colores Fuchsia y Magenta son el mismo color y los colores Aqua y Cyan son también el mismo color, por lo que la tabla contiene en realidad 138 colores distintos. También están duplicados los nombres de los colores grises, que pueden incluir los términos "gray" o "grey" (DarkGrey/DarkGray, etc). En X11 sólo era válida una de las dos variantes, pero en la recomendación SVG 1.0 ya se admitían ambas variantes.

Color

NombreCódigo RGB

Color

NombreCódigo RGB

AliceBlue #F0F8FF LightPink#FFB6C1

AntiqueWhite #FAEBD7 LightSalmon#FFA07A

Aqua #00FFFF LightSeaGreen#20B2AA

Aquamarine #7FFFD4 LightSkyBlue#87CEFA

Azure #F0FFFF LightSlateGray#778899

Beige #F5F5DC LightSlateGrey #77889

Color

NombreCódigo RGB

Color

NombreCódigo RGB

9

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

Color

NombreCódigo RGB

Color

NombreCódigo RGB

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

Color

NombreCódigo RGB

Color

NombreCódigo RGB

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

Color

NombreCódigo RGB

Color

NombreCódigo RGB

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


Nombres de colores del sistema

Los colores del sistema hacen referencia a los colores utilizados por el interfaz del sistema operativo. Forman parte de la recomendación CSS2, pero se consideran obsoletos en el módulo CSS3:Color, en favor de otros términos (llamados valores de apariencia) definidos en el módulo CSS3: Interface de usuario básico (que actualmente -noviembre de 2011-, se encuentra en fase de candidata a recomendación desde mayo de 2004)

Color Nombre ConceptoActiveBorder Borde de la ventana activaActiveCaption Título de la ventana activa

AppWorkspaceColor de fondo del interfaz de múltiplesdocumentos

Background Color de fondo del escritorioButtonFace Color frontal de los elementos 3D

ButtonHighlightSombra oscura de los elementos 3D (bordes opuestos a la fuente de luz)

ButtonShadow Sombra de los elementos 3D

Color Nombre ConceptoButtonText Texto de los botones

CaptionTextTexto en título, caja de tamaño y caja de flecha de desplazamiento

GrayTextTexto en gris (desactivado). Este color es #000000 si no se puede mostrar un colo gris sólido

Highlight Elemento(s) seleccionado(s) en un control

HighlightTextTexto de (de los) elemento(s) seleccionado(s) en un control

InactiveBorder Borde de la ventana inactivaInactiveCaption Título de la ventana inactivaInactiveCaptionText Texto de un título inactivoInfoBackground Color de fondo de los tooltipsInfoText Texto de los tooltipsMenu Fondo de los menúsMenuText Texto de los menúsScrollbar Área gris de la barra de desplazamientoThreeDDarkShadow Sombra oscura de los elementos 3DThreeDFace Color frontal de los elementos 3DThreeDHighlight Color brillante de los elementos 3D

ThreeDLightShadowColor claro de los elementos 3D (bordes frente a la fuente de luz)

ThreeDShadow Sombra oscura de los elementos 3DWindow Fondo de la ventanaWindowFrame Marco de la ventanaWindowText Texto en las ventanas


Códigos de colores HSL

La recomendación CSS Módulo de color 3 permite define los colores mediante el modelo de color HSL (Hue, Saturation, Lightness, es decir, Tonalidad, Saturación, Luminancia).

p { background-color: hsl(153, 80%, 40%)} Si algo puede ir mal, irá mal.

Nota: Internet Explorer 9 reconoce el modelo de color HSL. Las versiones anteriores no lo hacían, como se comenta en la página de diferencias entre IE9 e IE8.

Las tablas siguientes muestran los colores con el modelo HSL, por lo que sólo se ven los colores si el navegador admite el modelo hsl.

Hue: 0

S \ L 0% 20% 40% 60% 80% 100%

0%

20%

40%

60%

80%

100%

Hue: 51

S \ L 0% 20% 40% 60% 80% 100%

0%

20%

40%

60%

80%

100%

Hue: 102

S \ L 0% 20% 40% 60% 80% 100%

0%

20%

40%

60%

80%

100%

Hue: 153

S \ L 0% 20% 40% 60% 80% 100%

0%

20%

40%

60%

80%

100%

Hue: 204

S \ L 0% 20% 40% 60% 80% 100%

0%

20%

40%

60%

80%

100%

Hue: 255

S \ L 0% 20% 40% 60% 80% 100%

0%

20%

40%

60%

80%

100%


Opacidad: opacity

La propiedad opacity incluida en la recomendación CSS3: módulo de color permite hacer que un elemento sea parcialmente transparente. El valor de esta propiedad debe ser un valor decimal entre 0 y 1 (el valor 0 hace que el elemento sea completamente transparente y el valor 1 hace que el elemento sea completamente opaco).

Si un elemento parcialmente transparente se superpone a otro elemento de otro color, el navegador mezcla los colores de los elementos, como muestra el siguiente ejemplo:

p1 { background-color: lightblue; }

p2 { background-color: lightyellow; opacity: 0.5; }

/* En el ejemplo también se utilizan propiedades de posicionamiento que no aparecen aquí. */


Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.orgAutor: Bartolomé Sintes MarcoÚltima modificación: 17 de febrero de 2012

Esta obra está bajo una licencia de Creative Commons

Reconocimiento-CompartirIgual 3.0 España.

Código Col Código Col Código Col Código Col Código Col Código Col

#000000 #330000 #660000 #990000 #CC0000 #FF0000

#000033 #330033 #660033 #990033 #CC0033 #FF0033

#000066 #330066 #660066 #990066 #CC0066 #FF0066

#000099 #330099 #660099 #990099 #CC0099 #FF0099

#0000CC #3300CC #6600CC #9900CC #CC00CC #FF00CC

#0000FF #3300FF #6600FF #9900FF #CC00FF #FF00FF

#003300 #333300 #663300 #993300 #CC3300 #FF3300

#003333 #333333 #663333 #993333 #CC3333 #FF3333

#003366 #333366 #663366 #993366 #CC3366 #FF3366

#003399 #333399 #663399 #993399 #CC3399 #FF3399



#006600 #336600 #666600 #996600 #CC6600 #FF6600

#006633 #336633 #666633 #996633 #CC6633 #FF6633

#006666 #336666 #666666 #996666 #CC6666 #FF6666

#006699 #336699 #666699 #996699 #CC6699 #FF6699



#009900 #339900 #669900 #999900 #CC9900 #FF9900

#009933 #339933 #669933 #999933 #CC9933 #FF9933

#009966 #339966 #669966 #999966 #CC9966 #FF9966

#009999 #339999 #669999 #999999 #CC9999 #FF9999



#00CC00 #33CC00 #66CC00 #99CC00 #CCCC00 #FFCC00


http://creativecommons.org/licenses/by-sa/3.0/es/



#00CCCC

#33CCCC

#66CCCC

#99CCCC

#CCCCCC

#FFCCCC

#00CCFF #33CCFF #66CCFF #99CCFF #CCCCFF #FFCCFF

#00FF00 #33FF00 #66FF00 #99FF00 #CCFF00 #FFFF00




#00FFCC #33FFCC #66FFCC #99FFCC #CCFFCC #FFFFCC

#00FFFF #33FFFF #66FFFF #99FFFF #CCFFFF #FFFFFF

El editor de colores

Si deseas combinar diferentes tipos de colores de fondo con colores de texto, para ver cual se aproxima a tus necesidades, no tienes más que visitar la página con la tabla de colores.

Nombre del color Código RGB

Aliceblue Aliceblue #F0F8FF

Antiquewhite Antiquewhite #FAEBD7

Aqua Aqua #00FFFF

Aquamarine Aquamarine #7FFFD4

Azure Azure #00FFFF

Beige Beige #F5F5DC

Bisque Bisque #FFE4C4

Black Black #000000

Blanchedalmond Blanchedalmond #FFEBCD

Blue Blue #0000FF

Blueviolet Blueviolet #8A2BE2

Brown Brown #A52A2A

Burlywood Burlywood #DEB887

Cadetblue Cadetblue #5F9EA0

Chartreuse Chartreuse #7FFF00

http://www.virtualnauta.com/tabla-de-colores

Chocolate Chocolate #D2691E

Coral Coral #FF7F50

Cornflowerblue Cornflowerblue #6495ED

Cornsilk Cornsilk #FFF8DC

Crimson Crimson #DC143C

Cyan Cyan #00FFFF

Darkblue Darkblue #00008B

Darkcyan Darkcyan #008B8B

Darkgoldenrod Darkgoldenrod #B8860B

Darkgray Darkgray #A9A9A9

Darkgreen Darkgreen #006400

Darkkhaki Darkkhaki #BDB76B

Darkmagenta Darkmagenta #8B008B

Darkolivegreen Darkolivegreen #556B2F

Darkorange Darkorange #FF8C00

Darkorchid Darkorchid #9932CC

Darkred Darkred #8B0000

Darksalmon Darksalmon #E9967A

Darkseagreen Darkseagreen #8FBC8F

Darkslateblue Darkslateblue #483D8B

Darkslategray Darkslategray #2F4F4F

Darkturquoise Darkturquoise #00CED1

Darkviolet Darkviolet #9400D3

Deeppink Deeppink #FF1493

Deepskyblue Deepskyblue #00BFFF

Dimgray Dimgray #696969

Dodgerblue Dodgerblue #1E90FF

Firebrick Firebrick #B22222

floralwhite floralwhite #FFFAF0

forestgreen forestgreen #228B22

fuchsia fuchsia #FF00FF

gainsboro gainsboro #DCDCDC

ghostwhite ghostwhite #F8F8FF

gold gold #FFD700

goldenrod goldenrod #DAA520

gray gray #808080

green green #008000

greenyellow greenyellow #ADFF2F

honeydew honeydew #F0FFF0

hotpink hotpink #FF69B4

indianred indianred #CD5C5C

indigo indigo #4B0082

ivory ivory #FFFFF0

khaki khaki #F0E68C

lavender lavender #E6E6FA

lavenderblush lavenderblush #FFF0F5

lawngreen lawngreen #7CCMC00

lemonchiffon lemonchiffon #FFFACD

lightblue lightblue #ADD8E6

lightcoral lightcoral #F08080

lightcyan lightcyan #E0FFFF

lightgoldenrodyellow lightgoldenrodyellow #FAFAD2

lightgreen lightgreen #90EE90

lightgrey lightgrey #D3D3D3

lightpink lightpink #FFB6C1

lightsalmon lightsalmon #FFA07A

lightseagreen lightseagreen #20B2AA

lightskyblue lightskyblue #87CEFA

lightslategray lightslategray #778899

lightsteelblue lightsteelblue #B0C4DE

lightyellow lightyellow #FFFFE0

lime lime #00FF00

limegreen limegreen #32CD32

linen linen #FAF0E6

magenta magenta #FF00FF

maroon maroon #800000

mediumaquamarine mediumaquamarine #66CDAA

mediumblue mediumblue #0000CD

mediumorchid mediumorchid #BA55D3

mediumpurple mediumpurple #9370DB

mediumseagreen mediumseagreen #3CB371

mediumslateblue mediumslateblue #7B68EE

mediumspringgreen mediumspringgreen #00FA9A

mediumturquoise mediumturquoise #48D1CC

mediumvioletred mediumvioletred #C71585

midnightblue midnightblue #191970

mintcream mintcream #F5FFFA

mistyrose mistyrose #FFE4E1

moccasin moccasin #FFE4B5

navajowhite navajowhite #FFDEAD

navy navy #000080

oldlace oldlace #FDF5E6

olive olive #808000

olivedrab olivedrab #6B8E23

orange orange #FFA500

orangered orangered #FF4500

orchid orchid #DA70D6

palegoldenrod palegoldenrod #EEE8AA

palegreen palegreen #98FB98

paleturquoise paleturquoise #AFEEEE

palevioletred palevioletred #DB7093

papayawhip papayawhip #FFEFD5

peachpuff peachpuff #FFDAB9

peru peru #CD853F

pink pink #FFC0CB

plum plum #DDA0DD

powderblue powderblue #B0E0E6

purple purple #800080

red red #FF0000

rosybrown rosybrown #BC8F8F

royalblue royalblue #4169E1

saddlebrown saddlebrown #8B4513

salmon salmon #FA8072

sandybrown sandybrown #F4A460

seagreen seagreen #2E8B57

seashell seashell #FFF5EE

sienna sienna #A0522D

silver silver #C0C0C0

skyblue skyblue #87CEEB

slateblue slateblue #6A5ACD

slategray slategray #708090

snow snow #FFFAFA

springgreen springgreen #00FF7F

steelblue steelblue #4682B4

tan tan #D2B48C

teal teal #008080

thistle thistle #D8BFD8

tomato tomato #FF6347

turquoise turquoise #40E0D0

violet violet #EE82EE

wheat wheat #F5DEB3

white white #FFFFFF

whitesmoke whitesmoke #F5F5F5

yellow yellow #FFFF00

yellowgreen yellowgreen #9ACD32

Paleta Web

El modelo RGB requiere de 24 bits para describir el color de cada pixel en la pantalla y el total de combinaciones posibles mediante este modelo es exactamente de 16.777.216 colores. Aunque cualquier monitor a color puede mostrar todos estos tonos, por razones de economía algunas computadoras usan un sistema de sólo 8 bits conformando así una paleta de 256 colores (tomados de esos 16 millones posibles).

En un monitor capaz de mostrar solamente 256 colores, aquellos tonos presentes en una imagen que no se encuentran en la paleta del sistema son simulados por combinación de pixeles (técnica que se conoce como dithering). Por eso, en la medida de lo posible, es conveniente seleccionar para nuestras páginas colores que puedan ser visualizados correctamente en estos sistemas.

El inconveniente es la diferencia entre los colores definidos en la paleta de Windows y la de Mac. Ambos sistemas tienen solamente algunos colores en común, que son usados por Netscape y otros navegadores. Estos colores en común conforman la paleta Web o paleta segura (safety palette).

Esta paleta segura tiene como característica estar basada en los valores RGB con incrementos de 20% entre cada valor, por lo que resulta un total de 216 colores.

HEXADECIMAL DECIMAL PORCENTAJES

00 00 0%

33 51 20%

66 102 40%

99 153 60%

CC 204 80%

FF 255 100%

Cuando debemos elegir un color para usar nuestras páginas conviene seleccionar uno de estos colores, ya que nos dan la seguridad de que estarán presentes en cualquier sistema.

La siguiente tabla muestra la paleta de 216 colores completa.

Muestra del color #RRGGBB Muestra del color #RRGGBB

#000000 #990000

#000033 #990033

#000066 #990066

#000099 #990099

#0000CC #9900CC

#0000FF #9900FF

#003300 #993300

#003333 #993333

#003366 #993366

#003399 #993399

#0033CC #09933CC

#0033FF #9933FF

#006600 #996600

#006633 #996633

#006666 #996666

#006699 #996699

#0066CC #9966CC

#0066FF #9966FF

#009900 #999900

#009933 #999933

#009966 #999966

#009999 #999999

#0099CC #9999CC

#0099FF #9999FF

#00CC00 #99CC00

#00CC33 #99CC33

#00CC66 #99CC66

#00CC99 #99CC99

#00CCCC #99CCCC

#00CCFF #99CCFF

#00FF00 #99FF00

#00FF33 #99FF33

#00FF66 #99FF66

#00FF99 #99FF99

#00FFCC #99FFCC

#00FFFF #99FFFF

#330000 #CC0000

#330033 #CC0033

#330066 #CC0066

#330099 #CC0099

#3300CC #CC00CC

#3300FF #CC00FF

#333300 #CC3300

#333333 #CC3333

#333366 #CC3366

#333399 #CC3399

#3333CC #CC33CC

#3333FF #CC33FF

#336600 #CC6600

#336633 #CC6633

#336666 #CC6666

#336699 #CC6699

#3366CC #CC66CC

#3366FF #CC66FF

#339900 #CC9900

#339933 #CC9933

#339966 #CC9966

#339999 #CC9999

#3399CC #CC99CC

#3399FF #CC99FF

#33CC00 #CCCC00

#33CC33 #CCCC33

#33CC66 #CCCC66

#33CC99 #CCCC99

#33CCCC #CCCCCC

#33CCFF #CCCCFF

#33FF00 #CCFF00

#33FF33 #CCFF33

#33FF66 #CCFF66

#33FF99 #CCFF99

#33FFCC #CCFFCC

#33FFFF #CCFFFF

#660000 #FF0000

#660033 #FF0033

#660066 #FF0066

#660099 #FF0099

#6600CC #FF00CC

#6600FF #FF00FF

#663300 #FF3300

#663333 #FF3333

#663366 #FF3366

#663399 #FF3399

#6633CC #FF33CC

#6633FF #FF33FF

#666600 #FF6600

#666633 #FF6633

#666666 #FF6666

#666699 #FF6699

#6666CC #FF66CC

#6666FF #FF66FF

#669900 #FF9900

#669933 #FF9933

#669966 #FF9966

#669999 #FF9999

#6699CC #FF99CC

#6699FF #FF99FF

#66CC00 #FFCC00

#66CC33 #FFCC33

#66CC66 #FFCC66

#66CC99 #FFCC99

#66CCCC #FFCCCC

#66CCFF #FFCCFF

#66FF00 #FFFF00

#66FF33 #FFFF33

#66FF66 #FFFF66

#66FF99 #FFFF99

#66FFCC #FFFFCC

#66FFFF #FFFFFF

Colores de Css Codigos

Documents

Transcript of Colores de Css Codigos