Nombres de colores HTML – uso en HTML
Los colores juegan un papel crucial en el diseño web, evocando emociones, transmitiendo mensajes y creando una experiencia visualmente atractiva. En el ámbito de HTML y CSS, los nombres de colores proporcionan una manera conveniente de especificar colores sin la necesidad de valores hexadecimales o RGB. Hay muchas formas en que los colores obtienen sus nombres. A menudo reciben nombres de plantas, animales u otras cosas a las que se parecen. Por ejemplo, el color naranja recibió su nombre cuando se usaba para describir la fruta naranja. Los colores también reciben el nombre de los pigmentos que se utilizaron históricamente para crearlos, y el nombre del color puede verse influenciado por una historia interesante, así como por sentimientos o emociones asociados con ese color.
Este artículo explora el mundo de los nombres de colores HTML, sus usos, limitaciones y el significado de los colores en el diseño web. Aquí calcularemos cuántos colores existen según el modelo de color RGB y cuántos colores hay en el estándar HTML, cómo surgieron los nombres de algunos colores y por qué todavía los usamos y no solo códigos de color.
¿Cuántos colores existen?
La cantidad de colores que existen en el mundo va mucho más allá de los colores tradicionales del arcoíris. Si revisas el sistema RGB, puedes ver que hay 256^3 = 16,777,216 colores, ¡y todos pueden tener sus propios nombres! Con millones de colores, la gente tuvo que ser creativa para nombrarlos a todos. Si bien la mayoría de los colores son solo matices de un color más común, siempre es interesante saber de dónde provienen estos nombres y qué podrían simbolizar.
Nombres de colores HTML
Especificación W3C de nombres de colores distingue colores básicos y extendidos. HTML4 tiene una lista de nombres de colores con 140 nombres, incluidos 16 colores básicos: agua, negro, azul, fucsia, gris, verde, lima, granate, azul marino, oliva, morado, rojo, plateado, verde azulado, blanco y amarillo. En HTML5, puedes utilizar un total de 147 nombres de colores, incluidos 17 colores básicos. El nombre del color básico adicional en HTML5 es naranja.
La figura ilustra 17 colores básicos con códigos HEX:
También puede definir colores en un sitio web utilizando códigos de color HTML: HEX, RGB, RGBA, HSL y HSLA. Para obtener más información, visite el artículo Códigos de color HTML.
Un poco de Historia…
¿De dónde vienen los nombres de colores HTML? Los colores fueron originalmente un producto del X Window System (X), una interfaz gráfica de usuario (GUI) lanzada por el Instituto de Tecnología de Massachusetts. En 1986, la lista de colores de la GUI incluía 69 tonos básicos para la versión X10R3. Luego llegó el X11R2 en 1988 con la adición de tres colores, incluidos tonos idénticos de gris y gris. Se dice que los programadores de Hewlett-Packard no podían recordar la ortografía correcta y decidieron utilizar dos grafías para evitar errores.
En 1989, apareció una importante actualización creada por Paul Raveling (X11R4), que presentaba una serie de tonos neutros claros como “papaya whip” y “lemon chiffon”, así como otros tonos con nombres muy conocidos como “blanched almond” y “peach puff”. soplo". En los años 80, los colores podían variar mucho de un monitor a otro, dependiendo del fabricante de la máquina. Después de no recibir sanciones del Instituto Nacional Estadounidense de Estándares (ANSI), que emitió estándares para las propiedades de color de la Web, Raveling decidió tomar el asunto en sus propias manos. Raveling extrajo estos nombres de la ahora desaparecida empresa de pinturas Sinclair Paints y calibró los colores para su propio monitor HP.
Luego, X11 obtuvo un conjunto de nombres de colores más atrevidos gracias a otro programador, John C. Thomas. Cambió el nombre de las cortinas para aliviar la confusión de los usuarios. Al parecer, una caja de 72 crayones Crayola le ayudó en esto. De ahí nacieron “aquamarine”, “orchid” y “salmon”, por nombrar algunos.
En 2001, el World Wide Web Consortium (W3C) publicó el primer borrador de trabajo del módulo de color CSS 3, que incluía colores. La base de datos de melenas de color ha sido objeto de acaloradas discusiones y duras críticas. Se criticó el esquema de denominación de colores. Por ejemplo, “dark grey” era más claro que “grey”; no todos los colores tenían versiones oscuras o claras, la distribución del color era desigual, inclinándose hacia el rojo y el verde y alejándose del azul.
Otros puntos de discordia fueron las cuestiones lingüísticas y culturales. Para muchos que no eran hablantes nativos de inglés, algunos de los nombres de los colores parecían repulsivos; otros vieron posibles connotaciones raciales en el “rojo indio” y consideraron que muchos de los nombres de los colores tenían una orientación regional. Cabe señalar que estos problemas siguen siendo relevantes hoy en día.
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ó matices atrevidos tomando nombres de Crayola:
En 2014, apareció un nuevo tono en la lista de nombres de colores HTML. Se introdujo el “Rebecca purple” en honor a Rebecca Meyer, hija de Eric Meyer, un respetado programador y escritor de CSS. El color (#663399) era el favorito de la niña. Rebecca murió de cáncer cerebral a la edad de seis años.
La evolución de los nombres de los colores
Entonces, ¿por qué necesitamos nombres de colores HTML? Después de todo, ¡podemos usar códigos de colores! La respuesta puede ser muchas, pero probablemente la principal aquí es que la gente no piensa en el color como un conjunto de números y letras; usar un nombre de color para una persona es más natural. La historia de los nombres de los colores 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, la gente ha utilizado nombres de colores para describir y definir el mundo que los rodea durante miles de años.
Los nombres de los colores han cambiado con el tiempo, y lo que hoy consideramos un determinado color puede no haber sido así en el pasado. Por ejemplo, el color que hoy conocemos como “orange” se llamaba “yellow-red” en la antigüedad. Y el morado alguna vez fue un color reservado para la realeza, ya que se elaboraba con tintes costosos. El origen de los nombres de los colores se remonta a la antigüedad, cuando la gente solía nombrar los colores en honor a objetos de la naturaleza o fenómenos culturales. Por ejemplo, el color “red” debe su nombre a la palabra sánscrita “raktam”, que significa sangre. El color “green” proviene de la palabra inglesa antigua “grēne”, que originalmente significaba “young” o “immature”, y refleja el color de las plantas y hojas jóvenes.
Algunos de los nombres de colores más populares hoy en día son nombres de colores HTML, que se utilizan para definir colores en el diseño web. Estos nombres incluyen colores como “cornflowerblue”, “lavender”, “lemonchiffon”, “papayawhip”, “palegoldenrod” y “whitesmoke”. Los diseñadores utilizan nombres de colores para evocar ciertas emociones y estados de ánimo en sus obras, lo que puede ser una herramienta poderosa para comunicar su visión.
Algunos puntos importantes sobre los nombres de colores HTML
- Para utilizar nombres de colores HTML, debes escribir los nombres de los colores correctamente. Los nombres de colores HTML no distinguen entre mayúsculas y minúsculas, por lo que puede utilizar letras minúsculas y mayúsculas. Por ejemplo, son válidos “darkred”, “DarkRed” y “DARKRED”.
- Los nombres de colores HTML tienen una gama limitada de colores. Es posible que no cubran todos los tonos o variaciones posibles. Si necesita un color específico que no esté representado por un nombre de color HTML, es posible que necesite utilizar códigos de color HEX, RGB u otros. Puede utilizar Convertidores de color, que son herramientas en línea gratuitas que le permiten convertir colores entre diferentes códigos de color como nombres de colores HTML, RGB, HEX, HSL, HSV, HWB, LAB, CMYK, LCH, XYZ, etc.
- Los nombres de colores HTML suelen ser altamente compatibles entre los navegadores modernos. Pero es posible que algunos navegadores muy antiguos o poco utilizados solo admitan algunos nombres de colores HTML o tengan ligeras diferencias en la forma en que se interpretan.
- Vale la pena señalar que existen listas ampliadas de nombres de colores disponibles en varios marcos, bibliotecas y recursos de diseño CSS, y no forman parte del estándar HTML en sí, pero se utilizan con frecuencia. Si bien los nombres de colores extendidos no se reconocen ni se admiten universalmente en todos los navegadores y plataformas, se pueden usar en ciertos contextos donde la compatibilidad no es una preocupación.
- Para utilizar colores HTML para sus páginas web, asegúrese de que los nombres de los colores que elija sigan las pautas de accesibilidad. Utilice combinaciones de colores que proporcionen suficiente contraste para garantizar la legibilidad para los usuarios con discapacidad visual. Herramientas como Comprobadores de contraste de color pueden ayudarle a verificar que los colores elegidos cumplan con los estándares de accesibilidad recomendados.
- Los nombres de colores HTML son subjetivos y pueden tener diferentes interpretaciones o asociaciones en diferentes idiomas, culturas o contextos. Además, los colores mismos y las paletas de colores están asociados con ciertas emociones y estados de ánimo, ¡que pueden ser diferentes en diferentes culturas! Por ejemplo, el color blanco en la sociedad occidental se asocia con las bodas, la pureza y la limpieza. Sin embargo, en muchas culturas asiáticas, este color simboliza la muerte, el duelo y la humildad. Considere el significado y el contexto previstos al elegir colores para localizar sus sitios.
- Los nombres de colores HTML se pueden utilizar en varios atributos HTML que le permiten especificar un color. Veremos esto con más detalle en la siguiente sección del artículo.
Trabajar con nombres de colores HTML
Los nombres de colores HTML y CSS son algo cotidiano para quienes trabajan en desarrollo web. En HTML y XHTML, se pueden utilizar colores para texto, fondo, bordes de marco, tablas y celdas de tablas individuales. Puede configurar el color de las siguientes maneras:
- Uso del atributo
styleen línea. Puede aplicar el atributostylecon las etiquetas HTML<body>,<p>,<table>,<div>,<h1>o<h2>, etc. Recuerde que el uso de un atributostyleanula cualquier estilo establecido en la etiqueta HTML<style>o en la hoja de estilos externa. - Usando CSS interno. La opción de estilo CSS interno es popular para aplicar propiedades a páginas individuales encerrando todos los estilos en el elemento
<style>colocado en el<head>de los documentos HTML.
A continuación se muestra un ejemplo del uso de nombres de colores HTML para colorear texto, fondos y bordes. Usamos diferentes formas de especificar colores:
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 tiene el siguiente aspecto:
Para obtener más información sobre cómo cambiar el color del texto, el fondo o el borde, visite el artículo Trabajar con color HTML y el capítulo Artículos prácticos. Los artículos de este capítulo responden preguntas populares y contienen ejemplos de C# que brindan la información necesaria sobre el uso de Aspose.HTML for .NET para resolver tareas específicas.
Limitaciones
- Una de las principales limitaciones de los nombres de colores HTML es su conjunto restringido. Esto significa que es posible que no encuentre ciertos tonos o variaciones representados por nombres de colores HTML y que necesite utilizar métodos de representación de colores alternativos, como códigos HEX o RGB.
- Otra limitación es que no todos los navegadores muestran los nombres de colores HTML de manera similar. Los colores pueden tener interpretaciones ligeramente diferentes en diferentes navegadores y dispositivos. Esta falta de precisión es especialmente crítica para proyectos de diseño que requieren una combinación de colores precisa.
- Limitaciones adicionales se relacionan con el control de transparencia y la preparación del documento para la impresión. Para estos fines es necesario utilizar códigos de colores (RGBA, HSLA, CMYK, etc.), que son ideales para este tipo de tareas.
Datos curiosos
- Los colores Grey y Gray, Cyan y Aqua, Fuchsia y Magenta tienen los mismos valores HEX y RGB:
Parece que los programadores de Hewlett-Packard no podían recordar la ortografía correcta de la palabra “gray” hasta “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 el Red corresponde al código de color #ff0000. El nombre del color HTML Blue corresponde a #0000ff. Y esperamos que Green coincida con #00ff00. ¡Pero no! El nombre del color Green corresponde al #008000. Y para #00ff00 necesitas usar Lime.
- Miremos los tonos de gris. ¡No esperamos que el gris oscuro sea más claro que el gris!
Sugerencias para cambiar el nombre de los colores HTML
Se discuten cambios para tres colores, donde se propone reemplazar los nombres antiguos por otros nuevos:
Los programadores, diseñadores y usuarios continúan discutiendo los nombres de los colores, y eso está bien. Proporcionamos ejemplos de algunas de las discusiones que aún no se han reflejado en las especificaciones oficiales. Se proponen cambios para tres colores, donde se propone reemplazar los nombres antiguos por otros nuevos:
- IndianRed a ChestnutRose
- Moccasin a Peach
- NavajoWhite a OldPaper
IndianRed lleva el nombre de un famoso pigmento rojo de la India y no tiene nada que ver con los nativos americanos. El nombre “IndianRed” proviene de la laterita roja que se encuentra en la India y que está compuesta de óxidos de hierro naturales. Fue identificado por primera vez por el científico escocés Francis Buchanan-Hamilton. El primer uso registrado del rojo indio como término de color en inglés fue en 1672.
Vale la pena señalar que “IndianRed”, el nombre del color de crayón Crayola, la empresa cambió el nombre a castaño “chestnut”, probablemente debido a las discusiones en torno a este nombre.
El color Moccasin es principalmente un color de la familia de colores amarillos. Es una mezcla de color naranja y marrón. Quizás el Moccasin no tenga ningún significado especial. Es solo el nombre de un tipo de zapato. Quizás una posible objeción a ese nombre de color provenga del hecho de que es un tipo de zapato históricamente nativo americano.
NavajoWhite es un tono pastel pálido de amarillo anaranjado que se utiliza a menudo para interiores en la pintura de casas. 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 su nombre indica. Es similar a otros colores, como el melocotón, el trigo y el mocasín.
Nombres de colores en línea
La aplicación gratuita en línea Color Names busca el nombre del color por su valor de código de color. Debe ingresar códigos de color en cualquier formato, como HTML Color Name, RGB, HEX, HSL, HSV, HWB, LAB, LCH, CMYK, XYZ, OKLAB u OKLCH. Y verá una lista de nombres de colores con máxima “similarity”. La aplicación funciona para computadoras, tabletas y dispositivos móviles. Puede resultar útil para artistas y diseñadores que necesitan utilizar colores. ¡Identifica colores con nuestra aplicación de nombres de colores y úsalos o compártelos! Seguro, protegido y claro.
Nota: En la aplicación, bajo “similarity”, nos referimos a la similitud de coseno que se basa en el coseno del ángulo entre los dos vectores en un espacio de color multidimensional (por ejemplo, RGB, HSV). La similitud del 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 (sin similitud).
Conclusiones
- Los nombres de colores HTML ofrecen un enfoque conveniente para la especificación de colores en el desarrollo web. El uso de nombres de colores en muchas áreas demuestra que a muchas personas no les gusta usar códigos y números. La gente no piensa en términos #FFA500 sobre ciertos tonos, sino que piensa en analogías: ¡una naranja! Usar nombres para definir el color es más natural para las personas.
- HTML y CSS ofrecen 147 colores con nombre cuyos nombres están inspirados en la naturaleza, las emociones o el origen histórico, y el sistema RGB admite 16.777.216 colores.
- Los nombres de colores HTML tienen varias limitaciones, incluido un conjunto restringido que puede no cubrir todos los tonos o variaciones, lo que lleva a los diseñadores a utilizar códigos HEX o RGB para una representación de color más precisa.
- La sintaxis correcta, las pautas de soporte y accesibilidad y el contexto cultural son cruciales cuando se utilizan nombres de colores HTML, que se pueden aplicar al texto, fondos y bordes en el diseño web.
Ver también