Generador de tema claro y oscuro (variables CSS)

Generador de tema claro y oscuro (variables CSS): para qué sirve

Un tema oscuro bien hecho no es la inversión del claro. A partir del color principal de tu marca, el generador arma las variables CSS de los dos temas (fondo, superficie, borde, texto, texto secundario, color principal y el texto sobre él) con grises neutros o inclinados hacia el color de la marca.

Cada par de colores tiene su contraste calculado con la fórmula de WCAG y marcado como AAA, AA o insuficiente, y el color principal se ajusta para superar 4,5:1 en los dos temas. El código cambia de tema según el modo del sistema (prefers-color-scheme) y, si quieres, también con un botón con data-theme.

Cómo usar

1. Elige el color principal.
2. Revisa la vista previa y la tabla de contraste.
3. Copia las variables CSS.

Cuándo usar

• Crear el modo oscuro de un sitio.
• Armar la paleta de un proyecto nuevo.
• Verificar la accesibilidad de los colores.

Preguntas frecuentes

¿Por qué el modo oscuro no es solo invertir los colores?

Invertir deja el fondo negro puro y los colores de la marca chillones, lo que cansa la vista. Un buen tema oscuro usa un fondo gris muy oscuro, texto casi blanco y una versión más clara del color principal, para mantener el contraste sin deslumbrar.

¿Qué significan AA y AAA en el contraste?

Son niveles de las pautas de accesibilidad WCAG. AA pide un contraste de al menos 4,5:1 para texto normal; AAA, 7:1. El generador muestra la razón de cada par de colores y avisa cuando alguno queda por debajo de 4,5:1.

¿Cómo cambio de tema con un botón?

El código responde al modo del sistema (prefers-color-scheme) y también al atributo data-theme en el html. Un botón que coloque data-theme="dark" o "light" fuerza el tema elegido; la herramienta Botón de modo oscuro de este sitio genera ese botón.

¿Es gratis de verdad?

Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.

Herramientas similares