Helpful resources ▼
  Download   Pricing   Buy

Trabajar con color HTML – Texto, fondo y bordes

Los colores HTML se aplican con propiedades CSS como color, background-color y border-color. Puede usar nombres de color, HEX, RGB, RGBA, HSL o HSLA según necesite legibilidad, precisión o transparencia.

Cómo usar colores HTML

El diseño no es una función central de HTML, por lo que no existe una etiqueta especial de color HTML. Sin embargo, puede cambiar el color de cualquier texto de las siguientes formas:

  1. Usar el atributo style en línea. Agregar color a una página web forma parte del estilo CSS en línea. Para establecer el color del texto o del fondo en HTML, use el atributo style. Puede aplicar el atributo style a elementos HTML como <body>, <p>, <table>, <div>, <h1> o <h2>. Tenga en cuenta que un atributo style sobrescribe los estilos coincidentes definidos en la etiqueta HTML <style> o en una hoja de estilos externa.

  2. Usar CSS interno. El estilo CSS interno resulta útil para aplicar propiedades a páginas individuales colocando los estilos en el elemento <style> dentro del <head> de un documento HTML.

  3. Usar valores de color. Los sistemas de color web tradicionales, como HEX, RGB, RGBA, HSL y HSLA, están optimizados para pantallas digitales y se usan ampliamente en HTML y CSS. CSS Color Module Level 4 también define funciones de color avanzadas, como lab(), lch(), oklab(), oklch() y color(), pero la compatibilidad puede variar según el navegador y el entorno de renderizado.

La siguiente tabla relaciona tareas comunes de color HTML con las propiedades CSS usadas en los ejemplos:

Tarea de color HTMLPropiedad CSSNotas
Cambiar el color del textocolorEstablece el color de primer plano del texto y de su decoración.
Cambiar el color de fondo de un elementobackground-colorEstablece el fondo detrás del contenido y el relleno de un elemento.
Cambiar el fondo de toda la páginabackground-color en <body>Aplica el color de fondo al cuerpo del documento.
Cambiar el color del bordeborder-color con border-styleborder-color solo es visible cuando se define un estilo de borde, como solid.

Cómo cambiar el color del texto en HTML

Puede usar el atributo style en línea o el elemento <style> para cambiar el color del texto y establecer el valor con la propiedad color. La propiedad color define el color de primer plano del texto y de la decoración del texto de un elemento. La propiedad color acepta nombres de colores HTML, RGB, RGBA, HEX, HSL o HSLA.

Usar nombres de color

El nombre de color representa un color HTML específico. El conjunto estandarizado de colores con nombre suele describirse como 147 colores con nombre HTML/CSS, y puede usar esos nombres en sus elementos. Por ejemplo, puede colorear texto con el atributo style en línea como se muestra a continuación:

1<html>
2	<body>
3		<h2 style="color:DarkCyan;">How to set text color using HTML color names?</h2>
4		<h3 style="color:DarkRed;">Add a style attribute to the text element you want to colorize and use the color name to specify the color.</h3>
5        <h4 style="color:DarkBlue;">There are over 140 named colors to choose from that you can use.</h4>
6	</body>
7</html>

El mismo resultado de coloración del texto puede lograrse con CSS interno, como se muestra en el siguiente ejemplo:

 1<html>
 2	<head>
 3		<style>
 4			h2 {
 5				color:DarkCyan;
 6			}
 7			h3 {
 8				color:DarkRed;
 9			}
10			h4 {
11				color:DarkBlue;
12			}
13		</style>
14	</head>
15	<body>
16		<h2>How to set text color using HTML color names?</h2>
17		<h3>Add a style attribute to the text element you want to colorize and use the color name to specify the color.</h3>
18		<h4>There are over 140 named colors to choose from that you can use.</h4>
19	</body>
20</html>

El código HTML renderizado se ve así:

Texto HTML renderizado con colores definidos por nombre

Para obtener más información sobre colores con nombre, consulte Nombres de colores HTML. Para cambiar mediante programación el color del texto, el fondo o el borde en un archivo HTML, consulte el capítulo Artículos prácticos y el artículo Cambiar el color del texto HTML en C#.

Usar códigos de color RGB, RGBA o HEX

Para colorear texto HTML, puede usar RGB o HEX, que son dos de los códigos de color más comunes. Un valor RGB (red, green, blue) define un color HTML mezclando valores de rojo, verde y azul. La sintaxis de un código de color RGB es rgb(red, green, blue), donde cada parámetro define la intensidad del color con un valor de 0 a 255.

Los valores de color RGBA (red, green, blue, alpha) son una extensión de los valores RGB con un canal alfa que determina la opacidad del color. El parámetro alfa es un número entre 0.0, que significa “totalmente transparente”, y 1.0, que significa “totalmente opaco”.

Un valor de color HEX funciona casi igual que un valor RGB, pero se escribe de otra manera y usa la sintaxis #RRGGBB, donde RR (red), GG (green) y BB (blue) son valores hexadecimales entre 00 y ff. Si desea obtener más información sobre códigos RGB, RGBA y HEX, consulte el artículo Códigos de color HTML.

Usar códigos de color RGB o HEX es una de las formas más comunes de agregar color a las páginas web. Es necesario añadir un atributo style al elemento de texto que desea colorear. En el siguiente ejemplo, usamos los elementos <h2>, <h3> y <h4> para aplicar el atributo style en línea y la propiedad color con códigos RGB, RGBA y HEX:

1<html>
2	<body>
3		<h2 style="color:rgb(50,150,200);">How to use Text Color?</h2>
4		<h3 style="color:rgba(220,30,100,1);"> 1. Add a style attribute to the text element you want to colorize or use internal CSS.</h3>
5		<h4 style="color:#1A8D7E"> 2. Specify the color using RGB, RGBA or HEX code.</h4>
6	</body>
7</html>

El mismo resultado se obtiene usando CSS interno, como se muestra en el siguiente ejemplo:

 1<html>
 2	<head>
 3		<style>
 4			h2 {
 5				color:rgb(50,150,200);
 6			}
 7			h3 {
 8				color:rgba(220,30,100,1);
 9			}
10			h4 {
11				color:#1A8D7E;
12			}
13		</style>
14	</head>
15	<body>
16		<h2>How to use Text Color?</h2>
17		<h3>1. Add a style attribute to the text element you want to colorize or use internal CSS.</h3>
18		<h4>2. Specify the color using RGB, RGBA or HEX code.</h4>
19	</body>
20</html>

El código HTML renderizado es el siguiente:

Texto HTML renderizado con códigos de color RGB, RGBA y HEX

Usar códigos de color HSL o HSLA

HSL (hue, saturation, lightness) es una representación del modelo de color RGB en coordenadas cilíndricas. Hue define el color básico y lo mide en grados de 0 a 360 en la rueda de color RGB. La saturación es la intensidad o pureza de un color y se define en porcentajes de 0 (blanco y negro) a 100 (color vivo). La luminosidad es la cantidad de brillo o luz del color. Se define en porcentajes de 0 (negro) a 100 (blanco).

Los valores de color HSLA (hue, saturation, lightness, alpha) son una extensión de los valores HSL con un canal alfa que determina la opacidad del color. El valor HSLA se especifica con tono, saturación, luminosidad y alfa, donde el parámetro alfa define la opacidad. El parámetro alfa es un número entre 0.0, que significa “totalmente transparente”, y 1.0, que significa “totalmente opaco”.

Con el mismo atributo style usado antes, sustituya el código RGB/RGBA/HEX o el nombre de color por un valor HSL o HSLA en la propiedad color:

1<html>
2	<body>
3		<h2 style="color:hsl(200,100%,40%);">HSL and HSLA color codes</h2>
4		<p style="color:hsla(200,100%,40%,0.9); font-size:18px;">HSL(hue, saturation, lightness) is a representation of the RGB color model in cylindrical coordinates.</p>
5		<p style="color:hsla(200,100%,40%,0.6); font-size:18px;">HSLA color values are an extension of HSL color values with an alpha channel that determines the opacity of the color.</p>
6	</body>
7</html>

Como en el ejemplo anterior, también puede usar CSS interno (elemento <style>) y sustituir el código RGB/RGBA/HEX o el nombre de color por un valor HSL o HSLA en los selectores CSS.

El código HTML renderizado se ve así:

Texto HTML renderizado con códigos de color HSL y HSLA

Resumen del color del texto

  1. Para cambiar el color del texto, puede usar el atributo style en línea o CSS interno.
  2. Para especificar el color deseado, puede usar nombres de colores HTML o códigos de color RGB, RGBA, HEX, HSL o HSLA.

Históricamente, el modelo RGB se ha elegido como modelo principal para el desarrollo web porque está directamente relacionado con el funcionamiento de las pantallas, que usan píxeles rojos, verdes y azules para mostrar colores. HTML y CSS buscan un modelo simple y coherente para definir colores que todos los navegadores y dispositivos puedan admitir. RGB y sus derivados (HEX, RGBA, HSL, HSLA) son intuitivos y altamente compatibles con pantallas digitales.

Cómo cambiar el color de fondo

Color de fondo para un elemento HTML específico

Puede usar el atributo style para especificar el color de fondo de un elemento HTML y establecer el valor con la propiedad background-color. La propiedad background-color acepta nombres de color, RGB, RGBA, HEX, HSL o HSLA. Aquí se muestra cómo establecer el mismo color, “YellowGreen”, con distintos formatos de color y diferentes grados de transparencia. En otros casos, suele ser mejor usar CSS interno para definir un único color para todos los elementos de un tipo determinado.

Determine para qué elemento desea cambiar el color de fondo. Si es un párrafo, busque la etiqueta de apertura <p>. También puede ser una etiqueta <h1>…<h6>, <div> o <table>. En este ejemplo, agregamos un color de fondo a los elementos <h2>:

 1<html>
 2	<body>
 3		<p>The color name is "YellowGreen":</p>
 4		<h2 style="background-color:rgb(154, 205, 50);">rgb(154, 205, 50)</h2>
 5		<h2 style="background-color:#9ACD32;">#9ACD32</h2>
 6		<h2 style="background-color:hsl(80, 61%, 50%);">hsl(80, 61%, 50%)</h2>
 7
 8		<p>RGBA values of name "YellowGreen" color, with different transparency:</p>
 9		<h2 style="background-color:rgba(154, 205, 50, 0.2);">rgba(154, 205, 50, 0.2)</h2>
10		<h2 style="background-color:rgba(154, 205, 50, 0.5);">rgba(154, 205, 50, 0.5)</h2>
11		<h2 style="background-color:rgba(154, 205, 50, 0.8);">rgba(154, 205, 50, 0.8)</h2>
12
13		<p>HSLA values of name "YellowGreen" color, with different transparency:</p>
14		<h2 style="background-color:hsla(80, 61%, 50%, 0.2);">hsla(80, 61%, 50%, 0.2)</h2>
15		<h2 style="background-color:hsla(80, 61%, 50%, 0.5);">hsla(80, 61%, 50%, 0.5)</h2>
16		<h2 style="background-color:hsla(80, 61%, 50%, 0.8);">hsla(80, 61%, 50%, 0.8)</h2>
17	</body>
18</html>

El código HTML renderizado se ve así:

Fondos HTML renderizados con valores HEX, RGB, RGBA, HSL y HSLA

Para asegurarse de que los colores elegidos proporcionen suficiente contraste y cumplan estándares de accesibilidad, pruebe las combinaciones de color antes de usarlas. Obtenga más información sobre accesibilidad del color y relaciones de contraste en Accesibilidad del contraste de color.

Para probar rápidamente una página web en busca de problemas de accesibilidad de contraste de color relacionados con WCAG, use las herramientas gratuitas en línea de Aspose.HTML Contrast Checker y Color Contrast Accessibility.

Color de fondo para toda la página web

Es importante tener en cuenta que, en el ejemplo anterior, la propiedad background-color aplica un color al fondo del texto, pero no a todo el documento. Si desea cambiar el color HTML de toda la página, use la propiedad background-color del atributo style en la etiqueta de apertura de la sección <body>:

 1<html>
 2	<body style="background-color:#e0e0e0">
 3		<h2 style="background-color:YellowGreen;">YellowGreen</h2>
 4		<h2 style="background-color:rgb(154, 205, 50);">rgb(154, 205, 50)</h2>
 5		<h2 style="background-color:rgba(154, 205, 50, 1.0);">rgba(154, 205, 50, 1.0)</h2>
 6		<h2 style="background-color:#9ACD32;">#9ACD32</h2>
 7		<h2 style="background-color:hsl(80, 61%, 50%);">hsl(80, 61%, 50%)</h2>
 8		<h2 style="background-color:hsla(80, 61%, 50%, 1.0);">hsla(80, 61%, 50%, 1.0)</h2>
 9	</body>
10</html>

La imagen renderiza el código HTML para establecer el color de fondo del texto (el nombre de color YellowGreen se especifica en distintos códigos de color) y de toda la página web.

Color de fondo HTML renderizado para bloques de texto y toda la página web

Otro ejemplo para colorear el fondo de toda una página web consiste en usar el atributo style con la propiedad background-color en la etiqueta de apertura de la sección <body>:

1<html>
2	<body style="background-color:#ffe0e0;">
3		<h2>How to set Background Color for the whole web page?</h2>
4		<p>Add the style attribute to the body section and apply the background-color property to specify a color using color name, RGB, HEX or HSL code.</p>
5	</body>
6</html>

También puede usar CSS interno para establecer el color de fondo de toda la página:

 1<html>
 2	<head>
 3		<style>
 4			body {
 5				background-color:#ffe0e0
 6			}
 7		</style>
 8	</head>
 9	<body>
10		<h2>How to set Background Color for the whole web page?</h2>
11		<p>Add the style attribute to the body section and apply the background-color property to specify a color using color name, RGB, HEX or HSL code.</p>
12	</body>
13</html>

Página HTML renderizada con color de fondo aplicado al elemento body

Color del borde

Puede usar el atributo style con las propiedades border-style y border-color para especificar el color del borde de los elementos de texto. La propiedad CSS border-color define el color de los cuatro bordes de un elemento. La propiedad border-color solo funciona cuando antes se define la propiedad border-style, que se usa para establecer los bordes. Esta propiedad no funciona por sí sola. Si no se establece, hereda el color del elemento. La propiedad border-color acepta nombres de color, RGB, RGBA, HEX, HSL o HSLA.

1<html>
2	<body>
3		<p> The border-color property only works when the border-style property is defined first, which is used to set the borders.</p>
4		<h2 style="color:rgb(50,150,200); border-style:solid; border-color:rgb(220,30,100);">How to define border color?</h2>
5		<p> If the border-style property is defined and the border-color property is not set, the border inherits the element's color.</p>
6		<h2 style="color:rgb(50,150,200); border-style:solid;">How to define border color?</h2>
7	</body>
8</html>

Texto HTML renderizado con color de borde CSS aplicado

Funciones modernas de color CSS

CSS moderno introduce nuevas formas potentes de definir y manipular colores, mucho más allá de los formatos tradicionales HEX, RGB y HSL. Estas funciones forman parte de CSS Color Module Level 4 y de especificaciones posteriores.

Nuevos espacios de color

CSS moderno define espacios de color adicionales que permiten definiciones de color más precisas y perceptualmente uniformes:

Mezcla y ajustes de color

Ahora puede mezclar y ajustar colores directamente en CSS:

Compatibilidad con navegadores

Como la compatibilidad con funciones de color recientes puede variar según el navegador y el entorno de renderizado, los desarrolladores deben proporcionar un color de reserva simple antes de un valor avanzado. Así, los usuarios de entornos antiguos siguen viendo un color aceptable. En el siguiente ejemplo, primero se usa #ff6600, y los navegadores compatibles con CSS Color Level 4 pueden usar el valor posterior oklch():

1color: #ff6600;
2color: oklch(70% 0.18 40);

FAQ

¿Cuál es la forma más rápida de cambiar el color del texto en HTML?

Para cambiar el color del texto, use el atributo style con la propiedad color:

1<p style="color:red;">Text</p>

Consulte los ejemplos anteriores para ver alternativas con RGB, HEX y HSL.

¿Cuál es la diferencia entre RGB y HEX?

RGB usa valores decimales de 0 a 255 para cada canal de color, como rgb(255, 0, 0) para rojo. HEX usa notación en base 16, como #FF0000 para el mismo color. Ambos representan los mismos colores, pero HEX es más compacto, mientras que RGB resulta más fácil de calcular o ajustar en código.

¿Qué formato de color HTML es mejor?

Para la mayoría de los diseños estáticos, HEX es la opción más común y concisa. Use RGB o RGBA cuando necesite valores por canal o transparencia. Use HSL o HSLA cuando sea más fácil ajustar tono, saturación o luminosidad que editar canales RGB.

¿Qué son los colores seguros para la web?

Los colores seguros para la web son un conjunto histórico de 216 colores que usaban valores HEX con combinaciones de 00, 33, 66, 99, CC y FF. Las pantallas modernas admiten millones de colores, por lo que los colores seguros para la web son menos importantes hoy, aunque el término todavía aparece en materiales antiguos de diseño web.

¿Puedo usar colores transparentes en HTML?

Sí. Use formatos de color RGBA o HSLA con canal alfa. El valor alfa va de 0.0, totalmente transparente, a 1.0, totalmente opaco:

1<div style="background-color:rgba(255, 0, 0, 0.5);">50% transparent red</div>
2<div style="background-color:hsla(0, 100%, 50%, 0.3);">30% transparent red</div>

¿Por qué no se muestra el color de mi borde?

La propiedad border-color solo tiene efecto visible cuando se define un estilo de borde:

1<!-- Incorrecto: no aparece ningún borde -->
2<div style="border-color:red;">Text</div>
3
4<!-- Correcto: el borde aparece -->
5<div style="border-style:solid; border-color:red;">Text</div>

Si no especifica border-color, el borde hereda el color del texto del elemento.

¿Cuál es la diferencia entre `color` y `background-color`?

La propiedad color establece el color de primer plano del texto y de su decoración. La propiedad background-color cambia el color de fondo detrás del contenido y el relleno de un elemento.

¿Cómo elijo colores que funcionen bien juntos?

Use principios comunes de armonía del color, como colores complementarios, análogos o triádicos. Un selector de rueda de color puede ayudarle a probar combinaciones antes de aplicarlas a textos, fondos y bordes.

Artículos relacionados

Añadir imagen a HTML Selectores CSS