Docs ejecutables de CSS: Color de texto

Q: ¿Cómo cambio el color de letra en HTML?

Usa la propiedad CSS color, en una hoja de estilo o en un atributo style: Blue text . La vieja etiqueta está obsoleta.

Q: ¿Cómo cambio el color de una sola palabra?

Envuelve la palabra en un y dale un color: This is red . Usa o en lugar de si además la palabra es importante o va enfatizada.

Q: ¿En CSS se usa font-color o color?

Se usa color. No existen las propiedades font-color ni text-color; el navegador las ignora.

Cómo cambiar el color del texto en HTML

Usa la propiedad CSS color. Define el color del texto de un elemento, y todos los elementos que contiene heredan el mismo color salvo que definan el suyo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text color</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .blue { color: #2563eb; }
    .green { color: rgb(22 163 74); }
  </style>
</head>
<body>
  <p class="blue">Blue text from a class in a stylesheet.</p>
  <p class="green">Green text written as rgb().</p>
  <p style="color: darkorange;">Orange text from a style attribute.</p>
  <p>Default text, then <span style="color: #dc2626;">one red word</span> in it.</p>
</body>
</html>

La propiedad se llama color, no font-color ni text-color. Esos nombres no existen en CSS y se ignoran en silencio.

Por qué no la etiqueta font

Los tutoriales viejos muestran . Esa etiqueta se eliminó de HTML hace años: los validadores la marcan como error y mezcla el estilo con el marcado, así que cambiar un color significa editar cada etiqueta a mano. Los navegadores todavía la dibujan por compatibilidad, que es la única razón por la que parece funcionar.

<!-- obsolete -->
<font color="red">Warning</font>

<!-- use this -->
<span style="color: red;">Warning</span>

<!-- or better, a class you can change in one place -->
<span class="warning">Warning</span>

Formas de escribir el color

color acepta todos los formatos de color de CSS. Los cuatro más comunes:

Formato	Ejemplo	Notas
Nombre	`color: tomato;`	148 colores con nombre, prácticos para pruebas rápidas
Hex	`color: #2563eb;`	El más común en los archivos de diseño
rgb()	`color: rgb(37 99 235);`	Rojo, verde y azul de 0 a 255
hsl()	`color: hsl(221 83% 53%);`	Tono, saturación, luminosidad: fácil de aclarar u oscurecer

Hex, rgb() y hsl() pueden llevar un canal alfa para texto semitransparente, como #2563eb80 o rgb(37 99 235 / 50%). La página de colores CSS explica todos los formatos.

Dar color a toda la página, a un título o a una sección

Define el color una vez en body, deja que la herencia haga el resto y sobrescríbelo donde haga falta:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inherited color</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #374151; }
    h1 { color: #111827; font-size: 24px; }
    .note { color: #92400e; background: #fef3c7; padding: 8px 12px; }
  </style>
</head>
<body>
  <h1>Heading in near black</h1>
  <p>Body text inherits dark gray from body.</p>
  <div class="note">
    <p>This box sets amber text, and the paragraph inside inherits it.</p>
  </div>
</body>
</html>

Un casi negro suave como #111827 o #374151 sobre blanco cansa menos la vista que el #000000 puro y se sigue leyendo como negro.

Colores de los enlaces

Los enlaces son la excepción a la herencia: el navegador les da su propio azul (y morado una vez visitados), así que un color en el padre no les llega. Defínelo en el enlace, o dile al enlace que herede:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link color</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dark { color: #16a34a; }
    .brand a { color: #7c3aed; }
    .brand a:hover { color: #5b21b6; }
    .inherit a { color: inherit; }
  </style>
</head>
<body>
  <p class="dark">Green paragraph, but <a href="#x" id="l1">this link</a> keeps the browser color.</p>
  <p class="dark brand">Green paragraph, <a href="#x" id="l2">this link</a> is set to purple.</p>
  <p class="dark inherit">Green paragraph, <a href="#x" id="l3">this link</a> inherits green.</p>
</body>
</html>

:hover, :visited y :focus-visible te permiten cambiar el color en cada estado; la página de hover los explica. Cuando un enlace tiene el mismo color que el texto que lo rodea, mantén su subrayado para que se siga reconociendo como enlace.

Que el texto se lea: el contraste

El color del texto es solo la mitad de la pareja; el fondo es la otra mitad. WCAG pide un contraste de al menos 4.5:1 para el texto normal y 3:1 para el texto grande (unos 24px, o 19px en negrita).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contrast</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    p { padding: 8px 12px; margin: 6px 0; }
    .fail { color: #9ca3af; background: #ffffff; }
    .pass { color: #4b5563; background: #ffffff; border: 1px solid #e5e7eb; }
    .dark { color: #f9fafb; background: #1f2937; }
  </style>
</head>
<body>
  <p class="fail">#9ca3af on white: about 2.5:1, too light</p>
  <p class="pass">#4b5563 on white: about 7.6:1, passes</p>
  <p class="dark">#f9fafb on #1f2937: about 14:1, passes</p>
</body>
</html>

El texto gris claro, estilo placeholder, es el fallo más común. Las herramientas para desarrolladores de Chrome y Firefox muestran la relación de contraste cuando inspeccionas un color de texto.

currentColor: reutilizar el color del texto

currentColor es una palabra clave igual al color del elemento. Los bordes, los outlines y los íconos SVG en línea pueden usarla, así que un solo cambio de color recolorea el texto y su decoración a la vez:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>currentColor</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tag {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border: 2px solid currentColor; border-radius: 999px;
    }
    .ok { color: #16a34a; }
    .warn { color: #d97706; }
  </style>
</head>
<body>
  <span class="tag ok">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Online
  </span>
  <span class="tag warn" id="warn">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Away
  </span>
</body>
</html>

Errores comunes

Escribir font-color o text-color. La propiedad es color.
Usar la etiqueta . Está obsoleta; usa CSS.
Esperar que los enlaces hereden. Define a { color: ... } o color: inherit.
El color como única señal. "Los campos en rojo son obligatorios" no le sirve a quien no distingue el rojo. Agrega texto o un ícono.
Texto gris de poco contraste. Comprueba la relación: 4.5:1 o más para el texto del cuerpo.
Usar opacity para aclarar el texto. Desvanece todo el elemento, incluidos el fondo y los hijos. Usa un color más claro o un color con alfa.

Preguntas frecuentes

¿Cómo cambio el color de letra en HTML?

Usa la propiedad CSS color, en una hoja de estilo o en un atributo style: Blue text. La vieja etiqueta  está obsoleta.

¿La etiqueta sigue siendo compatible?

Los navegadores todavía la dibujan para que las páginas muy antiguas sigan funcionando, pero está obsoleta en HTML y los validadores la marcan como error. Usa color de CSS.

¿Cómo cambio el color de una sola palabra?

Envuelve la palabra en un  y dale un color: This is red. Usa  o  en lugar de  si además la palabra es importante o va enfatizada.

¿Por qué mi enlace no cambia de color cuando defino color en el padre?

Los enlaces tienen su propio color, que viene de la hoja de estilo del navegador, así que no heredan el del padre. Defínelo en el propio enlace (a { color: #2563eb; }) o usa a { color: inherit; } para que siga al padre.

¿En CSS se usa font-color o color?

Se usa color. No existen las propiedades font-color ni text-color; el navegador las ignora.

Conceptos relacionados