Gerador de Tons e Tonalidades de Cor Escolha um hex ou RGB e obtenha instantaneamente 10 tons (sua cor misturada para branco) e -10 tons (misturada para preto) como amostras visuais. Clique em qualquer amostra para copiar seu código hex, ou exporte o conjunto completo como propriedades CSS personalizadas, variáveis SCSS, JSON ou uma lista simples de hex. ...
Experimente a ferramenta »Gerador de Escala de Cores do Tailwind CSS Cole um único código hexadecimal e obtenha instantaneamente uma escala completa de 50 a 950 no estilo do Tailwind com passos perceptivelmente iguais. A escala é construída no espaço de cores OKLCH, portanto, cada etapa parece uma subida de brilho perceptível para o olho humano — não apenas uma queda linear em RGB ou HSL.
Experimente a ferramenta »Canvas de Arte em Pixels & Exportação em CSS Pinte sprites em estilo de 8 bits com precisão diretamente no seu navegador e exporte-os como arte em sombras de caixa pura em CSS, SVG escalável, PNG rasterizado ou JSON portátil. O canvas escala de 8×8 até 64×64, traz paletas clássicas (NES, Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16) e oferece pincel, borracha, ...
Experimente a ferramenta »Visualizador e Editor de Caminho SVG Cole qualquer atributo d de caminho SVG e veja-o renderizado em tempo real. Esta ferramenta divide cada comando em seus parâmetros e ponto final absoluto, desenha manipuladores de controle de Bezier sobre a prévia e reescreve o caminho entre coordenadas absolutas e relativas com precisão configurável. É desenvolvida para autores de SVG...
Experimente a ferramenta »Gerador de Flexbox CSS (Visual) Projete layouts de Flexbox visualmente e copie CSS pronto para produção. Ajuste a direção, alinhamento, empacotamento, espaçamento e sobrescritas por item, enquanto uma prévia em tempo real atualiza instantaneamente. Sem suposições, sem viagens até o Chrome DevTools — apenas escolha o comportamento do contêiner que precisa, veja como ele é renderizado e copie as regras geradas. Como usar Escolha uma direção flex (linha, ...
Experimente a ferramenta »Gerador de Ícones para README O Gerador de Ícones para README cria ícones perfeitos em pixels, no estilo dos ícones do Shields.io, diretamente no seu navegador. Escolha um modelo pré-definido ou crie o seu próprio rótulo e mensagem, escolha cores e um estilo (plano, quadrado plano, para o ícone ou plástico), e obtenha saída pronta para Markdown, HTML, SVG e URL de dados. Sem chamadas a APIs externas, sem dependência de rede, sem ícones quebrados...
Experimente a ferramenta »Gerador de Animação com Chaves CSS Crie animações CSS @keyframes visualmente com pré-visualização em tempo real. Escolha entre 10 predefinições populares, como bounce, shake, pulse, fade in, slide in, spin, swing, rubber band, flash e wobble — ou crie sua própria animação personalizada a partir do zero. Ajuste o tempo, a suavização, o número de iterações, a direção e o modo de preenchimento, depois copie o ...
Experimente a ferramenta »Calculadora de Especificidade CSS A Calculadora de Especificidade CSS ajuda você a determinar a pontuação exata de especificidade de qualquer seletor CSS. Entender a especificidade é crucial para depurar conflitos de CSS e escrever folhas de estilo manuteníveis. Insira um ou mais seletores e veja instantaneamente suas pontuações (a,b,c) comparadas lado a lado. Como Usar Insira um seletor CSS por linha no ...
Experimente a ferramenta »Gerador de Filtro CSS O Gerador de Filtro CSS permite que você crie visualmente efeitos de filtro CSS com uma pré-visualização de imagem ao vivo. Ajuste as propriedades de filtro individuais usando controles deslizantes intuitivos e veja os resultados instantaneamente — sem adivinhações. Quando estiver satisfeito com a aparência, copie o código CSS gerado e cole-o diretamente em sua folha de estilo. Como Usar ...
Experimente a ferramenta »Simulador e Verificador de Daltonismo Veja como suas imagens e paletas de cores ficam para pessoas com deficiência de visão de cores. Simule 8 tipos de CVD e teste seus designs para conformidade de contraste WCAG para garantir a acessibilidade para todos os usuários. Como Usar Carregue uma imagem ou insira valores de cores para simular. Selecione uma deficiência de visão de cores ...
Experimente a ferramenta »Gerador de CSS Clip-Path Crie visualmente formas de clip-path CSS com um editor intuitivo de arrastar e soltar. Construa polígonos, círculos, elipses e formas de inset, em seguida, copie o CSS gerado diretamente em suas folhas de estilo. Como Usar Selecione um tipo de forma ou comece a partir de um modelo predefinido. Arraste os pontos de controle para ajustar a forma visualmente na tela de visualização. O ...
Experimente a ferramenta »Extrator de Paleta de Cores Faça upload de qualquer imagem e extraia instantaneamente sua paleta de cores dominante. Usa quantização de corte mediano para identificar as cores mais proeminentes, fornecendo valores precisos de HEX, RGB e HSL com porcentagens de uso. Como Usar Faça upload de uma imagem arrastando e soltando ou clicando na área de upload. A ferramenta analisa automaticamente a imagem ...
Experimente a ferramenta »Conversor de Cor HEX para Nome de Cor Converta qualquer código de cor HEX para seu nome de cor CSS/HTML mais próximo instantaneamente. Insira um valor hexadecimal ou use o seletor de cores visual para encontrar o nome de cor correspondente mais próximo entre as 140 cores nomeadas padrão do CSS3, completo com pontuações de similaridade e comparações de amostras lado a lado. Como Usar Insira um ...
Experimente a ferramenta »Calculadora de Distância de Cor Calcule a diferença perceptual entre duas cores usando as fórmulas padrão da indústria CIE deltaE. Insira cores via códigos HEX ou seletores de cores e veja instantaneamente quão diferentes elas parecem ao olho humano, com resultados de três algoritmos deltaE e uma interpretação em linguagem clara. Como Usar Insira duas cores usando códigos HEX ou o ...
Experimente a ferramenta »Conversor HSV para RGB Converta instantaneamente entre os espaços de cores HSV (Hue, Saturation, Value) e RGB com visualização visual ao vivo. Ajuste o matiz, a saturação e o valor usando controles deslizantes intuitivos e veja os valores RGB e HEX correspondentes atualizados em tempo real. Como Usar Ajuste os controles deslizantes HSV — Matiz (0-360°), Saturação (0-100%) e Valor (0-100%) — ...
Experimente a ferramenta »Conversor LAB para RGB Converta valores de cor CIE L*a*b* para formatos RGB e HEX com precisão científica. Esta ferramenta executa todo o pipeline de transformação LAB para XYZ para RGB usando o iluminante padrão D65 e correção gama sRGB apropriada, com visualização de cor e detecção de fora de gama. Como Usar Insira seus valores LAB — L ...
Experimente a ferramenta »Gerador de Sombra de Caixa CSS Crie belas sombras de caixa visualmente com uma pré-visualização ao vivo. Adicione múltiplas camadas de sombra, ajuste deslocamentos, desfoque, expansão e cor, em seguida, copie o CSS — sem codificação manual necessária. Como Usar Ajuste os controles deslizantes para o deslocamento horizontal e vertical, raio de desfoque, expansão e opacidade. Alterne o "inset" para sombras internas. Adicione até ...
Experimente a ferramenta »Conversor RGB para CMYK Converta instantaneamente cores entre os espaços de cores RGB (tela) e CMYK (impressão). Essencial para designers que preparam arquivos para produção impressa e que necessitam de traduções precisas do espaço de cores. Como Usar Insira sua cor usando valores RGB (0-255), código hexadecimal ou o seletor de cores. A ferramenta converte instantaneamente para porcentagens CMYK. Mude para CMYK→RGB...
Experimente a ferramenta »Gerador de Raio de Borda CSS Projete visualmente cantos arredondados para seus elementos CSS. Ajuste cada canto de forma independente, use raios elípticos, escolha entre predefinições e copie o código CSS — tudo com uma pré-visualização ao vivo. Como Usar Escolha o modo simples para definir todos os cantos de uma vez ou mude para o modo avançado para controle individual dos cantos. Habilite ...
Experimente a ferramenta »Verificador de Contraste WCAG Verifique as relações de contraste de cores para conformidade de acessibilidade na web. Verifique se suas combinações de cores de texto e plano de fundo atendem aos padrões WCAG AA e AAA para garantir que seu conteúdo seja legível para todos os usuários, incluindo aqueles com deficiências visuais. Como Usar Insira uma cor de primeiro plano (texto) e uma cor de plano de fundo usando os seletores de cores ou ...
Experimente a ferramenta »Adicione ferramentas de IO ao seu navegador favorito para acesso instantâneo e pesquisa mais rápida
Placar é uma forma divertida de acompanhar seus jogos, todos os dados são armazenados em seu navegador. Mais recursos serão lançados em breve!
Atualizar: Nosso ferramenta mais recente foi adicionado em 5 de maio de 2026
Ajude-nos a continuar fornecendo ferramentas gratuitas valiosas
