Convertidor de Modo Oscuro
Convierte tus colores de modo claro a modo oscuro con conversión inteligente por rol semántico
Convierte automáticamente una paleta de modo claro a modo oscuro con conversión inteligente por rol semántico (fondo, superficie, primario, secundario, texto). Ajusta manualmente los resultados, analiza el contraste WCAG y exporta CSS listo para usar.
Modo Claro
Modo Oscuro
Análisis de Contraste (Modo Oscuro)
Texto sobre Fondo
13.92:1
Texto sobre Superficie
12.39:1
Texto sobre Primario
2.34:1
Texto sobre Secundario
2.03:1
Primario sobre Fondo
8.02:1
Vista Previa Comparativa
Título de Ejemplo
Este es un texto de ejemplo para ver cómo se verán tus colores en ambos modos. El contraste y la legibilidad son fundamentales.
Título de Ejemplo
Este es un texto de ejemplo para ver cómo se verán tus colores en ambos modos. El contraste y la legibilidad son fundamentales.
Escala de Elevación
En modo oscuro, usa superficies más claras en lugar de sombras para indicar elevación.
Consejos para Modo Oscuro
- • Mantén un contraste adecuado (mínimo 4.5:1 para texto según WCAG AA)
- • Reduce ligeramente la saturación en modo oscuro para evitar fatiga visual
- • Usa grises oscuros (#121212) en lugar de negro puro (#000000)
- • Indica elevación con superficies más claras, no con sombras
- • Evita negro puro: crea demasiado contraste con texto blanco y fatiga visual
- • Prueba tu diseño en diferentes dispositivos y condiciones de luz
Cómo funciona
El modo oscuro no es simplemente invertir colores. Requiere ajustes cuidadosos de luminosidad, saturación y contraste para mantener legibilidad, jerarquía visual y accesibilidad WCAG.
Principios del modo oscuro
- Fondo: Usar grises oscuros (#121212), nunca negro puro (#000)
- Superficie: Elevar con fondos más claros, no con sombras
- Colores: Reducir saturación de colores brillantes un 10-20%
- Texto: Usar blanco/gris claro (#E0E0E0), no blanco puro
- Contraste: Mantener mínimo 4.5:1 para texto (WCAG AA)
🎨 Sistema de Roles Semánticos
Esta herramienta convierte cada color según su rol en la interfaz:
Background→ Fondo principal (#121212, L≈7%)Surface→ Tarjetas y superficies elevadas (#1E1E1E, L≈12%)Primary→ Color de marca: se aclara si es oscuro, se desatura si es muy vivoSecondary→ Color de acento: tratamiento similar al primarioText→ Texto: se invierte a claro, se neutraliza la saturación
📐 Sistema de Elevación (Material Design)
En modo oscuro, la elevación se indica con superficies más claras, no con sombras:
- Nivel 0:
#121212— Fondo base - Nivel 1:
#1E1E1E— Tarjetas, drawers - Nivel 2:
#232323— Modales, menús - Nivel 3:
#282828— Tooltips, snackbars - Nivel 4:
#2D2D2D— Elementos enfocados
💡 Ejemplos de uso prácticos
Caso 1: Adaptar paleta corporativa
Tu marca usa azul #2563EB sobre fondo blanco.
→ Fondo oscuro: #121212
→ Azul ajustado: #60A5FA (más claro, menos saturado para legibilidad)
Caso 2: Tarjetas elevadas
En modo claro usas sombras (box-shadow) para elevar tarjetas.
→ En modo oscuro: usa fondos más claros en lugar de sombras
→ Base: #121212 → Tarjeta: #1E1E1E → Tarjeta elevada: #2D2D2D
Caso 3: Estados de error/éxito
Rojo error #DC2626 es muy intenso en oscuro.
→ Reduce saturación: #F87171
→ Mantén el significado semántico pero reduce fatiga visual
Caso 4: Implementación CSS
Usa prefers-color-scheme y variables CSS para cambio automático:
:root { --bg: #FFFFFF; --text: #212121; }
@media (prefers-color-scheme: dark) {
:root { --bg: #121212; --text: #E0E0E0; }
}