Generador de paleta para modo oscuro
Genere una paleta completa (fondos, superficies, textos, acento, estados) para una interfaz en modo oscuro coherente, a partir de un simple color de acento. El cálculo de los tonos se realiza íntegramente en su navegador.
Cómo funciona
Una buena interfaz oscura no se limita a invertir el negro y el blanco: los fondos deben mantener un ligero matiz y no ser nunca completamente negros, para evitar un contraste demasiado duro, y el acento debe ser lo bastante luminoso para seguir siendo legible sobre un fondo oscuro. Esta herramienta calcula esos matices automáticamente a partir del tono de su color de acento, en HSL, para producir un conjunto de colores coherente, listo para pegar en su hoja de estilos en forma de variables CSS.
¿Por qué evitar un fondo totalmente negro (#000000) en modo oscuro?
Un negro puro combinado con texto blanco puro crea un contraste extremo que fatiga la vista y provoca un efecto de halo (vibración visual) en ciertas pantallas OLED. Las interfaces oscuras profesionales (macOS, Material Design) utilizan más bien grises muy oscuros con un ligero matiz, que es lo que reproduce esta paleta.
¿También hay que adaptar el color de acento al modo oscuro?
Sí: un color de acento que funciona bien sobre fondo claro puede parecer apagado o demasiado oscuro sobre fondo negro. Esta herramienta aclara ligeramente el acento proporcionado para que conserve un buen contraste y se vea bien sobre los fondos oscuros generados.
Ningún color ni preferencia se transmite a un servidor: todos los cálculos colorimétricos se ejecutan localmente, en su navegador.