Estúdio de Cor
Paletas, gradientes, rodas e todas as formas de encontrar a cor perfeita.
Gerador de Paletas IA
Descreva um clima e receba paletas combinando — alimentado por uma rede neural real rodando inteiramente no seu navegador. Sem servidores, sem espera, seus dados não saem do dispositivo.
IA · NeuralGuia de Estilo IA
Descreva sua marca e receba um sistema de design completo — paleta, par de fontes, escala tipográfica, espaçamento, raios e sombras — pareado pela rede neural e montado em um bloco CSS pronto para copiar.
IA · Sistema de DesignConversor de Cor
Converta entre HEX, RGB, HSL, CMYK e OKLCH com conversão bidirecional instantânea.
Conversor · Todos os formatosHarmonias de Cor
Gere paletas complementares, triádicas, análogas e complementares divididas a partir de qualquer cor base. Clique em qualquer amostra para copiar seu código hex.
Cor · TeoriaNomeador de Cores IA
Digite qualquer cor hex e encontre os nomes mais próximos: cores padrão CSS, cores tradicionais chinesas, wagairo japonês e mais 12 culturas. A ciência da cor perceptiva acha a correspondência real, e o modelo IA sugere temas de paleta relacionados.
IA · Ciência da CorCírculo Cromático
Roda de cores interativa para explorar matizes, saturações e relações de cores. Clique para selecionar e bloquear cores.
Interativo · VisualGerador de Gradientes
Projete lindos gradientes lineares e radiais com visualização do Canvas em tempo real. Copie o código CSS instantaneamente.
Gradiente · Exportação CSSPredefinições de gradiente
Navegue e copie 15 belas predefinições de gradiente.
Predefinições · Um cliquePaleta de Imagem
Extraia lindas paletas de cores de qualquer imagem usando a quantização inteligente de cores.
Extração · InteligenteGerador de Paletas
Crie esquemas de cores harmoniosos com modos monocromáticos, complementares, análogos e triádicos. Visualização em tempo real com exportação CSS.
Cor · InterativoGerador de Matizes e Sombras
Gere uma escala completa de matizes e sombras a partir de qualquer cor — 20 passos com exportação HEX e SCSS.
matizes e sombras, escala de coresEfeitos e Profundidade
Sombras, vidro e raio — os detalhes sutis que tornam a UI real.
Criador de Blobs
Gere formas orgânicas suaves para fundos, avatares e divisores de seção. Aleatorize com um clique, ajuste a curvatura e copie o código border-radius ou SVG.
CSS · OrgânicoGerador de Cantos Arredondados
Editor visual de raio de borda com visualização em tempo real. Copie o código CSS com controle de canto individual.
CSS · Editor visualGerador de Sombras
Construtor de sombra de caixa interativo com várias camadas, visualização do Canvas em tempo real e saída CSS.
CSS · Em camadasGerador de Botões CSS
Crie botões bonitos em segundos — 6 estilos, cores personalizadas, raio e preenchimento, com CSS pronto para copiar.
gerador de botões, botão css, design de botõesGerador de Filtros CSS
Crie efeitos visuais com CSS filter() — desfoque, brilho, contraste, rotação de matiz, sépia e mais. Pré-visualização ao vivo em uma imagem de amostra, copie a cadeia completa de filtros instantaneamente.
CSS · Efeitos de ImagemGerador de Glassmorphism
Crie cartões de vidro fosco com desfoque de fundo, transparência e bordas sutis. Pré-visualização em tempo real e CSS para copiar.
UI · Vidro foscoGerador de Texto Gradiente
Destaque o texto com preenchimentos gradientes e animação — ajuste ângulo e cores, copie o CSS na hora.
texto gradienteGerador de Sombra de Texto
Projete sombras de texto em camadas com pré-visualização em tempo real. Ajuste deslocamento, desfoque, cor e opacidade — copie o CSS instantaneamente.
CSS · TipografiaKit Prático
Verificações, conversões e sistemas que mantêm seus designs acessíveis e consistentes.
Trechos CSS IA
Descreva o efeito que você quer — um botão brilhante, um spinner de loading, um cartão de vidro — e a rede neural encontra o trecho CSS correspondente. Veja renderizado ao vivo, copie o código pronto.
IA · Biblioteca de CódigoSimulador de daltonismo
Simula como os usuários daltônicos veem as cores.
Acessibilidade · SimulaçãoVerificador de Contraste
Verifique a conformidade com WCAG AA/AAA para cores de texto e de fundo. Obtenha classificações de acessibilidade instantâneas.
Acessibilidade · AA/AAAGerador de Curvas Bézier
Projete curvas de easing CSS personalizadas com pré-visualização ao vivo e animação. Arraste pontos de controle, escolha presets e copie a função cubic-bezier() instantaneamente.
CSS · MovimentoConversor de PX para REM
Converta pixels para REM e vice-versa instantaneamente, com tamanho de fonte base ajustável e tabela de conversão completa. Essencial para CSS acessível e escalável.
CSS · UnidadesGerador de Transformação CSS
Visualize e gere transformações CSS — girar, dimensionar, transladar e inclinar com pré-visualização interativa ao vivo. Copie a propriedade transform completa instantaneamente.
CSS · AnimaçãoSistema de Cores UI
Gere paletas completas de tokens de design a partir de uma única cor inicial. Exporte para Tailwind, CSS ou SCSS.
Tokens de design · TailwindLayout e Grade
Grades e proporções — a espinha dorsal estrutural de cada interface.
Calculadora de Proporção
Calcule e dimensione qualquer proporção — 16:9, 4:3, 1:1, 9:16 e personalizada. Redimensione dimensões preservando as proporções, com predefinições de resoluções comuns.
Utilitário · ProporçãoGerador de CSS Grid
Crie layouts CSS Grid visualmente com pré-visualização em tempo real.
CSS · Editor visualCalculadora da Proporção Áurea
Calcule dimensões da proporção áurea (1:1.618) para layouts, tipografia e logotipos. Obtenha valores áureos maiores e menores instantaneamente, com pré-visualização.
Layout · ProporçãoGerador de Ondas SVG
Crie divisórias de onda SVG suaves para o site — ajuste amplitude, comprimento e camadas, copie o SVG.
onda svg, divisor de ondasAteliê de Tipografia
Combinação de fontes e escalas — a voz do seu design.
Combinação de Fontes IA
Descreva seu projeto e receba combinações profissionais de Google Fonts pareadas por uma rede neural real rodando no seu navegador. Veja renderizadas ao vivo e copie o CSS pronto.
IA · FontesCalculadora Clamp
Gere tipografia fluida com CSS clamp(). Defina tamanhos mínimo, preferido e máximo — obtenha a fórmula clamp() perfeita e uma pré-visualização visual da escala.
CSS · Tipografia FluidaCombinação de Fontes
Descubra combinações harmoniosas de fontes para títulos e corpo de texto de coleções selecionadas.
Tipografia · Mais de 300 fontesGerador de Escala Tipográfica
Gere uma escala tipográfica modular harmoniosa com proporção áurea, terça maior e outras proporções clássicas. Pré-visualize os tamanhos e copie o CSS completo.
Tipografia · Escala14 idiomas
Cada ferramenta, cada etiqueta, cada guia — totalmente traduzido.
Acessibilidade em primeiro lugar
Cada paleta inclui pontuações de contraste WCAG. Projete de forma inclusiva desde o início.
Exportação amigável para desenvolvedores
CSS, Tailwind, SCSS, JSON – copie o formato que seu projeto precisa.