Introducción a los nombres de color HTML
Los nombres de color HTML se indican correctamente en el párrafo. Los colores son importantes, no solo se usan para decorar una página web, sino que en algunos casos, es posible que desee cambiar el color del texto para proporcionar un mejor contraste con el fondo de la página. Teniendo en cuenta que HTML está escrito en forma de texto, no puede simplemente colorear el código a su gusto y esperar que el navegador web use el mismo color al representar la página. En cambio, tendrá que recurrir al uso de etiquetas y atributos para indicarle al navegador qué color usar.
Colores en HTML
En los nombres de color HTML, los colores se pueden denotar utilizando su valor hexadecimal o su nombre. HTML tiene soporte para los colores más comunes, en este artículo, compartiré con ustedes 140 nombres y valores hexadecimales de estos colores.
Una cosa a tener en cuenta es que no tiene que limitarse a estos colores, puede usar cualquier herramienta de selección de color para encontrar el valor hexadecimal de cualquier color que desee y usarlo en su página web.
Usar nombres de color HTML
Implementar colores en su página web es fácil y puede hacerse tanto en línea como a través de una hoja de estilo CSS separada.
Cuando va a utilizar los mismos nombres de color HTML en una página varias veces, es una mejor idea usar una hoja CSS para definir y establecer colores. Por el contrario, si solo tiene que usar el color una o dos veces, usar el método en línea se considera mejor.
1. Usando HTML Color Inline
Brown H3 Heading
Gainsboro colored paragraph text
Brown H3 Heading
Gainsboro colored paragraph text
Brown H3 Heading
Gainsboro colored paragraph text
Brown H3 Heading
Gainsboro colored paragraph text
Brown H3 Heading
Gainsboro colored paragraph text
Brown H3 Heading
Gainsboro colored paragraph text
2. Implementando en CSS
h1 ( color: Brown; )
p ( color: Gainsboro; )
Diferentes nombres de color HTML
Ahora que sabe qué son los nombres de color HTML y cómo puede usarlos en sus páginas, aquí hay un enlace de nombres de colores que puede marcar y usar en sus proyectos:
1. Nombres de color HTML gris y negro
Los colores gris y negro son, en la mayoría de los casos, perfectos para el color del texto de la página, ya que en un fondo blanco estos colores tienen la mejor legibilidad. Una cosa interesante a tener en cuenta es que los teléfonos modernos con pantallas OLED necesitan energía de la batería para mostrar el color negro si su audiencia va a estar en el móvil, es una buena idea usar el negro como color de fondo y blanco u otra luz colores como el color de primer plano.
Código | Color |
# 000000 | Negro |
# 0C090A | Noche |
# 2C3539 | Gunmetal |
# 2B1B17 | Medianoche |
# 34282C | Carbón |
# 25383C | Gris pizarra oscuro |
# 3B3131 | Petróleo |
# 413839 | Gato negro |
# 3D3C3A | Iridio |
# 463E3F | Anguila negra |
# 4C4646 | Vaca negra |
# 504A4B | Lobo gris |
# 565051 | Vampire Grey |
# 5C5858 | Delfín gris |
# 625D5D | Gris de carbono |
# 666362 | Gris ceniza |
# 6D6968 | Gris nublado |
# 726E6D | Gris ahumado |
# 736F6E | gris |
# 837E7C | Granito |
# 848482 | Acorazado gris |
# B6B6B4 | Nube gris |
# D1D0CE | Ganso gris |
# ***4E2 | Platino |
# BCC6CC | Plata metálica |
# 98AFC7 | Gris azulado |
# 6D7B8D | Gris pizarra claro |
# 657383 | Gris pizarra |
# 616D7E | Jet Grey |
2. Nombres de color HTML azul
El texto subrayado en azul se considera un Enlace, ya que es el estilo de enlace predeterminado para la mayoría de los navegadores web, debe evitar usar el azul para todo el texto en una página, ya que los visitantes pueden confundirlo con hipervínculos.
# 646D7E | Azul niebla |
# 566D7E | Mármol azul |
# 737CA1 | Azul pizarra |
# 4863A0 | Azul acero |
# 2B547E | Arrendajo azul |
# 2B3856 | Azul pizarra oscuro |
# 151B54 | Azul medianoche |
# 000080 | Azul marino |
# 342D7E | Ballena azul |
# 15317E | Lapis Blue |
# 151B8D | Denim Azul Oscuro |
# 0000A0 | Tierra azul |
# 0020C2 | Azul cobalto |
# 0041C2 | Blueberry Blue |
# 2554C7 | Azul zafiro |
# 1569C7 | Ojos azules |
# 2B60DE | Azul real |
# 1F45FC | Orquídea azul |
# 6960EC | Loto azul |
# 736AFF | Azul pizarra claro |
# 357EC7 | Windows Blue |
# 368BC1 | Hielo azul glacial |
# 488AC7 | Azul seda |
# 3090C7 | Hiedra azul |
# 659EC7 | Koi azul |
# 87AFC7 | Azul Columbia |
# 95B9C7 | Bebe azul |
# 728FCE | Azul claro de acero |
# 2B65EC | Océano azul |
# 306EFF | Cinta azul |
# 157DEC | Vestido azul |
# 1589FF | Dodger Blue |
# 6495ED | Azul aciano |
# 6698FF | Cielo azul |
# 38ACEC | Mariposa azul |
# 56A5EC | Iceberg |
# 5CB3FF | Azul cristal |
# 3BB9FF | Deep Sky Blue |
# 79BAEC | Azul denim |
# 82CAFA | Azul cielo claro |
# 82CAFF | Day Sky Blue |
# A0CFEC | Jeans azul |
# B7CEEC | Angel Azul |
# B4CFEC | Azul pastel |
# C2DFFF | Azul marino |
# C6DEFF | Azul pálido |
#AFDCEC | Azul coral |
#ADDFFF | Azul claro |
#BDEDFF | Robin Egg Blue |
#CFECEC | Lirio azul pálido |
# E0FFFF | Cian claro |
# EBF4FA | Agua |
# F0F8FF | Alice azul |
# F0FFFF | Azur |
#CCFFFF | Pizarra clara |
# 93FFE8 | Aguamarina ligera |
# 9AFEFF | Azul eléctrico |
# 7FFFD4 | Aguamarina |
# 00FFFF | Cian o Aqua |
# 7DFDFE | Tron Blue |
# 57FEFF | Circonita Azul |
# 8EEBEC | Laguna Azul |
# 50EBEC | Celeste |
# 4EE2EC | Diamante azul |
# 81D8D0 | Azul tiffany |
# 92C7C7 | Opaco Cian |
# 77BFC7 | Hosta Azul |
# 78C7C7 | Northern Lights Blue |
# 48CCCD | Turquesa medio |
# 43C6DB | Turquesa |
# 46C7C7 | Medusa |
# 7BCCB5 | Azul verde |
3. Colores HTML verdes
En sitios relacionados con la naturaleza, el dinero, el medio ambiente, etc., el verde puede ser una buena opción de color para usar como fondo.
# 43BFC7 | Guacamayo Azul Verde |
# 3EA99F | Light Sea Green |
# 3B9C9C | Turquesa oscuro |
# 438D80 | Tortuga Verde |
# 348781 | Aguamarina mediana |
# 307D7E | Azul verdoso |
# 5E7D7E | Turquesa grisácea |
# 4C787E | Escarabajo Verde |
# 008080 | Verde azulado |
# 4E8975 | Mar verde |
# 78866B | Camuflaje verde |
# 848b79 | Verde salvia |
# 617C58 | Hazel Green |
# 728C00 | Veneno Verde |
# 667C26 | Helecho verde |
# 254117 | Bosque Oscuro Verde |
# 306754 | Verde Mar Medio |
# 347235 | Verde bosque medio |
# 437C17 | Algas Verdes |
# 387C44 | Pino verde |
# 347C2C | Verde de la selva |
# 347C17 | Trébol verde |
# 348017 | Medium Spring Green |
# 4E9258 | Bosque verde |
# 6AA121 | Cebolla verde |
# 4AA02C | Primavera verde |
# 41A317 | Verde lima |
# 3EA055 | Trébol verde |
# 6CBB3C | Serpiente verde |
# 6CC417 | Alien Green |
# 4CC417 | Manzana verde |
# 52D017 | Amarillo verde |
# 4CC552 | Kelly verde |
# 54C571 | Zombie Green |
# 99C68E | Rana verde |
# 89C35C | Guisantes verdes |
# 85BB65 | Dollar Bill Green |
# 8BB381 | Mar Verde Oscuro |
# 9CB071 | Iguana Green |
# B2C248 | Aguacate verde |
# 9DC209 | Verde pistacho |
# A1C935 | Ensalada Verde |
# 7FE817 | Colibrí Verde |
# 59E817 | Nebulosa Verde |
# 57E964 | Semáforo ir verde |
# 64E986 | Algas Verdes |
# 5EFB6E | Jade verde |
# 00FF00 | Verde |
# 5FFB17 | Verde esmeralda |
# 87F717 | Verde césped |
# 8AFB17 | Monasterio |
# 6AFB92 | Verde dragón |
# 98FF98 | Menta verde |
# B5EAAA | Pulgar verde |
# C3FDB8 | Jade Claro |
# CCFB5D | Té verde |
# B1FB17 | Verde amarillo |
# BCE954 | Limo verde |
# EDDA74 | Vara de oro |
# EDE275 | Cosecha de oro |
# FFE87C | Sol amarillo |
4. Nombres de color HTML amarillo
El amarillo se puede usar para crear un estado de ánimo no serio, mostrar creatividad y optimismo en una página. Tenga en cuenta que el amarillo funciona mejor como fondo que un color de texto.
# FFFF00 | Amarillo |
# FFF380 | Amarillo de maíz |
# FFFFC2 | Pergamino |
#FFFFCC | Crema |
# FFF8C6 | Gasa de limón |
# FFF8DC | Seda de maiz |
# F5F5DC | Beige |
# FBF6D9 | Rubia |
# FAEBD7 | Blanco antiguo |
# F7E7CE | champán |
#FFEBCD | BlanqueadoAlmendra |
# F3E5AB | Vainilla |
# ECE5B6 | Marrón tostado |
# FFE5B4 | melocotón |
# FFDB58 | Mostaza |
# FFD801 | Patito de goma amarillo |
# FDD017 | Oro brillante |
# EAC117 | marrón dorado |
# F2BB66 | Macarrones con queso |
# FBB917 | Azafrán |
# FBB117 | Cerveza |
# FFA62F | Cantalupo |
# E9AB17 | Abeja amarilla |
5. Colores HTML marrones
El fondo marrón puede dificultar la lectura del texto blanco o negro, puede recurrir al usuario a otros colores que tengan un buen contraste con su tono marrón.
# E2A76F | Azúcar morena |
# DEB887 | BurlyWood |
# FFCBA4 | Melocotón profundo |
# C9BE62 | Jengibre marrón |
# E8A317 | Autobús escolar amarillo |
# EE9A4D | Sandy Brown |
# C8B560 | Fall Leaf Brown |
# D4A017 | Oro naranja |
# C2B280 | Arena |
# C7A317 | Cookie Brown |
# C68E17 | Caramelo |
# B5A642 | Latón |
# ADA96E | Caqui |
# C19A6B | Marrón camel |
# CD7F32 | Bronce |
# C88141 | Naranja tigre |
# C58917 | Canela |
# AF9B60 | Casquillo de bala |
# AF7817 | Vara de oro oscura |
# B87333 | Cobre |
# 966F33 | Madera |
# 806517 | Roble marrón |
# 827839 | Mocasín |
# 827B60 | Ejército marrón |
# 786D5F | Arenisca |
# 493D26 | Moca |
# 483C32 | Gris pardo |
# 6F4E37 | café |
# 835C3B | Oso café |
# 7F5217 | Tierra roja |
# 7F462C | Sepia |
6. Colores HTML naranja
El naranja funciona muy bien para resaltar un punto cuando el color se utiliza como fondo y puede evocar una sensación de entusiasmo y calidez sin ser demasiado pegajoso. Naranja HTML Colors
# C47451 | Salmón anaranjado |
# C36241 | Oxido |
# C35817 | Zorro rojo |
# C85A17 | Chocolate |
# CC6600 | Sedona |
# E56717 | Papaya Naranja |
# E66C2C | Naranja de halloween |
# F87217 | Naranja calabaza |
# F87431 | Construcción Cono Naranja |
# E67451 | Amanecer naranja |
# FF8040 | Naranja Mango |
# F88017 | Naranja oscuro |
# FF7F50 | Coral |
# F88158 | Basket Ball Orange |
# F9966B | Salmón claro |
# E78A61 | Mandarina |
# E18B6B | Salmón oscuro |
# E77471 | Coral claro |
# F75D59 | Frijol rojo |
# E55451 | Valentine Red |
# E55B3C | Naranja impactante |
7. Códigos de color HTML rojo
Para algunos navegadores, el texto subrayado en rojo se usa como enlaces visitados, debe evitar usarlo para no confundir a los visitantes.
# FF0000 | rojo |
# FF2400 | Escarlata |
# F62217 | Rojo rubí |
# F70D1A | Ferrari rojo |
# F62817 | Fire Engine Red |
# E42217 | Rojo lava |
# E41B17 | Amo el rojo |
# DC381F | Pomelo |
# C34A2C | Rojo castaño |
# C24641 | Rojo cereza |
# C04000 | Caoba |
# C11B17 | Pimiento picante |
# 9F000F | Arándano |
# 990012 | Vino tinto |
# 8C001A | borgoña |
# 954535 | castaña |
# 7E3517 | Sangre roja |
# 8A4117 | Tierra de siena |
# 7E3817 | Sangría |
# 800517 | Ladrillo refractario |
# 810541 | Granate |
# 7D0541 | Pastel de ciruela |
# 7E354D | Terciopelo Granate |
# 7D0552 | Terciopelo ciruela |
# 7F4E52 | Pinzón Rosado |
# 7F5A58 | Pardo rojizo |
# 7F525D | Púrpura opaco |
# B38481 | Rosy Brown |
# C5908E | Khaki Rose |
8. Códigos de color HTML rosa
Según la ciencia del color, Pink y sus tonos se pueden usar si desea que el visitante tenga una sensación de confianza, sofisticación y calidez en su subconsciente.
# C48189 | Arco Rosa |
# C48793 | Lápiz labial rosa |
# E8ADAA | Rosa |
# ECC5C0 | Oro rosa |
# EDC9AF | Arena del desierto |
# FDD7E4 | Pink Pig |
#FCDFFF | Algodón de azúcar |
#FFDFDD | Chicle rosa |
# FBBBB9 | Misty Rose |
#FAAFBE | Rosado |
#FAAFBA | Rosa claro |
# F9A7B0 | Flamingo Pink |
# E7A1B0 | Rosa rosada |
# E799A3 | Margarita rosa |
# E38AAE | Cadillac Pink |
# F778A1 | Clavel rosa |
# E56E94 | Rubor rojo |
# F660AB | Rosa caliente |
# FC6C85 | Sandía Rosa |
# F6358A | Rojo violeta |
# F52887 | Rosa profundo |
# E45E9D | Magdalena Rosada |
# E4287C | Limonada rosa |
# F535AA | Rosa neón |
# FF00FF | Magenta |
# E3319D | Dimorphotheca Magenta |
# F433FF | Rosa neón brillante |
# D16587 | Rojo Violeta Pálido |
# C25A7C | Tulipán rosa |
# CA226B | Rojo violeta medio |
# C12869 | Rosa Pícaro |
# C12267 | Rosa Quemado |
# C25283 | Tímido Rosa |
# C12283 | Clavel Oscuro Rosa |
# B93B8F | ciruela |
9. Códigos de color HTML púrpura y blanco
El uso de color de texto blanco sobre fondo blanco hará que sea ilegible para los usuarios y, además de no ser fácil de usar, puede obtener una penalización de SEO para su sitio, por lo tanto, siempre use blanco y otros colores claros sobre fondos oscuros.
# 7E587E | Viola Purple |
# 571B7E | Iris morado |
# 583759 | Ciruela púrpura |
# 4B0082 | Índigo |
# 461B7E | Monstruo Morado |
# 4E387E | Neblina púrpura |
# 614051 | Berenjena |
# 5E5A80 | Uva |
# 6A287E | Mermelada Morada |
# 7D1B7E | Orquídea oscura |
# A74AC7 | Flor Purpura |
# B048B5 | Orquídea mediana |
# 6C2DC7 | Amatista púrpura |
# 842DCE | Violeta oscuro |
# 8D38C9 | Violeta |
# 7A5DC7 | Bush sabio morado |
# 7F38EC | Precioso púrpura |
# 8E35EF | Púrpura |
# 893BFF | Aztech Purple |
# 8467D7 | Púrpura medio |
# A23BEC | Jasmine Purple |
# B041FF | Narciso púrpura |
# C45AEC | Tyrian Purple |
# 9172EC | Crocus Purple |
# 9E7BFF | Mimosa morada |
# D462FF | Heliotrope Purple |
# E238EC | carmesí |
# C38EC7 | Dragón Morado |
# C8A2C8 | Lila |
# E6A9EC | Blush Pink |
# E0B0FF | Color de malva |
# C6AEC7 | Wisteria Purple |
# F9B7FF | Flor rosa |
# D2B9D3 | Cardo |
# E9CFEC | Bígaro |
# EBDDE2 | Pinocho de lavanda |
# E3E4FA | Azul lavanda |
# FDEEF4 | Perla |
# FFF5EE | Concha |
#FEFCFF | Leche blanca |
#FFFFFF | Blanco |
Algunos códigos de color HTML más utilizados
Estos son algunos de los colores populares utilizados en la web, los puse en una tabla separada para que se puedan encontrar rápidamente.
rojo | # FF0000 | Blanco | #FFFFFF |
Cian | # 00FFFF | Plata | # C0C0C0 |
Azul | # 0000FF | Gris o gris | # 808080 |
Azul oscuro | # 0000A0 | Negro | # 000000 |
Azul claro | # ADD8E6 | naranja | # FFA500 |
Púrpura | # 800080 | marrón | # A52A2A |
Amarillo | # FFFF00 | Granate | # 800000 |
Lima | # 00FF00 | Verde | # 008000 |
Magenta | # FF00FF | Aceituna | # 808000 |
Conclusión
Ahora que tiene tablas de referencia rápida de colores HTML comunes, debería poder usar cualquier color que desee en su página. Desde un punto de vista creativo, debe evitar el uso de colores fuertes si puede y cuando trabaje con la parte frontal del sitio, mantener los gráficos o colores de fondo también es importante para garantizar un contraste adecuado.
Artículos recomendados
Esta es una guía de nombres de colores HTML. Aquí discutimos cómo implementar colores en una página web usando diferentes colores HTML con ejemplos. También puede consultar nuestros otros artículos sugeridos para obtener más información:
- Estilos de fuentes HTML
- Atributos HTML
- Hojas de estilo HTML
- Cómo funciona HTML
- Colores en Matlab | ¿Cómo cambiar el estilo en Matlab?