Códigos de color HTML – Todo sobre HEX, RGB, RGBA, HSL y HSLA

Para obtener más información sobre cómo cambiar el color del texto, el fondo o el borde, visite 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 la biblioteca Aspose.HTML for .NET para resolver tareas específicas.

Colores HTML

Los colores HTML son los colores utilizados para mostrar páginas web. Están estrechamente vinculados a los métodos de descripción y definición de estos colores utilizando sus respectivos códigos de color. Por ejemplo, los colores HTML se pueden especificar como nombres de colores comunes en inglés o con valores HEX, tripletes RGB, valores HSL, RGBA y HSLA.

Los colores juegan un papel esencial en la formación del valor percibido del contenido web y las emociones que una persona experimenta al verlo. En HTML y XHTML, se pueden utilizar colores para texto, fondo, bordes de marco, tablas y celdas de tablas individuales.

Nombres de colores HTML

Los Nombres de colores HTML son algo cotidiano para quienes trabajan en desarrollo web. La especificación W3C de nombres de colores distingue los colores básicos y extendidos. HTML4 tiene 140 nombres de colores, 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 HTML, incluidos 17 colores básicos. El nombre del color adicional en HTML5 es naranja.

La figura ilustra 16 colores básicos con códigos HEX y RGB:

Códigos de color HTML

Los códigos de color HTML son un medio para representar un formato de color que una computadora puede leer y mostrar. Los códigos de color se utilizan en HTML y CSS para crear combinaciones de colores de diseño web. Son utilizados principalmente por diseñadores web, desarrolladores front-end, programadores e ilustradores digitales.

Colores RGB

RGB (Red, Green, Blue) es un modelo de color aditivo que describe cómo se codifica cualquier color utilizando tres colores básicos. Es la base del color que muestra la luz en pantallas de televisión, computadoras, escáneres de imágenes, proyectores de video, cámaras digitales y dispositivos móviles.

Los valores R, G y B son la intensidad (en el rango de 0 a 255), respectivamente, de los componentes rojo, verde y azul del color determinado. Es decir, un color azul brillante se puede definir como (0,0,255), rojo como (255,0,0), verde brillante – (0,255,0), negro – (0,0,0) y blanco – ( 255.255.255). RGB es un modelo de código de color popular en fotografía, televisión y gráficos por computadora. Ya que existen 256 opciones de cantidad diferentes para cada color. Entonces, puede haber 256^3 = 16,777,216 colores RGB diferentes en total. Mezclar estos tres colores le daría un código de color RGB representado, por ejemplo, así RGB(125,50,210).

Una de las formas más habituales de transmitir color es a través de sistemas visuales como diagramas o modelos gráficos, donde cada color tiene su propio conjunto individual de coordenadas. Por ejemplo, el sistema de color RGB se puede representar como un cubo con 256 puntos discretos en cada lado:

Históricamente, el modelo RGB ha sido elegido como modelo principal para el desarrollo web porque está directamente relacionado con el funcionamiento de las pantallas, que utilizan píxeles rojos, verdes y azules para mostrar los colores.

Colores hexagonales

Los códigos HEX son los códigos de color más utilizados. Los códigos HEX son números hexadecimales de tres bytes (seis variables). El número de color de seis dígitos está estructurado en tres grupos de dos dígitos que especifican la cantidad de rojo, verde y azul en el color aditivo. Cada par hexadecimal de dos dígitos puede tener un valor de 00 a FF. Esto proporciona más de 16 millones de colores posibles.

El código se expresa de la siguiente manera: #RRGGBB, donde cada uno de los valores de dos dígitos es un rango de cada uno de los tres colores (rojo, verde, azul), con el que seleccionas el valor final que representa cada color. Por ejemplo, #00FF00 se muestra en verde porque el componente verde está configurado en su valor máximo (FF) y los demás están configurados en 00.

Colores RGBA

Los valores de color RGBA(Red, Green, Blue, Alpha) son una extensión de los valores de color RGB con un canal alfa que determina la opacidad del color. Un parámetro alfa es un número entre 0,0, que significa “totalmente transparente” y 1,0, que significa “totalmente opaco”. Por ejemplo, rgba(255, 0, 0) se muestra en rojo puro, rgba(255, 0, 0, 0.5) se muestra en rojo con un 50 % de opacidad.

La figura muestra los valores RGBA del nombre de color “Amarillo-Verde” con diferente transparencia:

Para un valor RGBA, a diferencia de los valores RGB, no existe notación hexadecimal.

Colores HSL

Mucha gente considera que el código de color RGB no es intuitivo y está orientado al hardware. El modelo de color HSL (Hue, Saturation, Lightness) fue desarrollado en la década de 1970 por investigadores de gráficos por computadora para asemejarse más a cómo la visión humana percibe los atributos que producen el color. En el modelo HSL, los colores de cada tono están dispuestos en un corte radial alrededor de un eje central de colores neutros, que van desde el negro en la parte inferior hasta el blanco en la parte superior. La representación HSL reorganiza los colores para hacerlos más intuitivos que la representación RGB. A menudo se utiliza para aplicaciones de gráficos por computadora, como selectores de color y análisis de imágenes.

La figura muestra una interpretación gráfica 3D del modelo HSL (a); la imagen está tomada de commons.wikimedia.org/wiki/. La Figura (b) muestra una interpretación gráfica 2D del modelo HSL para un valor de luminosidad del 50%.

HSL es una representación del modelo de color RGB en coordenadas cilíndricas. Hue define el color básico. El tono es básicamente cualquier color de la rueda cromática; es un grado en la rueda de colores de 0 a 360. Entonces, 0 es rojo, 120 es verde, 240 es azul. La saturación es la intensidad o pureza de un color. Determina qué tan vivo será el color. El cero por ciento es gris y el 100 por ciento es un color completamente saturado. La luminosidad es la cantidad de brillo o luz en el color. La luminosidad determina cuánto tinte blanco o negro tiene el color. Por ejemplo, el 50 por ciento no tiene tinte, el cero por ciento es completamente negro y el 100 por ciento es completamente blanco.

Ejemplos de colores HSL

La siguiente tabla representa un tono. Del círculo de colores se eligió el rojo. Tono=0. El eje X de la tabla representa la saturación (100%, 75%, 50%, 25%, 0%). El eje Y representa la ligereza. El 50% es “normal”.

Colores HSLA

Los valores de color HSLA(Hue, Saturation, Lightness, Alpha) son una extensión de los valores de color HSL con un canal alfa que determina la opacidad del color. El valor de color HSLA se especifica con tono, saturación, luminosidad y alfa, donde el parámetro alfa especifica la opacidad. El parámetro alfa es un número entre 0,0, que significa “totalmente transparente” y 1,0, que significa “totalmente opaco”. Por ejemplo, hsla(0, 100%, 50%, 1) se muestra en rojo puro, hsla(0, 100%, 50%, 0,5) se muestra en rojo con un 50% de opacidad:

¿Por qué HTML no admite otros formatos de color?

HTML y CSS están diseñados para contenido web que se muestra en pantallas. Las pantallas utilizan el modelo de color RGB (rojo, verde, azul), que coincide con la forma en que los monitores reproducen el color. RGB y sus derivados (RGBA, HEX, HSL, HSLA) son intuitivos para la representación del color basada en pantalla.

HTML y CSS no admiten otros formatos de color como CMYK, HSV, HWB, Lab, Oklab, LCH, Oklch y XYZ por varias razones. Veamos algunos de ellos:

1. El modelo de color CMYK se utiliza principalmente para imprimir y muestra cómo se mezclan las tintas en el papel. No es adecuado para pantallas digitales que utilizan luz para mostrar colores.
2. Los formatos de color HSV, HWB, Lab, Oklab, LCH, Oklch y XYZ son más comunes en diseño gráfico, procesamiento de imágenes y ciencia del color. Se utilizan para tareas que requieren una manipulación precisa del color pero que son menos relevantes para el desarrollo web.
3. La compatibilidad con múltiples modelos de color requerirá que los navegadores realicen conversiones entre estos modelos y RGB para la visualización, lo que generará una sobrecarga adicional y posibles problemas de rendimiento.
4. Mantener los modelos de color simples y limitarlos a unas pocas opciones comprensibles (RGB, HEX, HSL) reduce la complejidad para los desarrolladores. Esto garantiza que la mayoría de los casos de uso se puedan manejar sin la necesidad de comprender o convertir entre diferentes modelos de color.

Aunque el CSS tradicional no admite modelos de color avanzados, CSS Color Module Level 4 y superiores introducen espacios de color complejos como lab(), lch() y oklab(). Estas innovaciones aún no son ampliamente compatibles con todos los navegadores, pero indican un movimiento hacia la compatibilidad con espacios de color adicionales a medida que crece la necesidad de un control de color más preciso.

Conclusión

Los colores HTML se pueden definir mediante un nombre, valores RGB, RGBA, HEX, HSL o HSLA y aplicarse al fondo o al texto en documentos HTML.

La siguiente figura ilustra cómo especificar un color verde azulado por nombre, valores RGB, RGBA, HEX, HSL y HSLA:

HTML y CSS están diseñados para contenido web que se muestra en pantallas. Las pantallas utilizan el modelo de color RGB (rojo, verde, azul), que se corresponde directamente con la forma en que los monitores producen color. RGB y sus derivados (RGBA, HEX, HSL, HSLA) son intuitivos para la representación del color basada en pantalla. Sin embargo, la evolución de las especificaciones CSS puede conducir gradualmente a la compatibilidad con espacios de color adicionales y un manejo del color más complejo en el futuro.

Ver también

• ¡Descubre el mundo de los nombres de colores HTML! Obtenga información sobre el uso de Nombres de colores HTML en el diseño web y cuándo elegir una alternativa.
• El artículo ¿Cómo cambiar el color del texto en HTML? muestra cómo usar la biblioteca Aspose.HTML for .NET para controlar el color del texto en un documento HTML.
• En el artículo ¿Cómo cambiar el color de fondo en HTML? encontrará ejemplos de C# que demuestran diferentes formas de establecer o cambiar el color de fondo tanto para todo el documento HTML como para sus elementos individuales.
• El artículo ¿Cómo cambiar el color del borde en HTML? analiza varias formas de establecer o cambiar el color del borde en archivos HTML utilizando la biblioteca Aspose.HTML for .NET.

Aspose.HTML ofrece un Selector de rueda de color gratuito en línea que le permite crear un conjunto de colores en el código de color HEX. Puede utilizar esta aplicación gratuita en línea para encontrar armonías de color utilizando las reglas de combinaciones de colores, pero también es fundamental experimentar con el color. Color Wheel Picker sugiere una excelente manera de experimentar con el color y crear combinaciones de colores interesantes de forma independiente. La aplicación funciona para computadoras, tabletas y dispositivos móviles. ¡Así que crea tu paleta única para cualquier proyecto!