Ferramenta de exportação de gradientes
Ferramenta de exportação gratuita. Exporte seus gradientes para 10+ formatos: CSS, Tailwind, SVG, JSON, React, Vue, SCSS, LESS e Style Dictionary.
O que você recebe
Construtor de temas
Gere um sistema de design completo a partir de uma cor. Escalas 50-950 para primary, secondary, accent e neutral com conformidade WCAG automática.
Conversor
Converta entre HEX, RGB, HSL, HSV, CMYK, CIE Lab, OKLab e OKLCH com um clique.
Verificador de acessibilidade
Verificação de contraste WCAG 2.1 para AA/AAA. Ajuste automático de cores para conformidade.
Exportações para desenvolvedores
Exporte como variáveis CSS, configuração Tailwind, SCSS, tokens Style Dictionary ou SVG. Geração completa de tokens de design.
Simulador de daltonismo
Simule protanopia, deuteranopia, tritanopia e acromatopsia para verificar seus designs.
Perguntas frequentes
Como funciona o Construtor de temas?
Insira uma cor primária e geramos um sistema de design completo: escalas de 11 níveis (50-950) para primary, secondary, accent e neutral, mais cores semânticas, temas claro e escuro e tokens para desenvolvedores. Escolha entre 30+ estilos, 20+ tipos de projeto e 15+ personalidades de marca.
Posso exportar tokens de design?
Sim. Exporte o sistema de design completo como propriedades CSS personalizadas, configuração Tailwind CSS v4, variáveis SCSS, LESS ou JSON Style Dictionary — pronto para copiar e colar no seu projeto.
Meus dados são armazenados?
Não. Tudo acontece no seu navegador. Favoritos são armazenados no localStorage e nunca saem do seu dispositivo.
Como funciona a verificação de acessibilidade?
O Construtor de temas verifica automaticamente cada par texto-fundo para conformidade WCAG 2.1 AA e ajusta as cores quando necessário. A aba de verificação de contraste fornece análise detalhada AA/AAA.
Pronto para começar?
Vá para o gerador e comece a criar dados realistas agora mesmo
Abrir Color Studio