Aller au contenu principal

    Usamos cookies

    Usamos cookies para mejorar tu experiencia. Al continuar navegando, aceptas su uso.

    Más información en nuestra Cookies y nuestra Privacidad

    Tema shadcn/ui

    Genera configuraciones de tema para shadcn/ui. Usa Tema shadcn/ui gratis en línea, sin registro, con resultados rápidos y procesamiento seguro en el navegador.

    Base

    Primary

    Secondary

    Muted & Accent

    Destructive

    Borders & Input

    Vista previa

    Vista previa de componentes

    Card content

    Muted text example

    @layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 4%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 4%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 4%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;
    --accent: 0 0% 96%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 0 0% 9%;
    --radius: 0.5rem;
  }
}

    Tema shadcn/ui te ayuda a trabajar con colores directamente en el navegador.

    La herramienta está pensada para diseñadores, desarrolladores y creadores que necesitan resultados rápidos y fiables.

    Formatos compatibles

    CSS
    Tailwind
    HSL
    shadcn/ui

    Cómo funciona

    1

    Paso 1

    Abre Tema shadcn/ui

    2

    Paso 2

    Introduce o importa tus colores

    3

    Paso 3

    Copia, exporta o reutiliza el resultado

    Errores comunes a evitar

    • No comprobar el contraste puede afectar la legibilidad.
    • Usar demasiados colores puede hacer que la paleta sea difícil de aplicar.

    Consejos de profesionales

    • Guarda los colores principales como variables CSS.
    • Prueba la paleta en modo claro y oscuro antes de publicarla.

    Privacidad garantizada: todo se procesa localmente en tu navegador.

    El procesamiento se realiza localmente en tu navegador siempre que sea posible. No se requiere cuenta.

    Tema shadcn/ui para tus proyectos de color

    Genera configuraciones de tema para shadcn/ui.

    Tema shadcn/ui sin pérdida de precisión

    Las conversiones se ejecutan con valores exactos (HEX, RGB, HSL, OKLCH). Sin aproximación visual: obtienes el color fiel a tu intención de diseño.

    Tema shadcn/ui gratis en línea

    Sin registro, sin descarga de software. Tema shadcn/ui es 100% gratis y funciona en cualquier navegador. El plan gratuito incluye 10 usos al día.

    Tema shadcn/ui rápido y seguro

    El procesamiento ocurre directamente en tu navegador para máxima velocidad. No se envían datos a nuestros servidores: tus colores permanecen privados.

    Tema shadcn/ui para compartir y colaborar

    Exporta resultados como HEX, RGB, HSL, CSS, JSON o cópialos con un clic. Perfecto para compartir una guía de color con tu equipo o documentar un design system.

    Descubre todas nuestras herramientas de color

    Extrae, convierte, genera paletas, degradados y contrastes WCAG en pocos clics.

    Ver todas las herramientas

    Herramientas relacionadas

    Paleta Tailwind
    Variables CSS
    Vista previa UI
    Contraste de colores

    Guías y tutoriales

    Aprende a usar nuestras herramientas con nuestras guías detalladas.

    shadcn-theme: guía práctica de developer

    Guía localizada para usar shadcn-theme, entender buenas prácticas de developer y evitar errores comunes.

    shadcn-theme: guía práctica de developer

    Guía localizada para usar shadcn-theme, entender buenas prácticas de developer y evitar errores comunes.

    shadcn-theme: guía práctica de developer

    Guía localizada para usar shadcn-theme, entender buenas prácticas de developer y evitar errores comunes.

    Preguntas frecuentes

    Sí, la herramienta está disponible gratis en línea.

    El procesamiento se realiza en el navegador siempre que sea posible para proteger tus datos.