Figma Variables
Envía cualquier paleta a Figma Variables en un clic. Los colores base son gratis. Las escalas de tonos (50 a 950) son una función Pro.
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 tres tipos de visión del color gratis, cinco con Pro, 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. Una función Pro del plugin.
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 gratis, Tailwind con Pro.
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