Aller au contenu principal

    Usamos cookies

    Usamos cookies para melhorar sua experiência. Ao continuar navegando, você aceita seu uso.

    Saiba mais em nossa Cookies e Privacidade

    Tema shadcn/ui

    Gere configurações de tema para shadcn/ui. Use Tema shadcn/ui online grátis, sem cadastro, com resultados rápidos e processamento seguro no navegador.

    Base

    Primary

    Secondary

    Muted & Accent

    Destructive

    Borders & Input

    Pré-visualização

    Pré-visualização dos 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 ajuda você a trabalhar com cores diretamente no navegador.

    A ferramenta foi criada para designers, desenvolvedores e criadores que precisam de resultados rápidos e confiáveis.

    Supported formats

    CSS
    Tailwind
    HSL
    shadcn/ui

    How it works

    1

    Step 1

    Abra Tema shadcn/ui

    2

    Step 2

    Insira ou importe suas cores

    3

    Step 3

    Copie, exporte ou reutilize o resultado

    Erros comuns a evitar

    • Esquecer de verificar o contraste pode prejudicar a legibilidade.
    • Usar cores demais pode tornar a paleta difícil de aplicar.

    Dicas de especialistas

    • Mantenha as cores principais como variáveis CSS.
    • Teste a paleta nos modos claro e escuro antes de publicar.

    Privacy guaranteed: everything is processed locally in your browser.

    O processamento ocorre localmente no navegador sempre que possível. Nenhuma conta é necessária.

    Tema shadcn/ui para seus projetos de cor

    Gere configurações de tema para shadcn/ui.

    Tema shadcn/ui sem perda de precisão

    As conversões usam valores exatos (HEX, RGB, HSL, OKLCH). Sem aproximação visual: você obtém a cor fiel à intenção do design.

    Tema shadcn/ui grátis online

    Sem cadastro, sem download. Tema shadcn/ui é 100% gratuito e funciona em qualquer navegador. O plano gratuito inclui 10 usos por dia.

    Tema shadcn/ui rápido e seguro

    O processamento ocorre diretamente no navegador para máxima velocidade. Nenhum dado é enviado aos nossos servidores: suas cores permanecem privadas.

    Tema shadcn/ui para compartilhar e colaborar

    Exporte resultados como HEX, RGB, HSL, CSS, JSON ou copie com um clique. Perfeito para compartilhar guia de cores com a equipe ou documentar um design system.

    Descubra todas as nossas ferramentas de cor

    Extraia, converta, gere paletas, gradientes e contrastes WCAG em poucos cliques.

    Ver todas as ferramentas

    Related tools

    Paleta Tailwind
    Variáveis CSS
    Pré-visualização UI
    Contraste de Cor

    Guias e tutoriais

    Aprenda a usar nossas ferramentas com nossos guias detalhados.

    shadcn-theme: guia prático de developer

    Guia localizado para usar shadcn-theme, entender boas práticas de developer e evitar erros comuns.

    shadcn-theme: guia prático de developer

    Guia localizado para usar shadcn-theme, entender boas práticas de developer e evitar erros comuns.

    shadcn-theme: guia prático de developer

    Guia localizado para usar shadcn-theme, entender boas práticas de developer e evitar erros comuns.

    Frequently asked questions

    Sim, a ferramenta está disponível online gratuitamente.

    O processamento ocorre no navegador sempre que possível para proteger seus dados.