Design tools
10 browser-based design and accessibility tools — check color contrast, simulate color blindness, preview font pairs, generate CSS code, optimize SVG, create favicons, resize icons, and more. No signup, no cloud, nothing leaves your device.
Design Tools
-
Simulador de daltonismo
Sube una imagen y observa cómo se ve con deuteranopia, protanopia o tritanopia — 100% en navegador.
Abrir herramienta →
-
Verificador de contraste de color
Comprueba ratios de contraste WCAG 2.1 entre texto y fondo — pasa/falla AA/AAA al instante.
Abrir herramienta →
-
Vista previa de pares de fuentes
Elige fuentes de titulares y cuerpo de Google Fonts y previsualízalas con texto de ejemplo en vivo.
Abrir herramienta →
-
Generador de sombras CSS
Construye box-shadow y text-shadow visualmente con sliders en vivo — copia el código con un clic.
Abrir herramienta →
-
Generador de CSS clip-path
Crea polígonos CSS clip-path con editor de puntos interactivo y salida instantánea de código.
Abrir herramienta →
-
Optimizador de SVG
Pega o sube SVG y elimina metadatos, comentarios y espacios para reducir el tamaño del archivo.
Abrir herramienta →
-
Generador de favicon desde emoji
Convierte cualquier emoji en PNG para favicon a 16, 32, 48, 64, 128 y 192px — descarga instantánea.
Abrir herramienta →
-
Redimensionador de iconos
Sube un icono PNG o SVG y descárgalo en varios tamaños — ideal para iconos de app y favicons.
Abrir herramienta →
-
Imagen a set de iconos
Convierte una imagen a un set completo de iconos de app iOS y Android — todos los tamaños.
Abrir herramienta →
-
Banner de ASCII art
Convierte texto en banners ASCII art con varios estilos de fuente — copia y pega en código o READMEs.
Abrir herramienta →
Why browser-only design tools?
Design files, brand assets, and client icons are valuable intellectual property. Uploading them to a third-party service creates unnecessary risk. Every tool on this page runs entirely in your browser — paste freely, audit safely, share nothing.
From accessibility checks (color blindness simulation, WCAG contrast ratios) to code generation (CSS shadows, clip paths) to asset optimization (SVG minification, emoji favicons, icon resizing), every tool is built for the moments designers and developers need quick, private answers.
Preguntas frecuentes
- Do these tools upload my files anywhere?
- No. Every design tool on this page runs entirely in your browser. Your images, SVG files, and color choices never leave your device — not even temporarily.
- What is WCAG color contrast?
- WCAG (Web Content Accessibility Guidelines) defines contrast ratio thresholds for readable text. AA level requires a 4.5:1 ratio for normal text and 3:1 for large text. AAA level requires 7:1 and 4.5:1 respectively.
- Can I use generated favicons commercially?
- Yes. The Emoji Favicon Generator renders standard system emoji onto a canvas in your browser. The resulting PNG files are yours to use freely.