Imagen destacada del artículo Colores en html, códigos y nombres

Colores en html, códigos y nombres

html svgcss svg
actualizado: 22 / 10 / 2022

Cuando hablamos de colores en HTML, nos referimos a las diferentes formas y nombres utilizados para asignar colores a los elementos de una página web, como texto, bordes o fondos. HTML admite al menos 6 formas diferentes de agregar colores a una página web, estos formatos son:

  1. Hexadecimal
  2. Color del formato RGB
  3. Color del formato RGBA - mismo rgb pero con un canal para transparencia
  4. Color de formato HSL
  5. Color del formato HSLA - mismo hsl pero con un canal para tranparencia

También acepta los nombres de ciertos colores escritos en inglés más tarde, tiene una tabla con la lista de todos los códigos de color HTML con sus nombres.

Colores web
Colores web

¿Qué es el color rgb?

El modelo rgb se refiere al acrónimo en inglés, red, green, blue en español rojo, verde y azul todas las pantallas de los dispositivos modernos funcionan en este formato.

Los píxeles dentro de las pantallas tienen al menos un punto o fracción de algunos de los tres colores mencionados del modelo rgb.

Cada color del modelo RGB tiene 256 variaciones es su valor mínimo y 255 el máximo, por lo que si tienes la pregunta de ¿cuántas combinaciones de colores RGB existen?. Bueno, la respuesta es bastante impresionante, puedes obtener hasta 16 millones de colores diferentes.

¿Qué es el color hexadecimal?

Definitivamente te has hecho alguna de estas preguntas:

  • ¿cuál es el significado del códigos de color en formato hexadecimal?
  • ¿Qué es un color hexadecimal?

El sistema de color hexadecimal consiste en un hashtag o un gato y seis letras o números, los dos primeros valores corresponden al rojo, el verde está representado por los caracteres 3 y 4, el valor del azul son las últimas dos cifras.

Este formato sigue la misma lógica que el RGB de que su escritura es muy diferente. Explicamos a continuación.

Los colores hexadecimales están formados por números del sistema decimal 0 a 9 y para expresar valores más altos que 9 usamos, las primeras 6 letras del alfabeto inglés "ABCDEF", donde A es equivalente a 10 y el resto del letra se le suma 1 hasta que alcanzar el 15.

Pero siempre es confuso, si recuerdas el formato RGB, consta de 256 variaciones en cada canal, lo mismo ocurre con el modelo hexadecimal.

¿Te preguntas cómo puedo obtener 256 variantes para cada canal de color? La fórmula de este resultado es la siguiente. El primer valor multiplicado por 16 agregando el segundo valor multiplicado por 1, después de esta fórmula, puede obtener el valor de los tres canales rojos, verdes y azules.

¿Qué es el color hsl?

HSL significa hue (tono), saturation (saturación) y lightness (ligereza). Esto es similar a la forma en que RGB representa el color al combinar sus valores rojo, verde y azul, pero con HSL, los valores son mucho más intuitivos.

Hue - tono

El tono está representado por grados alrededor de un círculo. Considere la rueda cromática donde los grados se reproducen en rojo, 180 grados toman el cian y los 360 grados repiten el mismo rojo.

Saturation - Saturación

La saturación está representada por una percepción entre 0 y 100 y determina el nivel de gris. Si el color es 100% saturación, no hay nada, con un color con 0% de saturación, será un tono gris incoloro.

lightness - Luminosidad

La luminosidad también está representada por un porcentaje y determina el nivel de blanco o negro. Si el color tiene un 50% de luminosidad, significa que no se agregan en blanco o negro adicionales al color.

A medida que agregas puntos porcentuales a este valor cambiará por una tonalidad de ese mismo color ya sea más clara u oscura dependiendo si es para arriba o para abajo.

Tabla de colores html con códigos css

A continuación presentamos una tabla con los 140 colores html nativos para utlizar en las etiquetas de tus documentos html comó en reglas css.

🔗 Colores rojos🔗 Colores azules🔗 Colores verdes🔗 Colores rosa🔗 Colores violetas🔗 Colores grises
indianred#cd5c5crgb(205,92,92)hsl(0,54%,59%)
lightcoral#f08080rgb(240,128,128)hsl(0,79%,73%)
salmon#fa8072rgb(250,128,114)hsl(7,94%,72%)
darksalmon#e9967argb(233,150,122)hsl(16,72%,70%)
lightsalmon#ffa07argb(255,160,122)hsl(18,100%,74%)
crimson#dc143crgb(220,20,60)hsl(348,84%,48%)
red#ff0000rgb(255,0,0)hsl(0,100%,50%)
firebrick#b22222rgb(178,34,34)hsl(0,68%,42%)
darkred#8b0000rgb(139,0,0)hsl(0,100%,28%)
cyan#00ffffrgb(0,255,255)hsl(180,100%,50%)
lightcyan#e0ffffrgb(224,255,255)hsl(180,100%,94%)
paleturquoise#afeeeergb(175,238,238)hsl(180,65%,81%)
aquamarine#7fffd4rgb(127,255,212)hsl(160,100%,75%)
turquoise#40e0d0rgb(64,224,208)hsl(174,73%,57%)
mediumturquoise#48d1ccrgb(72,209,204)hsl(178,60%,56%)
darkturquoise#00ced1rgb(0,206,209)hsl(181,100%,41%)
cadetblue#5f9ea0rgb(95,158,160)hsl(182,26%,50%)
steelblue#4682b4rgb(70,130,180)hsl(208,44%,50%)
lightsteelblue#b0c4dergb(176,196,222)hsl(214,42%,79%)
powderblue#b0e0e6rgb(176,224,230)hsl(187,52%,80%)
lightblue#add8e6rgb(173,216,230)hsl(195,54%,80%)
skyblue#87ceebrgb(135,206,235)hsl(198,72%,73%)
lightskyblue#87cefargb(135,206,250)hsl(203,92%,76%)
deepskyblue#00bfffrgb(0,191,255)hsl(196,100%,50%)
dodgerblue#1e90ffrgb(30,144,255)hsl(210,100%,56%)
cornflowerblue#6495edrgb(100,149,237)hsl(219,80%,67%)
mediumslateblue#7b68eergb(123,104,238)hsl(249,80%,68%)
royalblue#4169e1rgb(65,105,225)hsl(225,73%,57%)
blue#0000ffrgb(0,0,255)hsl(240,100%,50%)
mediumblue#0000cdrgb(0,0,205)hsl(240,100%,41%)
darkblue#00008brgb(0,0,139)hsl(240,100%,28%)
midnightblue#191970rgb(25,25,112)hsl(240,64%,27%)
greenyellow#adff2frgb(173,255,47)hsl(84,100%,60%)
chartreuse#7fff00rgb(127,255,0)hsl(91,100%,50%)
lawngreen#7cfc00rgb(124,252,0)hsl(91,100%,50%)
lime#00ff00rgb(0,255,0)hsl(120,100%,50%)
limegreen#32cd32rgb(50,205,50)hsl(120,61%,50%)
palegreen#98fb98rgb(152,251,152)hsl(120,93%,80%)
lightgreen#90ee90rgb(144,238,144)hsl(120,74%,75%)
mediumspringgreen#00fa9argb(0,250,154)hsl(157,100%,50%)
springgreen#00ff7frgb(0,255,127)hsl(150,100%,50%)
mediumseagreen#3cb371rgb(60,179,113)hsl(147,50%,47%)
seagreen#2e8b57rgb(46,139,87)hsl(147,51%,37%)
forestgreen#228b22rgb(34,139,34)hsl(120,61%,34%)
green#008000rgb(0,128,0)hsl(120,100%,26%)
darkgreen#006400rgb(0,100,0)hsl(120,100%,20%)
yellowgreen#9acd32rgb(154,205,50)hsl(80,61%,50%)
olivedrab#6b8e23rgb(107,142,35)hsl(80,61%,35%)
olive#808000rgb(128,128,0)hsl(60,100%,26%)
darkolivegreen#556b2frgb(85,107,47)hsl(82,39%,31%)
mediumaquamarine#66cdaargb(102,205,170)hsl(160,51%,61%)
darkseagreen#8fbc8frgb(143,188,143)hsl(120,26%,65%)
lightseagreen#20b2aargb(32,178,170)hsl(177,70%,42%)
darkcyan#008b8brgb(0,139,139)hsl(180,100%,28%)
teal#008080rgb(0,128,128)hsl(180,100%,26%)
pink#ffc0cbrgb(255,192,203)hsl(350,100%,88%)
lightpink#ffb6c1rgb(255,182,193)hsl(351,100%,86%)
hotpink#ff69b4rgb(255,105,180)hsl(330,100%,71%)
deeppink#ff1493rgb(255,20,147)hsl(328,100%,54%)
mediumvioletred#c71585rgb(199,21,133)hsl(323,81%,44%)
palevioletred#db7093rgb(219,112,147)hsl(341,60%,65%)
cornsilk#fff8dcrgb(255,248,220)hsl(48,100%,94%)
blanchedalmond#ffebcdrgb(255,235,205)hsl(36,100%,91%)
bisque#ffe4c4rgb(255,228,196)hsl(33,100%,89%)
wheat#f5deb3rgb(245,222,179)hsl(40,77%,84%)
burlywood#deb887rgb(222,184,135)hsl(34,57%,70%)
tan#d2b48crgb(210,180,140)hsl(35,44%,69%)
rosybrown#bc8f8frgb(188,143,143)hsl(0,26%,65%)
sandybrown#f4a460rgb(244,164,96)hsl(28,88%,67%)
goldenrod#daa520rgb(218,165,32)hsl(43,75%,50%)
darkgoldenrod#b8860brgb(184,134,11)hsl(43,89%,39%)
peru#cd853frgb(205,133,63)hsl(30,59%,53%)
chocolate#d2691ergb(210,105,30)hsl(25,75%,48%)
saddlebrown#8b4513rgb(139,69,19)hsl(25,76%,31%)
sienna#a0522drgb(160,82,45)hsl(20,57%,41%)
brown#a52a2argb(165,42,42)hsl(0,60%,41%)
maroon#800000rgb(128,0,0)hsl(0,100%,26%)
lightsalmon#ffa07argb(255,160,122)hsl(18,100%,74%)
coral#ff7f50rgb(255,127,80)hsl(17,100%,66%)
tomato#ff6347rgb(255,99,71)hsl(10,100%,64%)
orangered#ff4500rgb(255,69,0)hsl(17,100%,50%)
darkorange#ff8c00rgb(255,140,0)hsl(33,100%,50%)
orange#ffa500rgb(255,165,0)hsl(39,100%,50%)
gold#ffd700rgb(255,215,0)hsl(51,100%,50%)
yellow#ffff00rgb(255,255,0)hsl(60,100%,50%)
lightyellow#ffffe0rgb(255,255,224)hsl(60,100%,94%)
lightgoldenrodyellow#fafad2rgb(250,250,210)hsl(60,81%,91%)
lemonchiffon#fffacdrgb(255,250,205)hsl(54,100%,91%)
papayawhip#ffefd5rgb(255,239,213)hsl(38,100%,92%)
moccasin#ffe4b5rgb(255,228,181)hsl(39,100%,86%)
peachpuff#ffdab9rgb(255,218,185)hsl(29,100%,87%)
palegoldenrod#eee8aargb(238,232,170)hsl(55,67%,80%)
khaki#f0e68crgb(240,230,140)hsl(54,77%,75%)
darkkhaki#bdb76brgb(189,183,107)hsl(56,39%,59%)
lavender#e6e6fargb(230,230,250)hsl(240,67%,95%)
thistle#d8bfd8rgb(216,191,216)hsl(300,25%,80%)
plum#dda0ddrgb(221,160,221)hsl(300,48%,75%)
violet#ee82eergb(238,130,238)hsl(300,77%,73%)
orchid#da70d6rgb(218,112,214)hsl(303,59%,65%)
fuchsia#ff00ffrgb(255,0,255)hsl(300,100%,50%)
magenta#ff00ffrgb(255,0,255)hsl(300,100%,50%)
mediumorchid#ba55d3rgb(186,85,211)hsl(289,59%,59%)
mediumpurple#9370dbrgb(147,112,219)hsl(260,60%,65%)
blueviolet#8a2be2rgb(138,43,226)hsl(272,76%,53%)
darkviolet#9400d3rgb(148,0,211)hsl(283,100%,42%)
darkorchid#9932ccrgb(153,50,204)hsl(281,61%,50%)
darkmagenta#8b008brgb(139,0,139)hsl(300,100%,28%)
purple#800080rgb(128,0,128)hsl(300,100%,26%)
indigo#4b0082rgb(75,0,130)hsl(275,100%,26%)
slateblue#6a5acdrgb(106,90,205)hsl(249,54%,58%)
darkslateblue#483d8brgb(72,61,139)hsl(249,39%,40%)
gainsboro#dcdcdcrgb(220,220,220)hsl(0,0%,87%)
lightgrey#d3d3d3rgb(211,211,211)hsl(0,0%,83%)
silver#c0c0c0rgb(192,192,192)hsl(0,0%,76%)
darkgray#a9a9a9rgb(169,169,169)hsl(0,0%,67%)
gray#808080rgb(128,128,128)hsl(0,0%,51%)
dimgray#696969rgb(105,105,105)hsl(0,0%,42%)
lightslategray#778899rgb(119,136,153)hsl(210,15%,54%)
slategray#708090rgb(112,128,144)hsl(210,13%,51%)
darkslategray#2f4f4frgb(47,79,79)hsl(180,26%,25%)
black#000000rgb(0,0,0)hsl(0,0%,0%)
white#ffffffrgb(255,255,255)hsl(0,0%,100%)
snow#fffafargb(255,250,250)hsl(0,100%,100%)
honeydew#f0fff0rgb(240,255,240)hsl(120,100%,98%)
mintcream#f5fffargb(245,255,250)hsl(150,100%,99%)
azure#f0ffffrgb(240,255,255)hsl(180,100%,98%)
aliceblue#f0f8ffrgb(240,248,255)hsl(208,100%,98%)
ghostwhite#f8f8ffrgb(248,248,255)hsl(240,100%,99%)
whitesmoke#f5f5f5rgb(245,245,245)hsl(0,0%,97%)
seashell#fff5eergb(255,245,238)hsl(25,100%,97%)
beige#f5f5dcrgb(245,245,220)hsl(60,56%,92%)
oldlace#fdf5e6rgb(253,245,230)hsl(40,86%,95%)
floralwhite#fffaf0rgb(255,250,240)hsl(40,100%,98%)
ivory#fffff0rgb(255,255,240)hsl(60,100%,98%)
antiquewhite#faebd7rgb(250,235,215)hsl(35,78%,92%)
linen#faf0e6rgb(250,240,230)hsl(30,67%,95%)
lavenderblush#fff0f5rgb(255,240,245)hsl(340,100%,98%)
mistyrose#ffe4e1rgb(255,228,225)hsl(7,100%,95%)