Cómo cambiar el color del texto con Markdown

Con Markdown no puedes cambiar el color del texto, porque el formato no tiene ninguna sintaxis para ello. Existen alternativas que funcionan bien, pero solo si el editor que uses permite HTML, y hay plataformas importantes donde no lo permite.

Esto último es lo que más confusión genera: encuentras un método, funciona en tu editor, lo subes a GitHub y el color desaparece. Más abajo tienes una tabla con dónde funciona cada cosa y qué hacer en los sitios donde nada de esto vale.

Por qué Markdown no tiene colores

No es un olvido. Markdown se diseñó para describir la estructura de un documento, no su apariencia: qué es un encabezado, qué es una cita, qué es énfasis. Cómo se ve cada cosa lo decide después la aplicación que renderiza.

Esa separación es la razón de que el mismo archivo se vea bien en GitHub, en tu editor y convertido a PDF. Meter colores dentro del texto rompe esa idea, y por eso todas las formas de conseguirlo pasan por salirse de Markdown y usar HTML.

Cambiar el color con CSS en línea

Es el método recomendado. Se usa el atributo style de HTML con la propiedad color, y funciona en cualquier aplicación que renderice HTML dentro de Markdown.

<span style="color:blue">Este texto sera azul.</span>

Este es el resultado al renderizar:

Puedes indicar el color de cuatro formas distintas, todas válidas.

Por nombre, usando los nombres de color estándar de CSS, que son más de ciento cuarenta:

<span style="color:crimson">Texto en color crimson.</span>

Por código hexadecimal, que es la forma más precisa y la más usada:

<span style="color:#9333ea">Texto en morado.</span>

En formato RGB, indicando los tres canales de color con valores de 0 a 255:

<span style="color:rgb(6,182,212)">Texto en color cian.</span>

Y en formato HSL, que resulta más cómodo cuando quieres variar la luminosidad de un mismo tono:

<span style="color:hsl(280,70%,50%)">Texto en violeta.</span>

Usa <span> y no <p> si quieres colorear solo unas palabras dentro de un párrafo, porque <p> crea un bloque aparte y te romperá el flujo del texto.

Cambiar el color con la etiqueta font

Es el método antiguo, con la etiqueta <font> y su atributo color.

<font color="blue">Este texto sera azul.</font>

Funciona en la práctica totalidad de navegadores y editores, pero la etiqueta está obsoleta desde HTML5 y puede dejar de funcionar en cualquier momento. Si empiezas de cero, usa CSS en línea. Si te encuentras esto en un documento antiguo, funciona igual y no urge cambiarlo.

Dónde funciona el color y dónde no

Esta es la parte que ahorra tiempo. No todas las plataformas permiten HTML dentro de Markdown, y algunas lo permiten pero eliminan los estilos por seguridad.

El caso de GitHub es el más importante porque es donde más gente lo intenta. GitHub limpia los atributos style y la etiqueta font al renderizar Markdown, por seguridad. No es un error tuyo ni depende de la sintaxis: sencillamente no lo permite.

Cómo colorear texto en GitHub

Como los estilos están bloqueados, en GitHub se usan dos trucos que sí funcionan.

El primero son los bloques de código con lenguaje diff, que colorean las líneas según empiecen por un signo más o menos. Da verde y rojo, nada más, pero es fiable y se ve en cualquier tema.

```diff
+ Esta linea sale en verde
- Esta linea sale en rojo
```

El segundo son las fórmulas matemáticas, que GitHub renderiza y permiten aplicar color. Es un uso torcido de la funcionalidad, pero funciona y es el método más extendido para colorear palabras sueltas en un README.

$\color{red}{\textsf{Texto en rojo}}$

Ten en cuenta dos cosas antes de usarlo: la tipografía cambia respecto al texto normal, y el color es fijo, así que un rojo puede quedar ilegible sobre el tema oscuro. Para más recursos de GitHub, mira nuestra guía de Markdown en GitHub.

También tienes las insignias generadas como imagen, del estilo de las que aparecen al principio de casi cualquier README. Son imágenes SVG servidas por un tercero, así que el color lo pone la imagen y no el Markdown, y por eso sí se ven.

Alternativas al color

Antes de pelearte con esto, plantéate si de verdad necesitas color. En un documento técnico casi siempre hay una forma mejor de destacar algo, y además funciona en todas partes.

• Negrita y cursiva: la sintaxis estándar destaca sin depender de HTML.
• Resaltado: el doble signo igual funciona en Obsidian y en varias plataformas más.
• Bloques de aviso: los callouts son la forma correcta de marcar una advertencia, y GitHub los soporta de forma nativa.
• Emojis: un emoji al principio de la línea aporta color literal y funciona en absolutamente todas partes.
• Citas en bloque: separan visualmente un fragmento sin necesidad de estilos.
• Subrayado: puedes subrayar con HTML, aunque en la web el subrayado se confunde con un enlace.

La ventaja de todas ellas es que sobreviven a la conversión. Si mañana pasas el documento a PDF o a Word, el color en línea puede perderse y la estructura no.

Colores más usados

Para no tener que buscarlos, estos son los valores hexadecimales de los colores habituales.

Un apunte de accesibilidad: no uses solo el color para transmitir información. Si algo es importante, márcalo además con negrita o con una palabra, porque hay gente que no distingue los tonos y porque el color desaparece en cuanto el documento cambia de formato. Lo tratamos en cómo escribir Markdown accesible.

Y con esto ya hemos terminado. Espero que te haya resultado de ayuda.