Colores en html: códigos, nombres + tabla
Los códigos de colores en HTML son combinaciones de tres colores en formato hexadecimal que representan los colores rojo, verde y azul (#RRGGBB). Estos códigos son ampliamente utilizados en la creación de páginas web para cambiar el color de fondo, texto y tablas, así como en programas de edición de imágenes como Adobe Photoshop.
En este artículo hablaremos sobre los códigos de colores y nombres HTML, cómo se forman y cómo funcionan.
Nombres de colores en HTML
Además de los códigos de colores hexadecimales, HTML también admite una serie de nombres de colores predefinidos que se pueden utilizar en lugar de los códigos.
Algunos de los nombres de colores comunes son: "red", "green", "blue", "yellow", "white", "black" y "gray".
Por ejemplo, en lugar de utilizar el código #FF0000 para el color rojo, se puede utilizar el nombre de color en inglés "red" en HTML y CSS. Este formato es más fácil de recordar que los códigos hexadecimales, y pueden ser útiles en situaciones donde se necesita un color específico.
Formato de los códigos de colores en HTML
Cada código de color en HTML está compuesto por el símbolo "#" seguido de seis letras o números. Estos números están en sistema numeral hexadecimal, lo que significa que cada letra o número representa un valor numérico que va del 0 al 15.
Por ejemplo, la letra "A" en hexadecimal representa el número 10 en decimal, mientras que la letra "F" representa el número 15. Por lo tanto, la combinación de letras y números en un código de color hexadecimal puede representar cualquier valor numérico entre 0 y 255 en cada uno de los componentes de color (rojo, verde y azul).
Cómo funciona la teoría de los códigos de colores HTML
Cada código de color en HTML representa la combinación de tres valores numéricos que representan la intensidad de los colores rojo, verde y azul. Estos valores se combinan para crear el color deseado.
Por ejemplo, el código de color #FF0000 representa la intensidad máxima de color rojo, y la ausencia total de los colores verde y azul. Como resultado, el color que se muestra es rojo puro.
Del mismo modo, el código de color #00FF00 representa la intensidad máxima de color verde, y la ausencia total de los colores rojo y azul. Como resultado, el color que se muestra es verde puro.
Tabla de colores html
| indianred | #cd5c5c | rgb(205,92,92) | hsl(0,54%,59%) | |
| lightcoral | #f08080 | rgb(240,128,128) | hsl(0,79%,73%) | |
| salmon | #fa8072 | rgb(250,128,114) | hsl(7,94%,72%) | |
| darksalmon | #e9967a | rgb(233,150,122) | hsl(16,72%,70%) | |
| lightsalmon | #ffa07a | rgb(255,160,122) | hsl(18,100%,74%) | |
| crimson | #dc143c | rgb(220,20,60) | hsl(348,84%,48%) | |
| red | #ff0000 | rgb(255,0,0) | hsl(0,100%,50%) | |
| firebrick | #b22222 | rgb(178,34,34) | hsl(0,68%,42%) | |
| darkred | #8b0000 | rgb(139,0,0) | hsl(0,100%,28%) | |
| cyan | #00ffff | rgb(0,255,255) | hsl(180,100%,50%) | |
| lightcyan | #e0ffff | rgb(224,255,255) | hsl(180,100%,94%) | |
| paleturquoise | #afeeee | rgb(175,238,238) | hsl(180,65%,81%) | |
| aquamarine | #7fffd4 | rgb(127,255,212) | hsl(160,100%,75%) | |
| turquoise | #40e0d0 | rgb(64,224,208) | hsl(174,73%,57%) | |
| mediumturquoise | #48d1cc | rgb(72,209,204) | hsl(178,60%,56%) | |
| darkturquoise | #00ced1 | rgb(0,206,209) | hsl(181,100%,41%) | |
| cadetblue | #5f9ea0 | rgb(95,158,160) | hsl(182,26%,50%) | |
| steelblue | #4682b4 | rgb(70,130,180) | hsl(208,44%,50%) | |
| lightsteelblue | #b0c4de | rgb(176,196,222) | hsl(214,42%,79%) | |
| powderblue | #b0e0e6 | rgb(176,224,230) | hsl(187,52%,80%) | |
| lightblue | #add8e6 | rgb(173,216,230) | hsl(195,54%,80%) | |
| skyblue | #87ceeb | rgb(135,206,235) | hsl(198,72%,73%) | |
| lightskyblue | #87cefa | rgb(135,206,250) | hsl(203,92%,76%) | |
| deepskyblue | #00bfff | rgb(0,191,255) | hsl(196,100%,50%) | |
| dodgerblue | #1e90ff | rgb(30,144,255) | hsl(210,100%,56%) | |
| cornflowerblue | #6495ed | rgb(100,149,237) | hsl(219,80%,67%) | |
| mediumslateblue | #7b68ee | rgb(123,104,238) | hsl(249,80%,68%) | |
| royalblue | #4169e1 | rgb(65,105,225) | hsl(225,73%,57%) | |
| blue | #0000ff | rgb(0,0,255) | hsl(240,100%,50%) | |
| mediumblue | #0000cd | rgb(0,0,205) | hsl(240,100%,41%) | |
| darkblue | #00008b | rgb(0,0,139) | hsl(240,100%,28%) | |
| navy | #000080 | rgb(0,0,128) | hsl(240,100%,26%) | |
| midnightblue | #191970 | rgb(25,25,112) | hsl(240,64%,27%) | |
| greenyellow | #adff2f | rgb(173,255,47) | hsl(84,100%,60%) | |
| chartreuse | #7fff00 | rgb(127,255,0) | hsl(91,100%,50%) | |
| lawngreen | #7cfc00 | rgb(124,252,0) | hsl(91,100%,50%) | |
| lime | #00ff00 | rgb(0,255,0) | hsl(120,100%,50%) | |
| limegreen | #32cd32 | rgb(50,205,50) | hsl(120,61%,50%) | |
| palegreen | #98fb98 | rgb(152,251,152) | hsl(120,93%,80%) | |
| lightgreen | #90ee90 | rgb(144,238,144) | hsl(120,74%,75%) | |
| mediumspringgreen | #00fa9a | rgb(0,250,154) | hsl(157,100%,50%) | |
| springgreen | #00ff7f | rgb(0,255,127) | hsl(150,100%,50%) | |
| mediumseagreen | #3cb371 | rgb(60,179,113) | hsl(147,50%,47%) | |
| seagreen | #2e8b57 | rgb(46,139,87) | hsl(147,51%,37%) | |
| forestgreen | #228b22 | rgb(34,139,34) | hsl(120,61%,34%) | |
| green | #008000 | rgb(0,128,0) | hsl(120,100%,26%) | |
| darkgreen | #006400 | rgb(0,100,0) | hsl(120,100%,20%) | |
| yellowgreen | #9acd32 | rgb(154,205,50) | hsl(80,61%,50%) | |
| olivedrab | #6b8e23 | rgb(107,142,35) | hsl(80,61%,35%) | |
| olive | #808000 | rgb(128,128,0) | hsl(60,100%,26%) | |
| darkolivegreen | #556b2f | rgb(85,107,47) | hsl(82,39%,31%) | |
| mediumaquamarine | #66cdaa | rgb(102,205,170) | hsl(160,51%,61%) | |
| darkseagreen | #8fbc8f | rgb(143,188,143) | hsl(120,26%,65%) | |
| lightseagreen | #20b2aa | rgb(32,178,170) | hsl(177,70%,42%) | |
| darkcyan | #008b8b | rgb(0,139,139) | hsl(180,100%,28%) | |
| teal | #008080 | rgb(0,128,128) | hsl(180,100%,26%) | |
| pink | #ffc0cb | rgb(255,192,203) | hsl(350,100%,88%) | |
| lightpink | #ffb6c1 | rgb(255,182,193) | hsl(351,100%,86%) | |
| hotpink | #ff69b4 | rgb(255,105,180) | hsl(330,100%,71%) | |
| deeppink | #ff1493 | rgb(255,20,147) | hsl(328,100%,54%) | |
| mediumvioletred | #c71585 | rgb(199,21,133) | hsl(323,81%,44%) | |
| palevioletred | #db7093 | rgb(219,112,147) | hsl(341,60%,65%) | |
| cornsilk | #fff8dc | rgb(255,248,220) | hsl(48,100%,94%) | |
| blanchedalmond | #ffebcd | rgb(255,235,205) | hsl(36,100%,91%) | |
| bisque | #ffe4c4 | rgb(255,228,196) | hsl(33,100%,89%) | |
| navajowhite | #ffdead | rgb(255,222,173) | hsl(36,100%,84%) | |
| wheat | #f5deb3 | rgb(245,222,179) | hsl(40,77%,84%) | |
| burlywood | #deb887 | rgb(222,184,135) | hsl(34,57%,70%) | |
| tan | #d2b48c | rgb(210,180,140) | hsl(35,44%,69%) | |
| rosybrown | #bc8f8f | rgb(188,143,143) | hsl(0,26%,65%) | |
| sandybrown | #f4a460 | rgb(244,164,96) | hsl(28,88%,67%) | |
| goldenrod | #daa520 | rgb(218,165,32) | hsl(43,75%,50%) | |
| darkgoldenrod | #b8860b | rgb(184,134,11) | hsl(43,89%,39%) | |
| peru | #cd853f | rgb(205,133,63) | hsl(30,59%,53%) | |
| chocolate | #d2691e | rgb(210,105,30) | hsl(25,75%,48%) | |
| saddlebrown | #8b4513 | rgb(139,69,19) | hsl(25,76%,31%) | |
| sienna | #a0522d | rgb(160,82,45) | hsl(20,57%,41%) | |
| brown | #a52a2a | rgb(165,42,42) | hsl(0,60%,41%) | |
| maroon | #800000 | rgb(128,0,0) | hsl(0,100%,26%) | |
| lightsalmon | #ffa07a | rgb(255,160,122) | hsl(18,100%,74%) | |
| coral | #ff7f50 | rgb(255,127,80) | hsl(17,100%,66%) | |
| tomato | #ff6347 | rgb(255,99,71) | hsl(10,100%,64%) | |
| orangered | #ff4500 | rgb(255,69,0) | hsl(17,100%,50%) | |
| darkorange | #ff8c00 | rgb(255,140,0) | hsl(33,100%,50%) | |
| orange | #ffa500 | rgb(255,165,0) | hsl(39,100%,50%) | |
| gold | #ffd700 | rgb(255,215,0) | hsl(51,100%,50%) | |
| yellow | #ffff00 | rgb(255,255,0) | hsl(60,100%,50%) | |
| lightyellow | #ffffe0 | rgb(255,255,224) | hsl(60,100%,94%) | |
| lightgoldenrodyellow | #fafad2 | rgb(250,250,210) | hsl(60,81%,91%) | |
| lemonchiffon | #fffacd | rgb(255,250,205) | hsl(54,100%,91%) | |
| papayawhip | #ffefd5 | rgb(255,239,213) | hsl(38,100%,92%) | |
| moccasin | #ffe4b5 | rgb(255,228,181) | hsl(39,100%,86%) | |
| peachpuff | #ffdab9 | rgb(255,218,185) | hsl(29,100%,87%) | |
| palegoldenrod | #eee8aa | rgb(238,232,170) | hsl(55,67%,80%) | |
| khaki | #f0e68c | rgb(240,230,140) | hsl(54,77%,75%) | |
| darkkhaki | #bdb76b | rgb(189,183,107) | hsl(56,39%,59%) | |
| lavender | #e6e6fa | rgb(230,230,250) | hsl(240,67%,95%) | |
| thistle | #d8bfd8 | rgb(216,191,216) | hsl(300,25%,80%) | |
| plum | #dda0dd | rgb(221,160,221) | hsl(300,48%,75%) | |
| violet | #ee82ee | rgb(238,130,238) | hsl(300,77%,73%) | |
| orchid | #da70d6 | rgb(218,112,214) | hsl(303,59%,65%) | |
| fuchsia | #ff00ff | rgb(255,0,255) | hsl(300,100%,50%) | |
| magenta | #ff00ff | rgb(255,0,255) | hsl(300,100%,50%) | |
| mediumorchid | #ba55d3 | rgb(186,85,211) | hsl(289,59%,59%) | |
| mediumpurple | #9370db | rgb(147,112,219) | hsl(260,60%,65%) | |
| blueviolet | #8a2be2 | rgb(138,43,226) | hsl(272,76%,53%) | |
| darkviolet | #9400d3 | rgb(148,0,211) | hsl(283,100%,42%) | |
| darkorchid | #9932cc | rgb(153,50,204) | hsl(281,61%,50%) | |
| darkmagenta | #8b008b | rgb(139,0,139) | hsl(300,100%,28%) | |
| purple | #800080 | rgb(128,0,128) | hsl(300,100%,26%) | |
| indigo | #4b0082 | rgb(75,0,130) | hsl(275,100%,26%) | |
| slateblue | #6a5acd | rgb(106,90,205) | hsl(249,54%,58%) | |
| darkslateblue | #483d8b | rgb(72,61,139) | hsl(249,39%,40%) | |
| gainsboro | #dcdcdc | rgb(220,220,220) | hsl(0,0%,87%) | |
| lightgrey | #d3d3d3 | rgb(211,211,211) | hsl(0,0%,83%) | |
| silver | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,76%) | |
| darkgray | #a9a9a9 | rgb(169,169,169) | hsl(0,0%,67%) | |
| gray | #808080 | rgb(128,128,128) | hsl(0,0%,51%) | |
| dimgray | #696969 | rgb(105,105,105) | hsl(0,0%,42%) | |
| lightslategray | #778899 | rgb(119,136,153) | hsl(210,15%,54%) | |
| slategray | #708090 | rgb(112,128,144) | hsl(210,13%,51%) | |
| darkslategray | #2f4f4f | rgb(47,79,79) | hsl(180,26%,25%) | |
| black | #000000 | rgb(0,0,0) | hsl(0,0%,0%) | |
| white | #ffffff | rgb(255,255,255) | hsl(0,0%,100%) | |
| snow | #fffafa | rgb(255,250,250) | hsl(0,100%,100%) | |
| honeydew | #f0fff0 | rgb(240,255,240) | hsl(120,100%,98%) | |
| mintcream | #f5fffa | rgb(245,255,250) | hsl(150,100%,99%) | |
| azure | #f0ffff | rgb(240,255,255) | hsl(180,100%,98%) | |
| aliceblue | #f0f8ff | rgb(240,248,255) | hsl(208,100%,98%) | |
| ghostwhite | #f8f8ff | rgb(248,248,255) | hsl(240,100%,99%) | |
| whitesmoke | #f5f5f5 | rgb(245,245,245) | hsl(0,0%,97%) | |
| seashell | #fff5ee | rgb(255,245,238) | hsl(25,100%,97%) | |
| beige | #f5f5dc | rgb(245,245,220) | hsl(60,56%,92%) | |
| oldlace | #fdf5e6 | rgb(253,245,230) | hsl(40,86%,95%) | |
| floralwhite | #fffaf0 | rgb(255,250,240) | hsl(40,100%,98%) | |
| ivory | #fffff0 | rgb(255,255,240) | hsl(60,100%,98%) | |
| antiquewhite | #faebd7 | rgb(250,235,215) | hsl(35,78%,92%) | |
| linen | #faf0e6 | rgb(250,240,230) | hsl(30,67%,95%) | |
| lavenderblush | #fff0f5 | rgb(255,240,245) | hsl(340,100%,98%) | |
| mistyrose | #ffe4e1 | rgb(255,228,225) | hsl(7,100%,95%) |