Invertir los colores del modo claro y llamarlo «dark mode» es el error más común que vemos en Colorvivo cuando un cliente pide activar el modo oscuro. El resultado suele ser negro puro contra blanco puro, colores de marca que chirrían y una legibilidad peor que la versión original. Construir la paleta bien, desde cero, es lo que marca la diferencia entre un dark mode que se usa y uno que la gente desactiva a los cinco minutos.
Si buscas la checklist de qué revisar justo antes de publicar tu modo oscuro, la tenemos aparte en accesibilidad en dark mode: qué revisar antes de activarlo. Aquí nos centramos en el paso anterior: cómo diseñar la paleta desde el principio.
Por qué la gente activa el modo oscuro
Antes de tocar un solo color conviene tener claro quién lo va a usar y por qué. Hay quien lo activa por comodidad visual en entornos con poca luz, porque el fondo oscuro reduce el deslumbramiento; quien simplemente lo prefiere estéticamente; quien busca ahorrar batería en pantallas OLED, donde el negro apaga píxeles de verdad; y quien tiene fotofobia o algún tipo de dislexia y encuentra el dark mode más cómodo de leer. Ninguna de estas razones justifica invertir los colores sin más, porque cada una exige cosas distintas de la paleta.
Empieza por el fondo, y evita el negro puro
El #000000 como fondo genera demasiado contraste con el texto claro y cansa la vista en lecturas largas. Un gris muy oscuro o un tono ligeramente azulado funciona mejor: es menos agresivo y deja más margen para que los colores secundarios respiren encima sin quemar.
Redefine la jerarquía, no la copies del modo claro
En dark mode, las sombras dejan de funcionar como recurso para marcar jerarquía, así que hay que apoyarse en tamaño, color secundario, tipografía y espaciado. Da tonos distintos a encabezados, enlaces y botones, pero siempre midiendo el contraste, que debe mantenerse como mínimo en un ratio de 4.5:1 según las WCAG. Los grises muy claros sobre negro tienden a verse difusos, así que conviene comprobarlo con una herramienta de contraste antes de dar la paleta por buena.
Ajusta la saturación de los colores vivos
Un rojo o un amarillo que funcionan perfectamente sobre fondo blanco pueden resultar demasiado intensos sobre fondo oscuro, casi vibrantes de forma molesta. Bajar un poco la saturación y el brillo suele resolverlo, y conviene probar cómo quedan los estados hover, active y disabled de los botones, que a menudo se diseñan solo pensando en modo claro.
Cómo montarlo técnicamente
Define los colores base como variables CSS (custom properties): así cambias el esquema completo del sitio con una clase o una media query, sin tocar cada componente. La media query @media (prefers-color-scheme: dark) detecta automáticamente la preferencia del sistema operativo del usuario, y conviene respetarla en vez de forzar un único modo. Revisa también los logos e iconos, que a veces pierden visibilidad al cambiar de fondo, y no te olvides de formularios, modales, tablas y selects, que suelen quedarse con estilos del modo claro si nadie los revisa expresamente.
Quién lo hace bien
Slack, Notion, GitHub o YouTube comparten un patrón: colores suaves y consistentes, respeto por la identidad visual de marca, contraste alto sin forzar la vista, y la opción de ajustarlo automática o manualmente según lo que prefiera cada usuario. Merece la pena abrir sus interfaces y mirar cómo resuelven los detalles antes de dar por cerrada tu propia paleta.
La paleta es el primer paso, no el último
Una vez definida la paleta con estos criterios, toca comprobarla con herramientas de contraste antes de publicar, algo que cubrimos con detalle en nuestra guía de herramientas para comprobar el contraste de color. Un dark mode bien construido no oscurece el diseño, lo replantea desde otro punto de partida, y eso solo se consigue dedicando tiempo a la paleta antes de escribir la primera línea de CSS.
