Herramienta de color práctica

Generador de tema shadcn

Mapea una paleta a variables CSS estilo shadcn para background, foreground, primary, muted, accent y destructive.

Abrir en la herramienta principalVolver a la herramienta
EnglishItalianoEspañolFrançaisDeutsch

Qué ofrece esta página

  • Usa tonos generados para variables semánticas.
  • Separa neutrales y marca para componentes coherentes.
  • Comprueba contraste de primary/destructive foreground.

Bueno para

  • Apps React
  • Librerías UI
  • Variables CSS

Cómo usarlo

Generador de paletasCrea paletas accesibles, comprueba contraste WCAG, extrae colores de imágenes y exporta CSS, Tailwind, SCSS, JSON, SVG y PNG.Checker WCAGComprueba el contraste entre texto y fondo según WCAG AA y AAA, prueba pares reales y elige combinaciones legibles.Extractor de imágenesExtrae colores dominantes de imágenes PNG, JPG o WebP en el navegador y conviértelos en paletas y tokens exportables.
¿Puedo usarlo con el generador principal?

Sí. Empieza aquí, abre la herramienta principal de Chromoforge con el mismo color base y exporta la paleta.

¿Qué variables espera un tema shadcn?

Las parejas background y foreground, luego card, popover, primary, secondary, muted, accent y destructive, cada una con su foreground, más border, input y ring. Todos los componentes de la librería leen estos nombres, así que rellenarlos todos mantiene sincronizados el tema claro y el oscuro.

¿Por qué los valores de shadcn se escriben sin función de color?

La configuración por defecto guarda los canales sueltos para que Tailwind pueda componer el alfa, como en hsl(var(--primary) / 0.5). Si pegas una cadena hsl() u oklch() completa en la variable, las utilidades de opacidad dejan de funcionar. Las versiones recientes admiten también valores completos: sigue la convención que ya use tu proyecto.