Nombres de colores HTML en HTML y CSS

Los colores desempeñan un papel crucial en el diseño web: evocan emociones, transmiten mensajes y ayudan a crear una experiencia visual atractiva. En HTML y CSS, los nombres de colores ofrecen una forma cómoda de especificar colores sin usar valores hexadecimales o RGB. Hay muchas formas en que los colores reciben sus nombres. A menudo se nombran por plantas, animales u otros objetos a los que se parecen. Por ejemplo, el color orange recibió su nombre cuando empezó a usarse para describir la fruta naranja. Los colores también pueden tomar su nombre de pigmentos usados históricamente para crearlos, y un nombre de color puede estar influido por una historia interesante o por emociones asociadas a ese color.

Los nombres de colores HTML son palabras clave CSS predefinidas, como red, teal, orange y rebeccapurple. Son legibles y fáciles de recordar, pero menos precisos que HEX, RGB, HSL y otros formatos numéricos de color.

¿Cuántos colores existen?

La cantidad de colores del mundo va mucho más allá de los colores tradicionales del arcoíris. Si revisa el sistema RGB, verá que existen 256^3 = 16,777,216 colores, y todos podrían tener sus propios nombres. Con millones de colores, las personas han tenido que ser creativas para nombrarlos. Aunque la mayoría son matices de un color más común, siempre resulta interesante conocer el origen de esos nombres y lo que pueden simbolizar.

Nombres de colores HTML

CSS Color Module Level 4 define los colores con nombre estandarizados que se usan en CSS. Este conjunto suele describirse como 147 colores con nombre HTML/CSS, aunque el recuento exacto puede variar según la fuente, dependiendo de cómo se cuenten alias como gray/grey y adiciones como rebeccapurple. Los nombres básicos originales incluyen aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white y yellow. CSS moderno también incluye muchos nombres extendidos, entre ellos orange y rebeccapurple.

La figura ilustra 17 colores básicos con códigos HEX:

Lista de nombres básicos de colores HTML con códigos HEX

También puede definir colores en un sitio web mediante códigos de color HTML como HEX, RGB, RGBA, HSL y HSLA. Para obtener más información, consulte Códigos de color HTML.

Historia de los nombres de colores HTML

¿De dónde vienen los nombres de colores HTML? Los colores fueron originalmente un producto de X Window System (X), una interfaz gráfica de usuario (GUI) publicada por el Massachusetts Institute of Technology. En 1986, la lista de colores de la GUI incluía 69 tonos básicos para la versión X10R3. Después llegó X11R2 en 1988, con la incorporación de tres colores, incluidos tonos idénticos de gray y grey. Se dice que los programadores de Hewlett-Packard no recordaban la ortografía correcta y decidieron usar dos grafías para evitar errores.

En 1989 apareció una actualización importante creada por Paul Raveling (X11R4), con numerosos neutros claros como “papaya whip” y “lemon chiffon”, además de otros tonos muy nombrados como “blanched almond” y “peach puff”. En los años 80, los colores podían variar mucho de un monitor a otro, según el fabricante de la máquina. Tras no recibir aprobación del American National Standards Institute (ANSI), que emitía estándares para propiedades de color web, Raveling decidió resolverlo por su cuenta. Tomó estos nombres de la desaparecida empresa de pinturas Sinclair Paints y calibró los colores para su propio monitor HP.

X11 obtuvo después un conjunto de nombres de color más vivos gracias a otro programador, John C. Thomas. Cambió nombres de tonos para reducir la confusión de los usuarios. Al parecer, una caja de 72 crayones Crayola le ayudó en el proceso. Así nacieron “aquamarine”, “orchid” y “salmon”, entre otros.

En 2001, el World Wide Web Consortium (W3C) publicó el primer borrador de trabajo de CSS 3 Color Module, que incluía colores. La base de datos de nombres de color ha sido objeto de debate y críticas. Se cuestionó el esquema de nomenclatura. Por ejemplo, “dark grey” era más claro que “grey”; no todos los colores tenían versiones oscuras o claras, y la distribución era desigual, con más presencia de rojos y verdes que de azules.

Otros puntos de discusión fueron lingüísticos y culturales. Para muchas personas no nativas en inglés, algunos nombres de colores resultaban incómodos; otras vieron posibles connotaciones raciales en “indian red” y consideraron que muchos nombres tenían una orientación regional. Cabe señalar que estos problemas siguen siendo relevantes hoy.

La siguiente figura muestra el modelo de cubo RGB con colores que incluyeron Paul Raveling y John Thomas. Raveling agregó un grupo de tonos blanquecinos usando nombres de Sinclair Paints. Thomas añadió tonos vivos tomando nombres de Crayola:

Distribución de nombres de colores HTML de Raveling y Thomas en el cubo RGB

En 2014 apareció un nuevo tono en la lista de nombres de colores HTML. “Rebecca purple” se introdujo en honor a Rebecca Meyer, hija de Eric Meyer, respetado programador y escritor sobre CSS. El color (#663399) era el favorito de la niña. Rebecca murió de cáncer cerebral a los seis años.

Nombre de color HTML RebeccaPurple con códigos HEX y RGB

La evolución de los nombres de color

Entonces, ¿por qué necesitamos nombres de colores HTML? Después de todo, podemos usar códigos de color. Hay muchas respuestas posibles, pero quizá la principal es que las personas no piensan en el color como un conjunto de números y letras; usar un nombre resulta más natural. La historia de los nombres de color es un tema fascinante que dice mucho sobre la evolución del lenguaje, la cultura y la tecnología. Desde los antiguos egipcios hasta los diseñadores web modernos, las personas han usado nombres de colores para describir y definir el mundo que las rodea durante miles de años.

Los nombres de colores han cambiado con el tiempo, y lo que hoy consideramos cierto color quizá no se entendía igual en el pasado. Por ejemplo, el color que hoy conocemos como “orange” se llamaba “yellow-red” en la antigüedad. Y purple fue en otro tiempo un color reservado para la realeza, porque se producía con tintes costosos. El origen de los nombres de color se remonta a épocas antiguas, cuando se nombraban a partir de objetos de la naturaleza o fenómenos culturales. Por ejemplo, “red” procede de la palabra sánscrita “raktam”, que significa sangre. “Green” viene del inglés antiguo “grēne”, que originalmente significaba “young” o “immature”, reflejando el color de plantas y hojas jóvenes.

Algunos de los nombres de color más populares hoy son nombres de colores HTML, usados para definir colores en diseño web. Incluyen valores como “cornflowerblue”, “lavender”, “lemonchiffon”, “papayawhip”, “palegoldenrod” y “whitesmoke”. Los diseñadores usan nombres de color para evocar emociones y estados de ánimo en sus trabajos, lo que puede ser una herramienta poderosa para comunicar una intención visual.

Puntos importantes sobre los nombres de colores HTML

Para usar nombres de colores HTML, debe escribirlos correctamente. Los nombres no distinguen entre mayúsculas y minúsculas, por lo que darkred, DarkRed y DARKRED son válidos.
Los nombres de colores HTML tienen una gama limitada. Es posible que no cubran todos los tonos o variaciones. Si necesita un color específico que no está representado por un nombre HTML, probablemente deba usar HEX, RGB u otros códigos de color. Puede usar Color Converters, herramientas gratuitas en línea que permiten convertir colores entre distintos códigos, como nombres de colores HTML, RGB, HEX, HSL, HSV, HWB, LAB, CMYK, LCH, XYZ, etc.
Los nombres de colores HTML suelen ser altamente compatibles con navegadores modernos. Sin embargo, algunos navegadores muy antiguos o poco usados pueden admitir solo una parte de los nombres o interpretarlos con ligeras diferencias.
Existen listas extendidas de nombres de color en distintos frameworks CSS, bibliotecas y recursos de diseño. No forman parte del estándar HTML en sí, aunque se usan con frecuencia. Esos nombres extendidos no siempre son reconocidos o compatibles en todos los navegadores y plataformas, pero pueden ser útiles en contextos donde la compatibilidad no es una preocupación.
Para usar colores HTML en sus páginas web, asegúrese de que los nombres elegidos sigan pautas de accesibilidad. Use combinaciones con contraste suficiente para garantizar la legibilidad a usuarios con discapacidad visual. Herramientas como Color Contrast Checkers pueden ayudarle a verificar que los colores elegidos cumplan estándares de accesibilidad recomendados.
Los nombres de colores HTML son subjetivos y pueden tener interpretaciones o asociaciones distintas en diferentes idiomas, culturas o contextos. Además, los propios colores y las paletas se asocian con emociones y estados de ánimo que pueden variar entre culturas. Por ejemplo, el blanco en sociedades occidentales se asocia con bodas, pureza y limpieza. En muchas culturas asiáticas, en cambio, puede simbolizar muerte, duelo y humildad. Considere el significado previsto y el contexto al elegir colores para sitios localizados.
Los nombres de colores HTML pueden usarse en varios atributos HTML que permiten especificar un color. Lo veremos con más detalle en la siguiente sección.

Trabajar con nombres de colores HTML

Los nombres de colores HTML y CSS son cotidianos para quienes trabajan en desarrollo web. En HTML y XHTML, los colores pueden usarse para texto, fondos, bordes de marcos, tablas y celdas individuales. Puede establecer el color de estas formas:

Usando un atributo style en línea. Puede aplicar el atributo style a elementos HTML como <body>, <p>, <table>, <div>, <h1> o <h2>. Recuerde que usar un atributo style sobrescribe los estilos coincidentes definidos en la etiqueta HTML <style> o en una hoja de estilos externa.
Usando CSS interno. El estilo CSS interno resulta útil para aplicar estilos a páginas individuales colocando todos los estilos en el elemento <style> dentro del <head> de un documento HTML.

Este es un ejemplo de uso de nombres de colores HTML para colorear texto, fondos y bordes. Usamos varias formas de especificar colores:

Para usar colores con nombre en un documento HTML:

Elija un nombre de color válido, como DarkRed, DimGray, OldLace o White.
Aplíquelo a propiedades CSS como color, background-color o border-color.
Use estilos en línea para un elemento o reglas CSS internas cuando el mismo estilo deba aplicarse a varios elementos.

 1<html>
 2	<head>
 3		<title>HTML color names</title>
 4		<style>
 5			h2 {
 6			color:DarkRed;
 7			}
 8			p {
 9			color:DimGray;
10			}
11		</style>
12	</head>
13	<body style="background-color:OldLace;">
14		<h2>Color Names List</h2>
15		<p>The HTML5 standard set of 147 color names, known as X11 color names, provides a color names list to represent different hues.</p>
16		<h2>Basic Color Names</h2>
17		<p style="background-color:White; border-style:solid; border-color:DarkRed"> There are 17 basic color names in HTML5. They are widely supported across different browsers and platforms.</p>
18	</body>
19</html>

El código HTML renderizado se ve así:

Documento HTML renderizado con nombres de color para texto, fondo y bordes

Para obtener más información sobre cómo cambiar el color del texto, el fondo o el borde, consulte Trabajar con color HTML y el capítulo Artículos prácticos.

Limitaciones de los nombres de colores HTML

Una de las principales limitaciones de los nombres de colores HTML es su conjunto restringido. Esto significa que quizá no encuentre ciertos tonos o variaciones representados por nombres HTML y necesite usar métodos alternativos, como códigos HEX o RGB.
Otra limitación es que no todos los navegadores muestran los nombres de colores HTML de la misma forma. Los colores pueden tener interpretaciones ligeramente distintas en distintos navegadores y dispositivos. Esta falta de precisión es especialmente crítica en proyectos de diseño que requieren coincidencia exacta de color.
Otras limitaciones se relacionan con el control de transparencia y la preparación para flujos orientados a impresión. Para transparencia, use códigos de color HTML como RGBA o HSLA. Para gestión de color específica de impresión, verifique el flujo de color requerido por su cadena de herramientas de destino.

Datos curiosos sobre los nombres de colores HTML

Los colores Grey y Gray, Cyan y Aqua, Fuchsia y Magenta tienen los mismos valores HEX y RGB:

Nombres de colores HTML duplicados con los mismos códigos HEX y RGB

Parece que los programadores de Hewlett-Packard no podían recordar la ortografía correcta de “gray” con “a” (Gray), por lo que se agregó una opción duplicada (Grey) para evitar errores en el código. Esta duplicación influyó en algunos nombres de colores HTML más:

Darkgray & Darkgrey – HEX #A9A9A9, RGB(169, 169, 169)
Darkslategray & Darkslategrey – HEX #2F4F4F, RGB(47, 79, 79)
Dimgray & Dimgrey – HEX #696969, RGB(105, 105, 105)
Lightslategray & Lightslategrey – HEX #778899, RGB(119, 136, 153)
Lightgray & Lightgrey – HEX #D3D3D3, RGB(211, 211, 211)
Slategray & Slategrey – HEX #708090, RGB(112, 128, 144)

Todos sabemos que Red corresponde al código #ff0000. El nombre de color HTML Blue corresponde a #0000ff. Y esperamos que Green coincida con #00ff00. Pero no. El nombre Green corresponde a #008000. Para #00ff00 debe usar Lime.

Nombres de colores HTML red, blue, green y lime con códigos HEX y RGB

Veamos los tonos de gris. No esperaríamos que dark grey fuera más claro que grey.

Nombres de color DarkGrey, Grey y LightGrey con códigos HEX y RGB

Sugerencias para cambiar el nombre de colores HTML

Programadores, diseñadores y usuarios siguen debatiendo los nombres de colores, y eso es normal. A continuación se muestran ejemplos de debates que todavía no se han reflejado en las especificaciones oficiales. Se han propuesto cambios para tres colores, donde los nombres antiguos serían reemplazados por nuevos:

IndianRed a ChestnutRose
Moccasin a Peach
NavajoWhite a OldPaper

IndianRed recibe su nombre de un famoso pigmento rojo de la India y no tiene relación con los pueblos nativos americanos. El nombre “IndianRed” procede de la laterita roja encontrada en la India, compuesta por óxidos de hierro naturales. Fue identificada por primera vez por el científico escocés Francis Buchanan-Hamilton. El primer uso registrado de indian red como término de color en inglés fue en 1672.

Cabe señalar que “IndianRed”, nombre del color de un crayón Crayola, fue renombrado por la empresa a chestnut, probablemente debido a discusiones en torno a este nombre.

Crayón Crayola antes y después del debate sobre el nombre IndianRed

Moccasin es principalmente un color de la familia del amarillo. Es una mezcla de naranja y marrón. Quizá Moccasin no tenga un significado especial y sea solo el nombre de un tipo de calzado. Una posible objeción a ese nombre de color puede venir de que se trata de un tipo de calzado históricamente asociado a pueblos nativos americanos.

NavajoWhite es un tono pastel pálido amarillo anaranjado que se usa a menudo en interiores de viviendas. El nombre del color hace referencia al fondo de la bandera de la Nación Navajo. Aunque es un color claro, no es blanco ni blanquecino, como sugiere el nombre. Es similar a otros colores como peach puff, wheat y moccasin.

Nombres de colores IndianRed, Moccasin y NavajoWhite con códigos HEX y RGB

Nombres de colores en línea

La aplicación gratuita en línea Color Names busca un nombre de color por el valor de su código. Puede introducir códigos en formatos como nombre de color HTML, RGB, HEX, HSL, HSV, HWB, LAB, LCH, CMYK, XYZ, OKLAB u OKLCH. La aplicación devuelve una lista de nombres de color con la similitud más cercana. Funciona en computadoras, tabletas y dispositivos móviles, y puede ayudar a diseñadores que necesitan identificar, comparar o compartir colores.

Nota: En la aplicación, “similarity” significa similitud de coseno, basada en el coseno del ángulo entre dos vectores en un espacio de color multidimensional (por ejemplo, RGB o HSV). La similitud de coseno se define como el producto escalar de los vectores dividido por el producto de sus longitudes. El valor 1 indica colores idénticos, y 0 indica ortogonalidad, es decir, ausencia de similitud.

Resumen de nombres de colores HTML

Los nombres de colores HTML ofrecen una forma cómoda de especificar colores en desarrollo web. Su uso en muchas áreas demuestra que a muchas personas no les gusta trabajar con códigos y números. No piensan en términos de #FFA500 para ciertos tonos, sino mediante analogías – una naranja. Usar nombres para definir colores resulta más natural.
HTML y CSS ofrecen colores con nombre estandarizados cuyos nombres se inspiran en la naturaleza, emociones u orígenes históricos, y el sistema RGB admite 16,777,216 colores.
Los nombres de colores HTML tienen varias limitaciones, incluido un conjunto restringido que quizá no cubra todos los tonos o variaciones, por lo que los diseñadores usan códigos HEX o RGB para una representación más precisa.
La sintaxis correcta, la compatibilidad, las pautas de accesibilidad y el contexto cultural son cruciales al usar nombres de colores HTML, que pueden aplicarse a texto, fondos y bordes en diseño web.

FAQ

¿Los nombres de colores HTML distinguen entre mayúsculas y minúsculas?

No. Los nombres de colores HTML y CSS no distinguen entre mayúsculas y minúsculas, por lo que darkred, DarkRed y DARKRED representan el mismo color.

¿Debo usar nombres de color o valores HEX?

Use nombres de color cuando la legibilidad sea útil y el control exacto de la paleta no sea crítico. Use HEX, RGB, HSL, RGBA o HSLA cuando necesite colores precisos, transparencia o consistencia con un sistema de diseño.

¿Los nombres de colores HTML pueden tener transparencia?

No. Los colores con nombre son palabras clave de color opacas. Use RGBA o HSLA cuando necesite controlar la transparencia.