Paletta

Sobre el producto

Paletta convierte un color en design tokens para producción. Arma el sistema completo de 50 a 950 en OKLCH, valida cada par contra WCAG 2.2 con APCA al lado, y envía el resultado a Figma Variables y al código: CSS, Tailwind v4, shadcn/ui, JSON W3C DTCG, Swift y Kotlin. Está hecho para diseñadores e ingenieros de frontend que necesitan pasar de la inspiración a producción sin perder nada en el handoff.

Por qué lo construí

Me topaba siempre con el mismo punto de quiebre. Eliges una paleta y luego pasas horas armando escalas de tonos a mano, revisando contraste en otra herramienta, formateando tokens para ingeniería, y rehaciendo todo cuando un color cambia. Herramientas como Coolors resuelven la inspiración. No resuelven el envío a producción.

Quería un solo lugar para ir de un color a un sistema listo para producción, sin capa de traducción manual entre diseño e ingeniería. Así que lo construí.

Paletta también es prueba de algo que me importa: un diseñador puede ser dueño del ciclo completo, desde detectar el problema hasta lanzar el producto, y no solo entregar un archivo de Figma y esperar que el build aguante.

El problema

Los sistemas de color parecen simples desde afuera. En la práctica implican generar escalas de tonos perceptualmente equilibradas, validar ratios de contraste en cada combinación, simular cómo se lee la paleta bajo distintas deficiencias de visión del color, y exportar tokens en formatos que ingeniería pueda usar de verdad. La mayoría de los equipos resuelve esto encadenando tres o cuatro herramientas y mucho trabajo manual en medio.

El handoff se rompía todo el tiempo. Sobre todo a escala. Sobre todo cuando algo cambiaba aguas arriba y había que rehacer cada paso posterior.

Análisis de mercado

Estudié el panorama antes de escribir una línea de código. Coolors domina la inspiración con 8 millones de usuarios y diez años de ventaja de comunidad, así que competir ahí es una batalla perdida. Adobe Color te ata a Creative Cloud. Huemint es AI-first pero flojo en exportación. Realtime Colors muestra vistas previas en vivo pero no tiene validación WCAG ni generación de escalas.

Nadie era dueño del canal profesional de diseño a frontend, el segmento que necesita paletas que se puedan enviar a producción, no paletas que se ven bien en un mood board. Además subió lo que está en juego. Specify, una plataforma de design tokens con financiamiento, cerró. La Ley Europea de Accesibilidad ya está en vigor, lo que convierte el color accesible de un extra en un requisito legal para cualquiera que venda en Europa. Ahí es exactamente donde está Paletta.

Modelo de negocio

Gratis para siempre, sin tarjeta para empezar: 3 generaciones con IA al día, exportación a CSS y Tailwind v4, y validación WCAG. Pro a 9 USD al mes o 79 al año, un 27% de ahorro en el plan anual, suma generaciones ilimitadas, el sistema completo, todos los formatos de exportación, extracción desde imagen y el envío de escalas y modos a Figma Variables. El costo de servir es casi cero: hosting estático en Vercel, un backend delgado en Supabase, y Claude Haiku para la parte de IA a un costo bajo por generación.

Los márgenes son buenos, y el precio apunta al diseñador individual, no está detrás de una venta empresarial, porque la cuña es el diseñador solo que después trae a un equipo.

Sistema de diseño

Paletta corre sobre una arquitectura de variables CSS de 3 capas. Las variables son la única fuente de verdad, Tailwind las mapea a utilidades, y los componentes solo consumen tokens. Cambias una variable y toda la interfaz se actualiza. Sin hex hardcodeados en ningún lado.

Los radios manejan cinco niveles (24, 16, 12, 8, 6px) con una fórmula de radio interno: R_interno igual a R_externo menos el padding. Los mismos tokens se sincronizan con un archivo de Figma para que diseño y código hablen un solo idioma. Documenté todo como una especificación canónica que cada cambio tiene que cumplir. El mismo pensamiento sistémico que llevo a una organización de diseño, aplicado a mi propio producto.

Un equipo de agentes

Construyo Paletta con un equipo de producto virtual: 8 agentes de Claude Code especializados, cada uno con una jurisdicción definida y una relación con los demás. Escribir un componente de UI dispara al agente de sistema de diseño para revisar cumplimiento de tokens y al agente de frontend para revisar arquitectura. Es diseño organizacional aplicado a un build en solitario. Una persona, estructurada como un equipo.

Cómo lo construí

React 19, TypeScript, Vite, Tailwind, shadcn/ui, Zustand para estado, Supabase, Stripe, Vercel, chroma-js para la matemática de color y Vike para SSG. Las funciones de IA corren sobre la API de Claude (Haiku). Lo escribo con Claude Code como compañero de ingeniería, que es la forma en que un diseñador lanza y mantiene un producto completo sin equipo.

Qué está en producción

Todo lo siguiente está lanzado y corriendo en usepaletta.io:

• Generación de paletas con IA, 3 al día en el plan gratuito e ilimitada en Pro
• Escalas completas de 50 a 950 en OKLCH, con roles secundario, acento y neutro, y superficies claras y oscuras
• Validación de contraste WCAG 2.2 en cada par, con APCA al lado como lente perceptual
• Un lente de accesibilidad de cinco modos para simular la visión del color
• Extracción de paletas a partir de una foto
• Exportación a variables CSS y Tailwind v4, más shadcn/ui, JSON W3C DTCG, JSON de Figma Variables, Swift y Kotlin en Pro
• Un prompt exportable que aplica el sistema en v0, Lovable o Bolt
• Un plugin de Figma que envía el sistema a Figma Variables reales, como colecciones y modos
• Vista previa en vivo sobre maquetas reales de UI
• Una biblioteca de sistemas guardados
• Plan gratuito y facturación Pro con Stripe
• Analítica con PostHog funcionando de punta a punta

La distribución va por el plugin de Figma como top-of-funnel, una serie de build-in-public en dev.to, y Reddit y X. El producto está construido y funcional. Es pre-lanzamiento solo en el sentido del empujón público, no en lo que existe.