Colores en html: códigos, nombres + tabla
☝ Los códigos de colores en HTML son tripletas hexadecimales que representan los colores rojo, verde y azul (#RRGGBB)
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).
Entendiendo los Colores Hexadecimales
Los colores hexadecimales son una forma de representar colores en sistemas digitales, especialmente en la web. Este sistema utiliza una base 16, que incluye los números del 0 al 9 y las letras de la A a la F, para expresar valores de color en tres componentes: rojo, verde y azul (RGB). Cada color se representa por un código de seis dígitos precedido por el símbolo '#'. Por ejemplo, el negro se representa como #000000 y el blanco como #FFFFFF.
La Estructura de los Colores Hexadecimales
Para profundizar en el concepto de colores en hexadecimal, es crucial entender su estructura. Cada par de dígitos en el código representa la intensidad de los colores rojo, verde y azul, en ese orden. Por lo tanto, el código se divide en tres partes: #RRGGBB. La intensidad de cada color puede variar entre 00 (mínimo) y FF (máximo), lo que permite más de 16 millones de combinaciones de colores posibles. Esta amplia gama de colores hace que la paleta de colores hexadecimal sea extremadamente versátil para el diseño web y gráfico.
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
| explorar | indianred | #cd5c5c | rgb(205,92,92) | hsl(0,54%,59%) |
| explorar | lightcoral | #f08080 | rgb(240,128,128) | hsl(0,79%,73%) |
| explorar | salmon | #fa8072 | rgb(250,128,114) | hsl(7,94%,72%) |
| explorar | darksalmon | #e9967a | rgb(233,150,122) | hsl(16,72%,70%) |
| explorar | lightsalmon | #ffa07a | rgb(255,160,122) | hsl(18,100%,74%) |
| explorar | crimson | #dc143c | rgb(220,20,60) | hsl(348,84%,48%) |
| explorar | red | #ff0000 | rgb(255,0,0) | hsl(0,100%,50%) |
| explorar | firebrick | #b22222 | rgb(178,34,34) | hsl(0,68%,42%) |
| explorar | darkred | #8b0000 | rgb(139,0,0) | hsl(0,100%,28%) |
| explorar | cyan | #00ffff | rgb(0,255,255) | hsl(180,100%,50%) |
| explorar | lightcyan | #e0ffff | rgb(224,255,255) | hsl(180,100%,94%) |
| explorar | paleturquoise | #afeeee | rgb(175,238,238) | hsl(180,65%,81%) |
| explorar | aquamarine | #7fffd4 | rgb(127,255,212) | hsl(160,100%,75%) |
| explorar | turquoise | #40e0d0 | rgb(64,224,208) | hsl(174,73%,57%) |
| explorar | mediumturquoise | #48d1cc | rgb(72,209,204) | hsl(178,60%,56%) |
| explorar | darkturquoise | #00ced1 | rgb(0,206,209) | hsl(181,100%,41%) |
| explorar | cadetblue | #5f9ea0 | rgb(95,158,160) | hsl(182,26%,50%) |
| explorar | steelblue | #4682b4 | rgb(70,130,180) | hsl(208,44%,50%) |
| explorar | lightsteelblue | #b0c4de | rgb(176,196,222) | hsl(214,42%,79%) |
| explorar | powderblue | #b0e0e6 | rgb(176,224,230) | hsl(187,52%,80%) |
| explorar | lightblue | #add8e6 | rgb(173,216,230) | hsl(195,54%,80%) |
| explorar | skyblue | #87ceeb | rgb(135,206,235) | hsl(198,72%,73%) |
| explorar | lightskyblue | #87cefa | rgb(135,206,250) | hsl(203,92%,76%) |
| explorar | deepskyblue | #00bfff | rgb(0,191,255) | hsl(196,100%,50%) |
| explorar | dodgerblue | #1e90ff | rgb(30,144,255) | hsl(210,100%,56%) |
| explorar | cornflowerblue | #6495ed | rgb(100,149,237) | hsl(219,80%,67%) |
| explorar | mediumslateblue | #7b68ee | rgb(123,104,238) | hsl(249,80%,68%) |
| explorar | royalblue | #4169e1 | rgb(65,105,225) | hsl(225,73%,57%) |
| explorar | blue | #0000ff | rgb(0,0,255) | hsl(240,100%,50%) |
| explorar | mediumblue | #0000cd | rgb(0,0,205) | hsl(240,100%,41%) |
| explorar | darkblue | #00008b | rgb(0,0,139) | hsl(240,100%,28%) |
| explorar | navy | #000080 | rgb(0,0,128) | hsl(240,100%,26%) |
| explorar | midnightblue | #191970 | rgb(25,25,112) | hsl(240,64%,27%) |
| explorar | greenyellow | #adff2f | rgb(173,255,47) | hsl(84,100%,60%) |
| explorar | chartreuse | #7fff00 | rgb(127,255,0) | hsl(91,100%,50%) |
| explorar | lawngreen | #7cfc00 | rgb(124,252,0) | hsl(91,100%,50%) |
| explorar | lime | #00ff00 | rgb(0,255,0) | hsl(120,100%,50%) |
| explorar | limegreen | #32cd32 | rgb(50,205,50) | hsl(120,61%,50%) |
| explorar | palegreen | #98fb98 | rgb(152,251,152) | hsl(120,93%,80%) |
| explorar | lightgreen | #90ee90 | rgb(144,238,144) | hsl(120,74%,75%) |
| explorar | mediumspringgreen | #00fa9a | rgb(0,250,154) | hsl(157,100%,50%) |
| explorar | springgreen | #00ff7f | rgb(0,255,127) | hsl(150,100%,50%) |
| explorar | mediumseagreen | #3cb371 | rgb(60,179,113) | hsl(147,50%,47%) |
| explorar | seagreen | #2e8b57 | rgb(46,139,87) | hsl(147,51%,37%) |
| explorar | forestgreen | #228b22 | rgb(34,139,34) | hsl(120,61%,34%) |
| explorar | green | #008000 | rgb(0,128,0) | hsl(120,100%,26%) |
| explorar | darkgreen | #006400 | rgb(0,100,0) | hsl(120,100%,20%) |
| explorar | yellowgreen | #9acd32 | rgb(154,205,50) | hsl(80,61%,50%) |
| explorar | olivedrab | #6b8e23 | rgb(107,142,35) | hsl(80,61%,35%) |
| explorar | olive | #808000 | rgb(128,128,0) | hsl(60,100%,26%) |
| explorar | darkolivegreen | #556b2f | rgb(85,107,47) | hsl(82,39%,31%) |
| explorar | mediumaquamarine | #66cdaa | rgb(102,205,170) | hsl(160,51%,61%) |
| explorar | darkseagreen | #8fbc8f | rgb(143,188,143) | hsl(120,26%,65%) |
| explorar | lightseagreen | #20b2aa | rgb(32,178,170) | hsl(177,70%,42%) |
| explorar | darkcyan | #008b8b | rgb(0,139,139) | hsl(180,100%,28%) |
| explorar | teal | #008080 | rgb(0,128,128) | hsl(180,100%,26%) |
| explorar | pink | #ffc0cb | rgb(255,192,203) | hsl(350,100%,88%) |
| explorar | lightpink | #ffb6c1 | rgb(255,182,193) | hsl(351,100%,86%) |
| explorar | hotpink | #ff69b4 | rgb(255,105,180) | hsl(330,100%,71%) |
| explorar | deeppink | #ff1493 | rgb(255,20,147) | hsl(328,100%,54%) |
| explorar | mediumvioletred | #c71585 | rgb(199,21,133) | hsl(323,81%,44%) |
| explorar | palevioletred | #db7093 | rgb(219,112,147) | hsl(341,60%,65%) |
| explorar | cornsilk | #fff8dc | rgb(255,248,220) | hsl(48,100%,94%) |
| explorar | blanchedalmond | #ffebcd | rgb(255,235,205) | hsl(36,100%,91%) |
| explorar | bisque | #ffe4c4 | rgb(255,228,196) | hsl(33,100%,89%) |
| explorar | navajowhite | #ffdead | rgb(255,222,173) | hsl(36,100%,84%) |
| explorar | wheat | #f5deb3 | rgb(245,222,179) | hsl(40,77%,84%) |
| explorar | burlywood | #deb887 | rgb(222,184,135) | hsl(34,57%,70%) |
| explorar | tan | #d2b48c | rgb(210,180,140) | hsl(35,44%,69%) |
| explorar | rosybrown | #bc8f8f | rgb(188,143,143) | hsl(0,26%,65%) |
| explorar | sandybrown | #f4a460 | rgb(244,164,96) | hsl(28,88%,67%) |
| explorar | goldenrod | #daa520 | rgb(218,165,32) | hsl(43,75%,50%) |
| explorar | darkgoldenrod | #b8860b | rgb(184,134,11) | hsl(43,89%,39%) |
| explorar | peru | #cd853f | rgb(205,133,63) | hsl(30,59%,53%) |
| explorar | chocolate | #d2691e | rgb(210,105,30) | hsl(25,75%,48%) |
| explorar | saddlebrown | #8b4513 | rgb(139,69,19) | hsl(25,76%,31%) |
| explorar | sienna | #a0522d | rgb(160,82,45) | hsl(20,57%,41%) |
| explorar | brown | #a52a2a | rgb(165,42,42) | hsl(0,60%,41%) |
| explorar | maroon | #800000 | rgb(128,0,0) | hsl(0,100%,26%) |
| explorar | lightsalmon | #ffa07a | rgb(255,160,122) | hsl(18,100%,74%) |
| explorar | coral | #ff7f50 | rgb(255,127,80) | hsl(17,100%,66%) |
| explorar | tomato | #ff6347 | rgb(255,99,71) | hsl(10,100%,64%) |
| explorar | orangered | #ff4500 | rgb(255,69,0) | hsl(17,100%,50%) |
| explorar | darkorange | #ff8c00 | rgb(255,140,0) | hsl(33,100%,50%) |
| explorar | orange | #ffa500 | rgb(255,165,0) | hsl(39,100%,50%) |
| explorar | gold | #ffd700 | rgb(255,215,0) | hsl(51,100%,50%) |
| explorar | yellow | #ffff00 | rgb(255,255,0) | hsl(60,100%,50%) |
| explorar | lightyellow | #ffffe0 | rgb(255,255,224) | hsl(60,100%,94%) |
| explorar | lightgoldenrodyellow | #fafad2 | rgb(250,250,210) | hsl(60,81%,91%) |
| explorar | lemonchiffon | #fffacd | rgb(255,250,205) | hsl(54,100%,91%) |
| explorar | papayawhip | #ffefd5 | rgb(255,239,213) | hsl(38,100%,92%) |
| explorar | moccasin | #ffe4b5 | rgb(255,228,181) | hsl(39,100%,86%) |
| explorar | peachpuff | #ffdab9 | rgb(255,218,185) | hsl(29,100%,87%) |
| explorar | palegoldenrod | #eee8aa | rgb(238,232,170) | hsl(55,67%,80%) |
| explorar | khaki | #f0e68c | rgb(240,230,140) | hsl(54,77%,75%) |
| explorar | darkkhaki | #bdb76b | rgb(189,183,107) | hsl(56,39%,59%) |
| explorar | lavender | #e6e6fa | rgb(230,230,250) | hsl(240,67%,95%) |
| explorar | thistle | #d8bfd8 | rgb(216,191,216) | hsl(300,25%,80%) |
| explorar | plum | #dda0dd | rgb(221,160,221) | hsl(300,48%,75%) |
| explorar | violet | #ee82ee | rgb(238,130,238) | hsl(300,77%,73%) |
| explorar | orchid | #da70d6 | rgb(218,112,214) | hsl(303,59%,65%) |
| explorar | fuchsia | #ff00ff | rgb(255,0,255) | hsl(300,100%,50%) |
| explorar | magenta | #ff00ff | rgb(255,0,255) | hsl(300,100%,50%) |
| explorar | mediumorchid | #ba55d3 | rgb(186,85,211) | hsl(289,59%,59%) |
| explorar | mediumpurple | #9370db | rgb(147,112,219) | hsl(260,60%,65%) |
| explorar | blueviolet | #8a2be2 | rgb(138,43,226) | hsl(272,76%,53%) |
| explorar | darkviolet | #9400d3 | rgb(148,0,211) | hsl(283,100%,42%) |
| explorar | darkorchid | #9932cc | rgb(153,50,204) | hsl(281,61%,50%) |
| explorar | darkmagenta | #8b008b | rgb(139,0,139) | hsl(300,100%,28%) |
| explorar | purple | #800080 | rgb(128,0,128) | hsl(300,100%,26%) |
| explorar | indigo | #4b0082 | rgb(75,0,130) | hsl(275,100%,26%) |
| explorar | slateblue | #6a5acd | rgb(106,90,205) | hsl(249,54%,58%) |
| explorar | darkslateblue | #483d8b | rgb(72,61,139) | hsl(249,39%,40%) |
| explorar | gainsboro | #dcdcdc | rgb(220,220,220) | hsl(0,0%,87%) |
| explorar | lightgrey | #d3d3d3 | rgb(211,211,211) | hsl(0,0%,83%) |
| explorar | silver | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,76%) |
| explorar | darkgray | #a9a9a9 | rgb(169,169,169) | hsl(0,0%,67%) |
| explorar | gray | #808080 | rgb(128,128,128) | hsl(0,0%,51%) |
| explorar | dimgray | #696969 | rgb(105,105,105) | hsl(0,0%,42%) |
| explorar | lightslategray | #778899 | rgb(119,136,153) | hsl(210,15%,54%) |
| explorar | slategray | #708090 | rgb(112,128,144) | hsl(210,13%,51%) |
| explorar | darkslategray | #2f4f4f | rgb(47,79,79) | hsl(180,26%,25%) |
| explorar | black | #000000 | rgb(0,0,0) | hsl(0,0%,0%) |
| explorar | white | #ffffff | rgb(255,255,255) | hsl(0,0%,100%) |
| explorar | snow | #fffafa | rgb(255,250,250) | hsl(0,100%,100%) |
| explorar | honeydew | #f0fff0 | rgb(240,255,240) | hsl(120,100%,98%) |
| explorar | mintcream | #f5fffa | rgb(245,255,250) | hsl(150,100%,99%) |
| explorar | azure | #f0ffff | rgb(240,255,255) | hsl(180,100%,98%) |
| explorar | aliceblue | #f0f8ff | rgb(240,248,255) | hsl(208,100%,98%) |
| explorar | ghostwhite | #f8f8ff | rgb(248,248,255) | hsl(240,100%,99%) |
| explorar | whitesmoke | #f5f5f5 | rgb(245,245,245) | hsl(0,0%,97%) |
| explorar | seashell | #fff5ee | rgb(255,245,238) | hsl(25,100%,97%) |
| explorar | beige | #f5f5dc | rgb(245,245,220) | hsl(60,56%,92%) |
| explorar | oldlace | #fdf5e6 | rgb(253,245,230) | hsl(40,86%,95%) |
| explorar | floralwhite | #fffaf0 | rgb(255,250,240) | hsl(40,100%,98%) |
| explorar | ivory | #fffff0 | rgb(255,255,240) | hsl(60,100%,98%) |
| explorar | antiquewhite | #faebd7 | rgb(250,235,215) | hsl(35,78%,92%) |
| explorar | linen | #faf0e6 | rgb(250,240,230) | hsl(30,67%,95%) |
| explorar | lavenderblush | #fff0f5 | rgb(255,240,245) | hsl(340,100%,98%) |
| explorar | mistyrose | #ffe4e1 | rgb(255,228,225) | hsl(7,100%,95%) |