paletta
En vivo en Figma Community

La capa de producción entre Figma
y el código que publicas.

Genera en OKLCH. Valida contra WCAG 2.2 y APCA. Envía a Figma Variables, exporta a Tailwind, shadcn y DTCG. Para líderes de design systems que publican en código, no en mood boards.

Instala el plugin de FigmaGRATIS

Gratis para siempre, sin registro

WCAG 2.2 + APCA
en cada par
50 a 950
design tokens OKLCH
lente de accesibilidad
integrada en la creación
Vista en vivo

Un color entra. Sale un sistema validado.

Elige un color base. Paletta arma la escala completa de 50 a 950, valida cada par y envía Variables reales a Figma.

Base
Primary, 50 a 950
50
100
200
300
400
500
600
700
800
900
950
900 sobre 5016.03:1WCAG AAA
fg sobre 6008.13:1WCAG AAA
500 sobre 9503.51:1No cumple AA

WCAG 2.2 es el veredicto de conformidad. APCA Lc es una lente perceptual.

Paletta60 variables
primary/500#7C3AED
primary/900#20004F
secondary#B862C5
accent#5566D2
surface/50#F7F7F8
Creó 55 variables de tono, 5 roles, 50 a 950

Una vista en vivo de las Variables que Paletta envía a Figma desde tu color base.

Validado en cada par. Enviado a Figma Variables.
Cómo funciona

Todo el camino, del color base al código

Un color base se vuelve una escala OKLCH validada, Variables reales de Figma y tokens de código, desde una sola fuente.

#7C3AED
OKLCH
01Generar

Desde un color base

Una escala OKLCH, 50 a 950, perceptualmente uniforme.

Aa900 on 5016.0AAA
Aafg on 6008.1AA
Aa500 on 9503.5Below AA
WCAG 2.2
02Validar

Cada par, WCAG 2.2

Contraste verificado mientras construyes, con lente APCA.

ApprovedRejected
ApprovedRejected
Normal
Deuteranopia
03Lente de accesibilidad

Míralo como otros lo ven

Previsualiza el sistema a través de distintas visiones.

Variables60 variables
primary/500#7C3AED
primary/900#20004F
secondary#B862C5
one click
04Enviar a Figma

Variables reales, un clic

Roles y 50 a 950, como Figma Variables.

CSSTailwindDTCG
1:root {
2  --primary-500: #7C3AED;
3  --primary-600: #6D28D9;
4}
Copied
05Exportar

A tu código

Tailwind, shadcn, variables CSS y DTCG.

base
06Mantener

Cambia el base una vez

Actualízalo y el sistema entero lo sigue.

Instala el plugin de Figma
Lente de accesibilidad

Míralo a través de cada tipo de visión.

Paletta previsualiza tu sistema a través de las diferencias de visión del color mientras construyes, para que los colores que cargan significado sigan distintos para quienes dependen de ellos.

Normalreferencia
Estado del pedido
AprobadoRechazado
primary
secondary
accent
success
error
El color por sí solo se lee como estado.
Protanopía
Estado del pedido
AprobadoRechazado
primary
secondary
accent
success
error
Sin etiquetas, el estado se pierde.
Deuteranopía
Estado del pedido
AprobadoRechazado
primary
secondary
accent
success
error
Sin etiquetas, el estado se pierde.

Simulado en el motor que Paletta publica, validado contra WCAG 2.2.

Precios

Precios simples, herramientas de producción

Empieza gratis. Hazte Pro cuando estés listo para exportar.

Gratis

Para empezar

$0para siempre
Empieza a generar
  • Paletas de 5 colores
  • 3 generaciones con IA por día
  • Exportación Hex + CSS
  • Verificador de contraste básico
  • Generador de sistemas de color (base)

Pro

POPULAR

Para equipos de diseño e ingeniería en producción

$6.58/mes · facturado $79 al año
Hazte Pro
  • Todo lo de Gratis
  • Escalas de tonos 50 a 950
  • 6 a 10 colores por paleta
  • Generaciones con IA ilimitadas
  • Exportación Tailwind + shadcn
  • Plugin de Figma
  • Lente de accesibilidad (todos los modos)
  • Exportación completa del sistema de color
  • Guardados ilimitados, sin marca de agua

Preguntas frecuentes

¿Listo para construir tu sistema de color?

Gratis para siempre, sin tarjeta, Pro cuando necesites más.

Hecho por un diseñador de producto que publica en código.

Genera un sistema Ver precios