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

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ódigoColor
# 000000Negro
# 0C090ANoche
# 2C3539Gunmetal
# 2B1B17Medianoche
# 34282CCarbón
# 25383CGris pizarra oscuro
# 3B3131Petróleo
# 413839Gato negro
# 3D3C3AIridio
# 463E3FAnguila negra
# 4C4646Vaca negra
# 504A4BLobo gris
# 565051Vampire Grey
# 5C5858Delfín gris
# 625D5DGris de carbono
# 666362Gris ceniza
# 6D6968Gris nublado
# 726E6DGris ahumado
# 736F6Egris
# 837E7CGranito
# 848482Acorazado gris
# B6B6B4Nube gris
# D1D0CEGanso gris
# ***4E2Platino
# BCC6CCPlata metálica
# 98AFC7Gris azulado
# 6D7B8DGris pizarra claro
# 657383Gris pizarra
# 616D7EJet 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.

# 646D7EAzul niebla
# 566D7EMármol azul
# 737CA1Azul pizarra
# 4863A0Azul acero
# 2B547EArrendajo azul
# 2B3856Azul pizarra oscuro
# 151B54Azul medianoche
# 000080Azul marino
# 342D7EBallena azul
# 15317ELapis Blue
# 151B8DDenim Azul Oscuro
# 0000A0Tierra azul
# 0020C2Azul cobalto
# 0041C2Blueberry Blue
# 2554C7Azul zafiro
# 1569C7Ojos azules
# 2B60DEAzul real
# 1F45FCOrquídea azul
# 6960ECLoto azul
# 736AFFAzul pizarra claro
# 357EC7Windows Blue
# 368BC1Hielo azul glacial
# 488AC7Azul seda
# 3090C7Hiedra azul
# 659EC7Koi azul
# 87AFC7Azul Columbia
# 95B9C7Bebe azul
# 728FCEAzul claro de acero
# 2B65ECOcéano azul
# 306EFFCinta azul
# 157DECVestido azul
# 1589FFDodger Blue
# 6495EDAzul aciano
# 6698FFCielo azul
# 38ACECMariposa azul
# 56A5ECIceberg
# 5CB3FFAzul cristal
# 3BB9FFDeep Sky Blue
# 79BAECAzul denim
# 82CAFAAzul cielo claro
# 82CAFFDay Sky Blue
# A0CFECJeans azul
# B7CEECAngel Azul
# B4CFECAzul pastel
# C2DFFFAzul marino
# C6DEFFAzul pálido
#AFDCECAzul coral
#ADDFFFAzul claro
#BDEDFFRobin Egg Blue
#CFECECLirio azul pálido
# E0FFFFCian claro
# EBF4FAAgua
# F0F8FFAlice azul
# F0FFFFAzur
#CCFFFFPizarra clara
# 93FFE8Aguamarina ligera
# 9AFEFFAzul eléctrico
# 7FFFD4Aguamarina
# 00FFFFCian o Aqua
# 7DFDFETron Blue
# 57FEFFCirconita Azul
# 8EEBECLaguna Azul
# 50EBECCeleste
# 4EE2ECDiamante azul
# 81D8D0Azul tiffany
# 92C7C7Opaco Cian
# 77BFC7Hosta Azul
# 78C7C7Northern Lights Blue
# 48CCCDTurquesa medio
# 43C6DBTurquesa
# 46C7C7Medusa
# 7BCCB5Azul 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.

# 43BFC7Guacamayo Azul Verde
# 3EA99FLight Sea Green
# 3B9C9CTurquesa oscuro
# 438D80Tortuga Verde
# 348781Aguamarina mediana
# 307D7EAzul verdoso
# 5E7D7ETurquesa grisácea
# 4C787EEscarabajo Verde
# 008080Verde azulado
# 4E8975Mar verde
# 78866BCamuflaje verde
# 848b79Verde salvia
# 617C58Hazel Green
# 728C00Veneno Verde
# 667C26Helecho verde
# 254117Bosque Oscuro Verde
# 306754Verde Mar Medio
# 347235Verde bosque medio
# 437C17Algas Verdes
# 387C44Pino verde
# 347C2CVerde de la selva
# 347C17Trébol verde
# 348017Medium Spring Green
# 4E9258Bosque verde
# 6AA121Cebolla verde
# 4AA02CPrimavera verde
# 41A317Verde lima
# 3EA055Trébol verde
# 6CBB3CSerpiente verde
# 6CC417Alien Green
# 4CC417Manzana verde
# 52D017Amarillo verde
# 4CC552Kelly verde
# 54C571Zombie Green
# 99C68ERana verde
# 89C35CGuisantes verdes
# 85BB65Dollar Bill Green
# 8BB381Mar Verde Oscuro
# 9CB071Iguana Green
# B2C248Aguacate verde
# 9DC209Verde pistacho
# A1C935Ensalada Verde
# 7FE817Colibrí Verde
# 59E817Nebulosa Verde
# 57E964Semáforo ir verde
# 64E986Algas Verdes
# 5EFB6EJade verde
# 00FF00Verde
# 5FFB17Verde esmeralda
# 87F717Verde césped
# 8AFB17Monasterio
# 6AFB92Verde dragón
# 98FF98Menta verde
# B5EAAAPulgar verde
# C3FDB8Jade Claro
# CCFB5DTé verde
# B1FB17Verde amarillo
# BCE954Limo verde
# EDDA74Vara de oro
# EDE275Cosecha de oro
# FFE87CSol 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.

# FFFF00Amarillo
# FFF380Amarillo de maíz
# FFFFC2Pergamino
#FFFFCCCrema
# FFF8C6Gasa de limón
# FFF8DCSeda de maiz
# F5F5DCBeige
# FBF6D9Rubia
# FAEBD7Blanco antiguo
# F7E7CEchampán
#FFEBCDBlanqueadoAlmendra
# F3E5ABVainilla
# ECE5B6Marrón tostado
# FFE5B4melocotón
# FFDB58Mostaza
# FFD801Patito de goma amarillo
# FDD017Oro brillante
# EAC117marrón dorado
# F2BB66Macarrones con queso
# FBB917Azafrán
# FBB117Cerveza
# FFA62FCantalupo
# E9AB17Abeja 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.

# E2A76FAzúcar morena
# DEB887BurlyWood
# FFCBA4Melocotón profundo
# C9BE62Jengibre marrón
# E8A317Autobús escolar amarillo
# EE9A4DSandy Brown
# C8B560Fall Leaf Brown
# D4A017Oro naranja
# C2B280Arena
# C7A317Cookie Brown
# C68E17Caramelo
# B5A642Latón
# ADA96ECaqui
# C19A6BMarrón camel
# CD7F32Bronce
# C88141Naranja tigre
# C58917Canela
# AF9B60Casquillo de bala
# AF7817Vara de oro oscura
# B87333Cobre
# 966F33Madera
# 806517Roble marrón
# 827839Mocasín
# 827B60Ejército marrón
# 786D5FArenisca
# 493D26Moca
# 483C32Gris pardo
# 6F4E37café
# 835C3BOso café
# 7F5217Tierra roja
# 7F462CSepia

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

# C47451Salmón anaranjado
# C36241Oxido
# C35817Zorro rojo
# C85A17Chocolate
# CC6600Sedona
# E56717Papaya Naranja
# E66C2CNaranja de halloween
# F87217Naranja calabaza
# F87431Construcción Cono Naranja
# E67451Amanecer naranja
# FF8040Naranja Mango
# F88017Naranja oscuro
# FF7F50Coral
# F88158Basket Ball Orange
# F9966BSalmón claro
# E78A61Mandarina
# E18B6BSalmón oscuro
# E77471Coral claro
# F75D59Frijol rojo
# E55451Valentine Red
# E55B3CNaranja 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.

# FF0000rojo
# FF2400Escarlata
# F62217Rojo rubí
# F70D1AFerrari rojo
# F62817Fire Engine Red
# E42217Rojo lava
# E41B17Amo el rojo
# DC381FPomelo
# C34A2CRojo castaño
# C24641Rojo cereza
# C04000Caoba
# C11B17Pimiento picante
# 9F000FArándano
# 990012Vino tinto
# 8C001Aborgoña
# 954535castaña
# 7E3517Sangre roja
# 8A4117Tierra de siena
# 7E3817Sangría
# 800517Ladrillo refractario
# 810541Granate
# 7D0541Pastel de ciruela
# 7E354DTerciopelo Granate
# 7D0552Terciopelo ciruela
# 7F4E52Pinzón Rosado
# 7F5A58Pardo rojizo
# 7F525DPúrpura opaco
# B38481Rosy Brown
# C5908EKhaki 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.

# C48189Arco Rosa
# C48793Lápiz labial rosa
# E8ADAARosa
# ECC5C0Oro rosa
# EDC9AFArena del desierto
# FDD7E4Pink Pig
#FCDFFFAlgodón de azúcar
#FFDFDDChicle rosa
# FBBBB9Misty Rose
#FAAFBERosado
#FAAFBARosa claro
# F9A7B0Flamingo Pink
# E7A1B0Rosa rosada
# E799A3Margarita rosa
# E38AAECadillac Pink
# F778A1Clavel rosa
# E56E94Rubor rojo
# F660ABRosa caliente
# FC6C85Sandía Rosa
# F6358ARojo violeta
# F52887Rosa profundo
# E45E9DMagdalena Rosada
# E4287CLimonada rosa
# F535AARosa neón
# FF00FFMagenta
# E3319DDimorphotheca Magenta
# F433FFRosa neón brillante
# D16587Rojo Violeta Pálido
# C25A7CTulipán rosa
# CA226BRojo violeta medio
# C12869Rosa Pícaro
# C12267Rosa Quemado
# C25283Tímido Rosa
# C12283Clavel Oscuro Rosa
# B93B8Fciruela

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.

# 7E587EViola Purple
# 571B7EIris morado
# 583759Ciruela púrpura
# 4B0082Índigo
# 461B7EMonstruo Morado
# 4E387ENeblina púrpura
# 614051Berenjena
# 5E5A80Uva
# 6A287EMermelada Morada
# 7D1B7EOrquídea oscura
# A74AC7Flor Purpura
# B048B5Orquídea mediana
# 6C2DC7Amatista púrpura
# 842DCEVioleta oscuro
# 8D38C9Violeta
# 7A5DC7Bush sabio morado
# 7F38ECPrecioso púrpura
# 8E35EFPúrpura
# 893BFFAztech Purple
# 8467D7Púrpura medio
# A23BECJasmine Purple
# B041FFNarciso púrpura
# C45AECTyrian Purple
# 9172ECCrocus Purple
# 9E7BFFMimosa morada
# D462FFHeliotrope Purple
# E238ECcarmesí
# C38EC7Dragón Morado
# C8A2C8Lila
# E6A9ECBlush Pink
# E0B0FFColor de malva
# C6AEC7Wisteria Purple
# F9B7FFFlor rosa
# D2B9D3Cardo
# E9CFECBígaro
# EBDDE2Pinocho de lavanda
# E3E4FAAzul lavanda
# FDEEF4Perla
# FFF5EEConcha
#FEFCFFLeche blanca
#FFFFFFBlanco

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# FF0000Blanco#FFFFFF
Cian# 00FFFFPlata# C0C0C0
Azul# 0000FFGris o gris# 808080
Azul oscuro# 0000A0Negro# 000000
Azul claro# ADD8E6naranja# FFA500
Púrpura# 800080marrón# A52A2A
Amarillo# FFFF00Granate# 800000
Lima# 00FF00Verde# 008000
Magenta# FF00FFAceituna# 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:

  1. Estilos de fuentes HTML
  2. Atributos HTML
  3. Hojas de estilo HTML
  4. Cómo funciona HTML
  5. Colores en Matlab | ¿Cómo cambiar el estilo en Matlab?