Entra uma cor da marca. Sai um sistema de cores que funciona.
O GetColors transforma uma cor da marca em papéis de interface claros e escuros, verifica o contraste de cada combinação e exporta para Tailwind v4, shadcn/ui, CSS puro ou design tokens. Seus agentes de IA podem usar as mesmas ferramentas via MCP.
Como o GetColors funciona
- Comece com uma cor da sua marca. Digite um código hex, escolha com o seletor de cores ou pegue a cor de uma imagem ou de um site existente.
- O GetColors cria a partir dela um tema claro e um tema escuro em OKLCH, com papéis como canvas, surface, ink, primary e accent.
- Cada par de papéis é verificado quanto ao contraste WCAG 2 nos dois temas, e o Studio mostra quais pares ainda precisam de ajuste.
- Exporte o sistema como variáveis CSS, light-dark(), Tailwind v4, shadcn/ui ou design tokens, ou deixe um agente de IA usar as mesmas ferramentas por MCP.
O que você pode fazer com o GetColors
Criar um sistema de cores
Transforme uma cor da marca em papéis de interface claros e escuros em OKLCH, com prévias ao vivo dos dois temas.
Gerar paletas de cores
Trave as cores de que você gosta e embaralhe o resto, teste harmonias como análoga, tríade e complementar, e veja como a paleta aparece com daltonismo.
Verificar o contraste
Teste qualquer par de texto e fundo com WCAG 2.1 e APCA, e corrija automaticamente uma cor de texto que não atende.
Auditar as cores que você já usa
Cole CSS, um tema Tailwind ou os globals do shadcn para encontrar falhas de contraste, cores quase duplicadas, valores fixos no código e papéis escuros ausentes. A auditoria roda no seu navegador.
Explorar paletas, gradientes e nomes de cores
Explore paletas de cores e gradientes CSS selecionados por clima, tema ou matiz, e consulte cores nomeadas com seus valores HEX, RGB e OKLCH.
Use onde você trabalha
Uma extensão do Chrome, um plugin do Figma, uma API REST, um servidor MCP para agentes de IA e um registro shadcn/ui rodam o mesmo motor do site.
Perguntas frequentes
O que é o GetColors?
O GetColors é um conjunto de ferramentas de cor para designers e desenvolvedores: um gerador de paletas de cores, um estúdio de sistema de cores, um verificador de contraste, um gerador de escalas Tailwind, um seletor de cores de imagem e mais. Você não precisa de conta para usar as ferramentas de cor.
O GetColors é gratuito?
Sim. Todas as ferramentas de cor principais e as exportações são gratuitas. O GetColors Pro é um plano separado que adiciona uma biblioteca de paletas na nuvem maior e permite que agentes de IA trabalhem com ela.
O que é um sistema de cores?
Um sistema de cores dá uma função a cada cor. Em vez de uma paleta solta, ele define papéis como fundo, texto, ação principal e borda, em um tema claro e um escuro, para que cada combinação possa ser verificada quanto ao contraste e reutilizada com consistência no código.
O que é OKLCH e por que o GetColors usa esse formato?
O OKLCH descreve uma cor por luminosidade, croma e matiz em um espaço onde passos numéricos iguais parecem passos visuais iguais. Isso facilita manter escalas e temas uniformes, e o Tailwind v4 usa OKLCH na própria paleta.
Agentes de IA podem usar o GetColors?
Sim. O GetColors tem um servidor MCP, então Claude, Cursor e outros clientes MCP podem gerar paletas, verificar contraste, criar escalas Tailwind e sistemas de cores, e auditar as cores de um código. As ferramentas gratuitas não exigem token.