Cómo elegir colores para modo oscuro: guía práctica de dark mode

1. Por qué el negro puro no es el mejor fondo en dark mode

La primera decisión en dark mode es el color de fondo, y la respuesta intuitiva de usar negro puro (#000000) no suele ser la más acertada. El negro absoluto sobre una pantalla OLED genera un contraste tan extremo con el texto blanco que puede resultar fatiga visual en lecturas largas.

Las interfaces de dark mode más cuidadas usan fondos que son casi negros pero no completamente: tonos en el rango de #0a0a0a a #1e1e1e. Este pequeño ajuste reduce la tensión visual del contraste máximo y permite además definir jerarquía usando distintos niveles de gris oscuro para capas, tarjetas y elementos superpuestos.

Una estructura de fondos que funciona bien en dark mode:

• Fondo base: #121212 o similar — el tono más oscuro, para el fondo general de la página.
• Fondo de superficie: #1e1e1e o #242424 — para tarjetas, paneles y elementos elevados.
• Fondo de superficie alta: #2c2c2c o #303030 — para menús desplegables, modales y tooltips.

Esta jerarquía de tres niveles de oscuro crea profundidad visual sin necesidad de sombras agresivas.

2. El texto en dark mode: no uses blanco puro

Del mismo modo que el negro puro es demasiado extremo como fondo, el blanco puro (#ffffff) sobre fondo oscuro genera un contraste muy alto que puede resultar agresivo. La recomendación habitual es usar un blanco ligeramente rebajado: #e8e8e8 o #f0f0f0 para texto principal.

Para texto secundario (subtítulos, metadatos, descripciones cortas) puedes usar grises más claros sobre el fondo oscuro: #a0a0a0 o #8a8a8a dan buena jerarquía sin sacrificar legibilidad.

Siempre verifica el ratio de contraste de tus combinaciones de texto y fondo en dark mode con el Test de contraste de Color;Code. El mínimo recomendado de 4,5:1 aplica igual en modo oscuro que en modo claro.

3. Los colores de acento en dark mode

Los colores de acento (botones, enlaces, estados activos) necesitan ajustarse en dark mode porque su comportamiento sobre fondos oscuros es diferente al que tienen sobre fondos claros. Un azul que funciona perfectamente como botón sobre fondo blanco puede verse apagado o demasiado oscuro sobre un fondo casi negro.

La solución habitual es usar versiones más claras y más luminosas de los colores de acento en dark mode. Si tu color de acento en modo claro es hsl(214, 80%, 45%), en dark mode podrías subirlo a hsl(214, 80%, 65%) para que siga teniendo presencia visual sobre el fondo oscuro.

En HSL este ajuste es muy sencillo: mantienes el mismo matiz y saturación y solo subes la luminosidad. El Convertidor de Color;Code te permite ver los valores HSL de cualquier color y calcular la variante más luminosa para dark mode.

4. Cómo implementar dark mode con variables CSS

La forma más limpia de implementar dark mode en CSS es con custom properties (variables CSS) y la media query prefers-color-scheme. Defines todas las variables de color una vez para modo claro y las redefinces para modo oscuro:

:root {
  --bg-base: #ffffff;
  --bg-surface: #f5f5f5;
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --accent: hsl(214, 80%, 45%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-base: #121212;
    --bg-surface: #1e1e1e;
    --text-primary: #f0f0f0;
    --text-secondary: #a0a0a0;
    --accent: hsl(214, 80%, 65%);
  }
}

Con esta estructura, cualquier elemento que use las variables se adapta automáticamente al modo del sistema del usuario sin necesidad de clases adicionales ni JavaScript.

5. Colores que funcionan especialmente bien en dark mode

Algunos colores y combinaciones que producen resultados especialmente buenos en interfaces oscuras:

• Azules eléctricos y cianes: destacan con mucha fuerza sobre fondos oscuros y mantienen la asociación con tecnología y modernidad.
• Verdes saturados: funcionan muy bien como colores de éxito o confirmación en dark mode, con más presencia que en modo claro.
• Morados y violetas: son de los colores que mejor se comportan en dark mode porque su naturaleza oscura encaja naturalmente con fondos oscuros.
• Amarillos y dorados: usados con moderación como acentos, crean un contraste muy elegante sobre fondos casi negros.

Los colores que más problemas dan en dark mode son los pasteles claros (pierden presencia y se confunden con el texto) y los naranjas muy saturados (pueden resultar agresivos sobre fondo oscuro).

6. Errores habituales en el diseño de dark mode

• Invertir simplemente los colores del modo claro. Negro donde había blanco y blanco donde había negro raramente produce un resultado bueno porque las relaciones de contraste y jerarquía cambian de formas inesperadas.
• Olvidar las imágenes y los iconos. Una imagen pensada para fondo claro puede resultar muy oscura en dark mode. Considera usar imágenes con transparencia o versiones alternativas para cada modo.
• Usar sombras negras sobre fondos oscuros. Las sombras no funcionan en dark mode porque no hay contraste entre el negro de la sombra y el fondo oscuro. La alternativa es usar capas de color ligeramente más claro para crear elevación.
• No probar el contraste en ambos modos. Un diseño puede cumplir los ratios WCAG en modo claro y fallar en dark mode. Prueba siempre las dos versiones con el Test de contraste.

Qué hacer ahora

Si quieres añadir dark mode a tu web o mejorar el que ya tienes:

1. Define tu paleta de modo oscuro usando los rangos de tono recomendados en esta guía: fondo base alrededor de #121212, texto principal alrededor de #f0f0f0.
2. Ajusta tus colores de acento subiendo la luminosidad en HSL con el Convertidor.
3. Verifica el contraste de todas las combinaciones con el Test de contraste — hazlo tanto para el modo claro como para el oscuro.
4. Implementa con variables CSS y prefers-color-scheme para que el cambio sea automático según las preferencias del usuario.

Sigue aprendiendo sobre color y diseño web en las guías de Color;Code.