Figma Variables
Envía cualquier paleta a Figma Variables en un clic. Colores planos o escalas de tonos de 50 a 950, listas para tu design system.
En vivo en Figma Community
Paletta para Figma
Genera paletas OKLCH, verifica el contraste WCAG y envíalas a Figma Variables en un clic. Exporta código de producción sin salir de tu archivo.
Gratis · Funciona con Figma Variables · v1.0
primary#1A1A2E
secondary#6C47FF
accent#0052FF
surface#FAFAF8
muted#888780
:root {
--primary: oklch(0.18 0.04 264);
--accent: oklch(0.50 0.25 264);
--surface: oklch(0.98 0.005 90);
}Hecho para design systems de producción
Lente de accesibilidad
Verifica el contraste WCAG 2.2 en cada par de colores. Previsualiza a través de cinco tipos de visión del color sin salir de Figma.
Escalas de tonos OKLCH
Escalas de tonos perceptualmente uniformes con luminosidad predecible. Sin cambio de matiz de HSL, sin deriva de darken() de Sass. OKLCH mantiene la luminosidad percibida consistente entre matices, así que tu 500 se lee como un 500 sea azul, rojo o amarillo.
Cómo funciona
De prompt a tokens de producción en tres pasos.
Genera una paleta
Con prompt o al azar. Cinco colores, nombrados con semántica.
primary
secondary
accent
surface
muted
Verifica el contraste
Veredictos WCAG 2.2 en cada par de colores. APCA como lente perceptual.
primary / surfaceAA 6.5
accent / surfaceAAA 10.6
muted / surfaceAA 4.7
Envía a Figma Variables
El panel de Variables se actualiza al instante. Exporta CSS o Tailwind cuando quieras.
primaryoklch(0.18 0.04 264)
accentoklch(0.50 0.25 264)
surfaceoklch(0.98 0.005 90)
24 variables sincronizadas
Construye más rápido con Paletta
Instala el plugin y luego usa Studio donde necesites el sistema completo.
Hecho por Andres Clavijo · Clavijo Studios LLC