Ale's Fun Lab

Experimentos

• Generador de paletas — Elige un tono y una armonía y obtén una paleta accesible completa con verificación de contraste AA/AAA en vivo.
• Verificador de contraste — Pega dos colores, mira el ratio WCAG y corrige una combinación que falla con un clic.
• Imagen → Paleta — Sube una imagen, extrae sus colores dominantes y descubre qué combinaciones se pueden usar juntas.
• Simulador de daltonismo — Mira una paleta con protanopia, deuteranopia, tritanopia y acromatopsia, y detecta los colores que se confunden.
• Generador de escala tipográfica — Elige un tamaño base y una proporción y obtén una escala tipográfica completa con vista previa, clamp() fluido y tokens.
• Generador de degradados — Degradados lineales, radiales, cónicos o de malla: arrastra los puntos, mezcla colores y copia el CSS.
• Explorador de estados de componentes — Botones, campos y tarjetas en todos sus estados (hover, foco, presionado, deshabilitado, error) con verificación de contraste.
• Convertidor de design tokens — Pega tokens W3C, Tokens Studio o Variables de Figma y obtén CSS, SCSS, Tailwind v4 o SwiftUI, con alias incluidos.
• Laboratorio de movimiento — Arrastra curvas cubic-bezier, ajusta un resorte real, míralos competir y exporta tokens de movimiento.
• Recorte automático — Suelta tus PNG y recupéralos sin los bordes transparentes vacíos, en lote, en tu navegador y en un solo ZIP.
• Prueba de expansión de texto — Mira cómo se rompe una interfaz en alemán, español o pseudotraducción, y qué CSS la hace resistir la traducción.
• Mini auditoría de accesibilidad — Pega HTML y encuentra textos alternativos y etiquetas que faltan, botones sin nombre, saltos de títulos, objetivos táctiles pequeños y bajo contraste.
• Vista previa multiformato — Un mensaje en tamaños de redes sociales y anuncios display, con zonas seguras y punto focal arrastrable. Exporta cada PNG.

Guías

• Cómo corregir el bajo contraste de color (WCAG 2.2) — Qué significan los ratios de contraste de WCAG, por qué “oscurecerlo” suele romper tu marca y una forma confiable de corregir combinaciones que fallan.
• Tipografía fluida con CSS clamp(): guía práctica — Cómo hacer que los tamaños de letra crezcan suavemente entre móvil y escritorio con clamp(), cómo funciona el cálculo y cómo mantenerlo accesible.
• De Variables de Figma a Tailwind v4 (y CSS) sin perder los alias — Cómo exportar Variables de Figma, cómo es el formato de design tokens del W3C y cómo convertir tokens en un @theme de Tailwind v4 y variables CSS.
• Diseñar interfaces que sobrevivan a la traducción — Cuánto crece el texto al traducirlo, los patrones de CSS que se rompen y las alternativas resistentes, con pseudolocalización para detectar problemas a tiempo.