Existen 4 formas de definir colores en HTML.
Se puede usar algunos nombre de colores en ingles.
| NAVY | BLUE | TEAL | AQUA |
| BLACK | GRAY | SILVER | WHITE |
| YELLOW | GREEN | OLIVE | LIME |
| RED | MAROON | FUCHSIA | PURPLE |
Todo navegador moderno soporta los siguientes 140 nombres de colores extendidos.
| Nombre de color | HEX |
|---|---|
| AliceBlue | #F0F8FF |
| AntiqueWhite | #FAEBD7 |
| Aqua | #00FFFF |
| Aquamarine | #7FFFD4 |
| Azure | #F0FFFF |
| Beige | #F5F5DC |
| Bisque | #FFE4C4 |
| Black | #000000 |
| BlanchedAlmond | #FFEBCD |
| Blue | #0000FF |
| BlueViolet | #8A2BE2 |
| Brown | #A52A2A |
| BurlyWood | #DEB887 |
| CadetBlue | #5F9EA0 |
| Chartreuse | #7FFF00 |
| Chocolate | #D2691E |
| Coral | #FF7F50 |
| CornflowerBlue | #6495ED |
| Cornsilk | #FFF8DC |
| Crimson | #DC143C |
| Cyan | #00FFFF |
| DarkBlue | #00008B |
| DarkCyan | #008B8B |
| DarkGoldenRod | #B8860B |
| DarkGray | #A9A9A9 |
| DarkGreen | #006400 |
| DarkKhaki | #BDB76B |
| DarkMagenta | #8B008B |
| DarkOliveGreen | #556B2F |
| DarkOrange | #FF8C00 |
| DarkOrchid | #9932CC |
| DarkRed | #8B0000 |
| DarkSalmon | #E9967A |
| DarkSeaGreen | #8FBC8F |
| DarkSlateBlue | #483D8B |
| DarkSlateGrey | #2F4F4F |
| DarkTurquoise | #00CED1 |
| DarkViolet | #9400D3 |
| DeepPink | #FF1493 |
| DeepSkyBlue | #00BFFF |
| DimGray | #696969 |
| DodgerBlue | #1E90FF |
| FireBrick | #B22222 |
| FloralWhite | #FFFAF0 |
| ForestGreen | #228B22 |
| Fuchsia | #FF00FF |
| Gainsboro | #DCDCDC |
| GhostWhite | #F8F8FF |
| Gold | #FFD700 |
| GoldenRod | #DAA520 |
| Grey | #808080 |
| Green | #008000 |
| GreenYellow | #ADFF2F |
| HoneyDew | #F0FFF0 |
| HotPink | #FF69B4 |
| IndianRed | #CD5C5C |
| Indigo | #4B0082 |
| Ivory | #FFFFF0 |
| Khaki | #F0E68C |
| Lavender | #E6E6FA |
| LavenderBlush | #FFF0F5 |
| LawnGreen | #7CFC00 |
| LemonChiffon | #FFFACD |
| LightBlue | #ADD8E6 |
| LightCoral | #F08080 |
| LightCyan | #E0FFFF |
| LightGoldenRodYellow | #FAFAD2 |
| LightGray | #D3D3D3 |
| LightGreen | #90EE90 |
| LightPink | #FFB6C1 |
| LightSalmon | #FFA07A |
| LightSeaGreen | #20B2AA |
| LightSkyBlue | #87CEFA |
| LightSlateGray | #778899 |
| LightSteelBlue | #B0C4DE |
| LightYellow | #FFFFE0 |
| Lime | #00FF00 |
| LimeGreen | #32CD32 |
| Linen | #FAF0E6 |
| Magenta | #FF00FF |
| Maroon | #800000 |
| MediumAquaMarine | #66CDAA |
| MediumBlue | #0000CD |
| MediumOrchid | #BA55D3 |
| MediumPurple | #9370DB |
| MediumSeaGreen | #3CB371 |
| MediumSlateBlue | #7B68EE |
| MediumSpringGreen | #00FA9A |
| MediumTurquoise | #48D1CC |
| MediumVioletRed | #C71585 |
| MidnightBlue | #191970 |
| MintCream | #F5FFFA |
| MistyRose | #FFE4E1 |
| Moccasin | #FFE4B5 |
| NavajoWhite | #FFDEAD |
| Navy | 000080 |
| OldLace | #FDF5E6 |
| Olive | #808000 |
| OliveDrab | #6B8E23 |
| Orange | #FFA500 |
| OrangeRed | #FF4500 |
| Orchid | #DA70D6 |
| PaleGoldenRod | #EEE8AA |
| PaleGreen | #98FB98 |
| PaleTurquoise | #AFEEEE |
| PaleVioletRed | #DB7093 |
| PapayaWhip | #FFEFD5 |
| PeachPuff | #FFDAB9 |
| Peru | #CD853F |
| Pink | #FFC0CB |
| Plum | #DDA0DD |
| PowderBlue | #B0E0E6 |
| Purple | #800080 |
| RebeccaPurple | #663399 |
| Red | #FF0000 |
| RosyBrown | #BC8F8F |
| RoyalBlue | #4169E1 |
| SaddleBrown | #8B4513 |
| Salmon | #FA8072 |
| SandyBrown | #F4A460 |
| SeaGreen | #2E8B57 |
| SeaShell | #FFF5EE |
| Sienna | #A0522D |
| Silver | #C0C0C0 |
| SkyBlue | #87CEEB |
| SlateGrey | #708090 |
| Snow | #FFFAFA |
| SpringGreen | #00FF7F |
| SteelBlue | #4682B4 |
| Tan | #D2B48C |
| Teal | #008080 |
| Thistle | #D8BFD8 |
| Tomato | #FF6347 |
| Turquoise | #40E0D0 |
| Violet | #EE82EE |
| Wheat | #F5DEB3 |
| White | #FFFFFF |
| WhiteSmoke | #F5F5F5 |
| Yellow | #FFFF00 |
| YellowGreen | #9ACD32 |
Con 3 dígitos exadecimales podemos elegir uno de entre 216 colores, también llamados los colores seguros de la web.
HTML color picker de W3C Schools.
Colores en los que se usa el formato #RGB donde cada digito esta en Hexadeciomal, entre 0 y F, donde 0 indicaria ausencia de color y F el 100" de dicho color.
Los números hexadecimales, se caracteriza por tener 16 dígitos (en lugar de los diez de la numeración decimal habitual o dos en la binaria). Estos dígitos son: 0 1 2 3 4 5 6 7 8 9 A B C D E F.
Así por ejemplo, el color rojo se representa como #F00, porque tiene el toda la intensidad de rojo y nada de verde y azul.
Los colores básicos son:
#F00 - Rojo
#0F0 - Verde
#00F - Azul
Otros colores son:
#FFF - Blanco
#000 - Negro
#0FF - Aqua
#F0F - Magenta o Fucsia
#FF0 - Amarillo
Para obtener un color más oscuro, simplemente reduce la intensidad del componente principal del color, dejando los otros dos iguales. Así para obtener tonos de rojo (#F00) se hace más oscuro así: #C00, #900, #600, #300 etc
Para hacer que un color más pastel, simplemente variar los otros dos colores dejando igual el color principal. Así para tonos de rojo (#F00) se hace más pálido así: #F33, #F66, #F99, #FCC etc
| ORANGE FFA500 | FCC | F30 | RED F00 | 906 | C30 | 930 | MAROON 80000 |
| F69 | F33 | C06 | C33 | 900 | |||
| F99 | F66 | F03 | C03 | 600 | |||
| F96 | C00 | F06 | 633 | 300 |
| CF0 | LIME 0F0 | 3F3 | 6F6 | 0C3 | 360 | GREEN 008000 |
| CF3 | 9F9 | 3C0 | 393 | 060 | ||
| CF6 | 0F3 | 6F3 | 093 | 063 | ||
| 9F6 | 6F0 | 6F0 | 0C6 | 090 |
| 3FF | AQUA 0FF | 0CC | TEAL 008080 | 66F | BLUE 00F | 66F | 003 | NAVY 000080 |
| 6FF | 099 | 069 | 039 | 006 | ||||
| 9FF | 066 | 99F | 036 | 009 | ||||
| CFF | 033 | 66F | 00C | 039 |
| FFC | YELLOW FF0 | FF3 | FC0 | GOLD FFD700 | CC0 | OLIVE 808000 |
| FF9 | FC6 | FC3 | CC3 | |||
| FF6 | FC9 | CC6 | 990 | |||
| FF3 | CC9 | CC3 | 993 |
| FCF | VIOLET EE82EE | F3F | FUCHSIA F0F | C0F | 909 | PURPLE 800080 |
| F9F | F3C | C0C | 609 | |||
| F6F | F39 | C09 | 606 | |||
| F6C | F36 | 90F | 90C |
Colores en los que se usa el formato #RRGGBB donde cada par de dígito esta en Hexadeciomal, entre 00 y FF, donde 00 indicaría ausencia de color y FF el 100" de dicho color. Se obtienen colores mas precisos.
Los números hexadecimales, se caracteriza por tener 16 dígitos (en lugar de los diez de la numeración decimal habitual o dos en la binaria). Estos dígitos son: 0 1 2 3 4 5 6 7 8 9 A B C D E F, donde F=15.
| 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 |
| 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 |
| 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 |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
Función que permite representar un color mediante los valores RGB y corresponde a Rojo, Verde y Azul. Los valores van desde 0 hasta 255 en cada color.
color: RGB(255,0,0); //Rojo color: RGB(0,255,0); //Verde color: RGB(0,0,255); //Azul background-color: RGB(255,255,255); //Blanco background-color: RGB(0,0,0); //Negro
Ademas de la función RGB() también existe la función RGBA() donde se agregar un cuarto valor entre 0 y 1 que representa la transparencia de la capa.
color: RGBA(255,0,0,0.8); //Rojo medio transparente background-color: RGBA(0,255,0,0.3);
Función que corresponde a los valores Hue, Sat y Ligth.
color: hsl(0,100%,50%); //Rojo color: hsl(120,100%,50%); //Verde color: hsl(240,100%,50%); //Azul color: hsl(0,0%,100%); //Blanco color: hsl(0,0%,0%); //Negro
Ademas de la función HSL() también existe la función HSLA() donde se agregar un cuarto valor entre 0 y 1 que representa la transparencia de la capa.
Para poner el fondo de la pagina de algún color uniforme, puedes añadir el atributo BGCOLOR en la etiqueta BODY (situada al principio del documento) o con CSS usando la propiedad Background-Color. Para definir el color puedes usar cualquiera de los 4 métodos descritos anteriormente.
<BODY BGCOLOR=peru;> <BODY STYLE="bacground-color:peru;">
Para cambiar el color de letra, puedes usar la etiqueta FONT COLOR o con CSS usando la propiedad COLOR.
<FONT COLOR=red;>Texto a poner rojo</FONT> <P STYLE="color:red;">Texto a poner rojo</P>
De manera análoga si quieres trabajar con una tabla también puedes usar el atributo BGCOLOR en cualquiera de las etiquetas TABLE, TR, TH o TD.
<TABLE BGCOLOR=peru;> <TR BGCOLOR=peru;> <TH BGCOLOR=peru;> <TD BGCOLOR=peru;> <TABLE STYLE="color:gold;"> <TR STYLE="color:gold;"> <TH STYLE="color:gold;"> <TD STYLE="color:gold;">
Ejemplo 1: <FONT SIZE=+2 COLOR=#33FF33>Esto esta en color verde perico</FONT>
Ejemplo 1: Esto esta en color verde perico
Ejemplo 2: <FONT COLOR=#F0F>Esta letra es magenta.</FONT>
Ejemplo 2: Esta letra es magenta.