Herramientas de diseno en linea
Utilidades de diseno gratuitas, ejecutadas en tu navegador, para colores y paletas, degradados, compresion y conversion de imagen, ayudas CSS, SVG, tipografia y mas. Las salidas estan listas para pegar en HEX, RGB, HSL, OKLCH, CSS y SVG. Todo se ejecuta localmente - sin instalacion, sin cuenta, sin rastreo. Elige una herramienta a continuacion para empezar.
Color y paletas
Preguntas frecuentes
Son gratis las herramientas de diseno de Tool Matic?
Si. Cada herramienta de diseno de Tool Matic es gratuita, sin cuenta, sin registro y sin limite de uso. Abre cualquier herramienta y empieza a usarla al instante.
Subis o almacenais mis imagenes?
No. Las herramientas de diseno de Tool Matic que manejan archivos (compresor de imagen, convertidor, color desde imagen, optimizador SVG, generador de favicon) procesan el archivo entero en tu navegador. Los bytes nunca salen de tu dispositivo. Puedes comprobarlo abriendo las DevTools y mirando la pestana Red mientras sueltas un archivo.
Que formato de color usar en CSS - HEX, RGB, HSL o OKLCH?
Usa el que mejor te encaje. HEX es compacto y universal. RGB y RGBA anaden un canal alfa explicito. HSL trabaja con tono, saturacion y luminosidad, mas facil de ajustar a mano. OKLCH es perceptualmente uniforme: cambios numericos iguales dan cambios visuales iguales, util para paletas accesibles. El selector de color y el convertidor HEX a RGB generan todos esos formatos.
Como compruebo si mis colores cumplen el contraste WCAG?
Compara primer plano y fondo con los umbrales de contraste WCAG 2.1: 4,5:1 para texto normal, 3:1 para texto grande y controles, 7:1 para AAA. El selector de color muestra el contraste para los dos colores que elijas.
Que formato de imagen es mejor para la web - PNG, JPG, WebP o AVIF?
Para fotos, AVIF da el archivo mas pequeno con buena calidad, con WebP como respaldo solido. JPG sigue siendo valido cuando importa la compatibilidad amplia. PNG es la opcion para sin perdida o transparencia. SVG es lo mejor para logos, iconos y figuras geometricas escalables. Elige primero por contenido y luego el codec que mantenga el archivo mas pequeno con calidad aceptable.
Puedo usar estas herramientas de diseno sin conexion?
Necesitas conexion para la primera carga. Luego, las herramientas siguen funcionando porque el trabajo ocurre en tu navegador, sin idas y vueltas al servidor.
Puedo copiar las salidas directamente a mi codigo?
Si. Las salidas estan listas para pegar como HEX, RGB, HSL, OKLCH, CSS, SVG o data-URI segun la herramienta. Cada resultado tiene un boton de copia.
Son estas herramientas de codigo abierto?
Tool Matic publica su codigo para que puedas inspeccionar exactamente como funciona cada herramienta y comprobar que nada sale del navegador. La transparencia es la base de nuestro compromiso de privacidad.