Generador de esquemas de color para webs
Un tema claro y oscuro completo a partir del color de tu marca.
Elige el color de tu marca y obtén un esquema listo para una web o app: fondos y superficies tintados, bordes, texto y texto secundario, un color principal ajustado para seguir siendo legible y un acento a juego, para un tema claro y otro oscuro. Una vista previa muestra una tarjeta con texto y botones, y el esquema entero está listo para copiar como variables CSS, con el tema oscuro según la configuración del sistema.
Cómo crear un esquema de color para una web
- Paso 1
Elige el color de tu marca.
- Paso 2
Revisa las vistas clara y oscura.
- Paso 3
Copia las variables CSS.
Por qué usar PhotoTools
Claro y oscuro
Dos temas a juego a la vez.
Legible desde el inicio
Principal y acento con contraste de al menos 3:1.
Listo para el código
Variables CSS con modo oscuro.
Formatos compatibles
Salida
- CSS
Preguntas frecuentes
¿Por qué el color principal es algo distinto del mío?
Si tu color es demasiado claro u oscuro frente al fondo, se ajusta lo justo para llegar a un contraste de 3:1 y que los botones se vean bien.
¿Cómo uso el CSS?
Pégalo en tu hoja de estilos y usa las variables, por ejemplo background: var(--color-primary). El tema oscuro cambia según la configuración del sistema.
¿Es gratis?
Sí. Las herramientas del navegador de PhotoTools son gratis, ilimitadas y funcionan sin cuenta.
¿Se suben mis imágenes a un servidor?
No. Esta herramienta funciona por completo en tu navegador con WebAssembly. Tus imágenes nunca salen de tu dispositivo y no se guarda nada.