Cómo cambiar el color del texto en HTML y CSS

CSS controla el color del texto con la propiedad color. El patrón más claro es aplicar el color a un selector semántico y dejar que los elementos hijos lo hereden.

body {
  color: #1f2937;
}

.notice {
  color: rgb(185 28 28);
}

Hex y RGB son fiables para valores sRGB exactos. HSL resulta práctico cuando un sistema de diseño ajusta el tono, la saturación o la luminosidad. Convierte un token RGB existente con el conversor de RGB a Hex y mantén un único formato canónico en tu código.

Cuando alguien busca «color de texto en HTML», suele referirse a una de tres tareas: definir la propiedad CSS color, convertir un valor RGB de marca en un código Hex listo para CSS o comprobar si el color de texto elegido sigue siendo legible sobre el fondo final.

Usa propiedades personalizadas para crear un sistema

Repetir valores literales dificulta los cambios globales. Nombra los colores por su función, no por su aspecto:

:root {
  --text-primary: #111827;
  --text-muted: #4b5563;
  --text-danger: #b91c1c;
}

.error-message { color: var(--text-danger); }

Los nombres por función sobreviven mejor a un rediseño que nombres como dark-gray, y además simplifican los ajustes para el modo oscuro.

Mantén el texto legible

El color por sí solo no debe transmitir información importante, y cada combinación de texto y fondo necesita un contraste suficiente. WCAG AA exige al menos 4.5:1 para texto normal y 3:1 para texto grande. Comprueba la combinación real en el verificador de contraste de color en lugar de juzgarla a ojo.

Revisa todos los estados de texto que aparecen en la interfaz: texto de párrafo, etiquetas, texto de ayuda, texto deshabilitado, enlaces, hover, foco y mensajes de error. Un color de enlace que cumple sobre blanco puede no cumplir sobre una tarjeta tintada o una superficie en modo oscuro.

Para un color de texto firme y sereno, explora los valores del azul marino. Para errores y etiquetas urgentes, compara la escala de tonos rojos y elige un tono que cumpla sobre la superficie prevista.

Después, aprende cómo interactúan tus colores de texto con los colores de fondo en CSS.