La historia detrás del proyecto
Hace ya varios meses empecé a trabajar en una idea que me rondaba la cabeza: crear un generador de paletas de colores que realmente fuera útil para mi día a día como desarrollador. ¿El problema? Como muchos proyectos personales, acabó en ese limbo de "lo termino el finde que viene". El código se quedó a medias, con funcionalidades incompletas y ese típico TODO que nunca llega. Hasta ahora.
Hoy en el trabajo, a la hora de revisar los contrastes de algunas variables de color, me acordé de esta herramienta a medio terminar, que generaba paletas de colores, pero no ofrecía el feedback necesario sobre la accesibilidad.
Le enseñé el estado actual a mi compañero, quién precisamente al verla dijo "Estaría muy bien que diese el reporte de contrastes en vivo". He de decir que en MB3 trabajo con un equipo increíble, que siempre aguanta mi tormenta de ideas e intersecciones constantes, escuchándome y dándome su opinión sincera.
Esta tarde me he motivado: he sacado tiempo y las ganas suficientes como para darle el empujón final y convertirlo en algo que realmente funciona. Y como creo que puede ser útil para más gente, he decidido compartirlo.
¡Diego, te dedico esta herramienta, titán!
¿Por qué otra herramienta de colores?
Sé lo que estás pensando: "Ya existen mil generadores de paletas". Y tienes razón. Pero déjame explicarte qué me faltaba en las herramientas que probé: Coolors, Adobe Color, Paletton... son geniales para explorar combinaciones de colores. Y sí, algunas de ellas te dan estos feedbacks, pero toca meter tarjetazo.
El tema es que cuando llegaba el momento de implementar esos colores en un proyecto real, siempre me encontraba con los mismos problemas: ¿Se verá bien este azul sobre este fondo? Tenía que abrir otra herramienta para comprobar el contraste. ¿Cumple con accesibilidad? Otra pestaña más para verificar WCAG. ¿Cómo quedará en un botón real? ¿Y en una card? ¿Y en un formulario? Aquí ya me tocaba montar un prototipo rápido o imaginar. ¿Cuál era el código hex? Copiar, pegar, volver a la herramienta, copiar otro color... Quería algo que me diera todo eso en un solo sitio. Así que lo construí.
Qué hace la herramienta
Generación inteligente de paletas
Con un clic generas una paleta completa de 4 colores pensados para funcionar juntos: Color Primario (el protagonista, el color de tu marca o acción principal), Color Secundario (el complemento, para elementos secundarios y acentos), Color Light (tonos claros para fondos, cards, espacios negativos) y Color Dark (tonos oscuros para textos, headers, elementos de contraste). ¿No te gustan los colores generados? Puedes ajustar cada uno individualmente con un selector de color. Los cambios se reflejan instantáneamente en toda la interfaz.
Verificación de accesibilidad WCAG integrada
Esta es probablemente la funcionalidad más útil de toda la herramienta. Automáticamente analiza todas las combinaciones posibles de tu paleta y te muestra el ratio de contraste exacto (por ejemplo, 4.52:1), si cumple con WCAG AA (el estándar mínimo recomendado) y si cumple con WCAG AAA (el estándar más exigente). Cada combinación tiene badges visuales que te indican de un vistazo si el contraste es suficiente: Verde (cumple), Amarillo (solo para texto grande) o Rojo (no cumple).
Pero no se queda ahí. Si una combinación no cumple, puedes ajustar la luminosidad con un slider visual o auto-ajustar con un clic para alcanzar el ratio que necesites (3:1, 4.5:1 o 7:1). Es como tener un verificador de accesibilidad integrado directamente en el generador de paletas.
Previsualizaciones en interfaces reales
Aquí es donde la herramienta se diferencia de las demás. En lugar de mostrarte solo cuadrados de colores, te muestra cómo se ve tu paleta aplicada en componentes UI reales: Dashboard de métricas (cards con iconos, números y porcentajes de cambio, ideal para ver cómo funcionan tus colores en un contexto de datos), Barra de navegación (un header completo con logo, menú, buscador, notificaciones y avatar), Formulario de login (inputs, labels, botones, checkboxes, links... todo con tus colores, perfecto para evaluar la legibilidad y jerarquía visual), Menú lateral de navegación (items de menú con estados activos, badges de notificación, iconos), Sistema de alertas (notificaciones de éxito, advertencia e información), Tabla de datos (headers, filas, avatares, badges de rol, estados con indicadores de color), Barras de progreso (diferentes estados de completado con tus colores primario y secundario), Switches y configuración (controles de toggle, etiquetas, descripciones), Variantes de botones (primario, secundario, outline, ghost, dark, light) y Sistema de badges y etiquetas (diferentes estilos y combinaciones de colores para categorías y estados).
Análisis de luminancia
Un gráfico visual que te muestra la distribución de luminosidad de tu paleta. Te ayuda a entender si tienes suficiente contraste entre colores, el balance entre tonos claros y oscuros, y cómo se relacionan los colores entre sí.
Previsualización vectorial personalizada
Un toque personal: incluí una ilustración vectorial (un avatar que uso en mis redes) que se colorea dinámicamente con tu paleta. Cada capa del SVG toma un color diferente: Gafas y cuello (color primario), Pelo (color secundario), Fondo (color light) y Abrigo (color dark). Es una forma divertida de ver cómo los colores funcionan juntos en una composición real, más allá de componentes UI.
Exportación de código CSS
Una vez tienes tu paleta perfecta, un clic y tienes las variables CSS listas para copiar. Sin necesidad de estar copiando color por color.
Los detalles que marcan la diferencia
Diseño responsive: La herramienta funciona perfectamente en móvil. Pero en desktop tiene un comportamiento especial: el panel de controles se queda fijo (sticky) mientras haces scroll por las previsualizaciones. Así siempre tienes acceso a los ajustes mientras exploras cómo quedan los colores.
Microinteracciones cuidadas: He puesto especial atención en que la experiencia sea agradable. Los botones se elevan sutilmente al hacer hover, el icono de shuffle rota 180° al generar una nueva paleta, las tarjetas tienen sombras dinámicas que responden al hover, los colores de la vista previa aparecen con una animación escalonada y hay un corazón latiendo en el footer (porque los detalles importan). Son pequeñas cosas que no afectan la funcionalidad, pero hacen que usar la herramienta sea más satisfactorio.
Tema oscuro nativo: Respeta las preferencias del sistema. Si usas modo oscuro, la herramienta se adapta automáticamente.
El stack técnico
Para los curiosos: React 19 con TypeScript, Tailwind CSS 4 para los estilos, Radix UI como base de componentes accesibles, Vite para el build y Recharts para el gráfico de luminancia. Todo el código de verificación WCAG está implementado siguiendo las fórmulas oficiales de W3C para cálculo de luminancia relativa y ratios de contraste.
¿Para quién es esta herramienta?
Desarrolladores frontend que necesitan elegir colores accesibles para sus proyectos, diseñadores UI/UX que quieren validar sus paletas rápidamente, equipos de producto que necesitan asegurar cumplimiento de accesibilidad, freelancers que trabajan en múltiples proyectos con diferentes identidades visuales, estudiantes aprendiendo sobre teoría del color y accesibilidad web, y cualquiera que necesite generar una paleta de colores coherente.
Pruébala gratis
La herramienta es 100% gratuita, no requiere registro y no tiene limitaciones. Está desplegada en https://alberruche-colors.netlify.app/. Si te resulta útil, me encantaría saberlo. Y si encuentras algún bug o tienes sugerencias, mis DMs están abiertos.
Conclusión
A veces los proyectos personales tardan más de lo esperado. Pero cuando finalmente los terminas y ves que pueden ayudar a otros, merece la pena. Espero que esta herramienta te ahorre tiempo y te ayude a crear interfaces más accesibles y visualmente coherentes.