Ferramentas de Cores Online para Design
Trabalhar com cor tem duas metades: escolher os valores e provar que eles funcionam. Aqui as duas estão cobertas — seletor de cores, criação de paletas, gradientes e conversão entre HEX, RGB e HSL, além de verificadores que mostram a razão de contraste real. A segunda metade é a mais útil: uma combinação em 4,4 para 1 reprova no WCAG AA para texto corrido, e é bem melhor descobrir isso aqui do que numa revisão.
Ferramentas desta categoria
- Conversor de HEX para RGB Converta códigos de cor HEX para valores RGB instantaneamente no navegador.
- Conversor de RGB para HEX Converta valores de cor RGB e RGBA para códigos HEX instantaneamente no navegador.
- Conversor de RGB para HSL Converta valores de cor RGB e RGBA para códigos HSL instantaneamente no navegador.
- Conversor de HSL para RGB Converta valores de cor HSL e HSLA para códigos RGB instantaneamente no navegador.
- Conversor de HEX para HSL Converta códigos de cor HEX para valores HSL instantaneamente no navegador.
- Conversor de HSL para HEX Converta valores de cor HSL e HSLA para códigos HEX instantaneamente no seu navegador.
- Gerador de Gradiente CSS Crie gradientes CSS lineares e radiais com pré-visualização ao vivo e copie o código.
- Gerador Avançado de Gradiente CSS Crie gradientes CSS lineares, radiais e cônicos com múltiplas paradas de cor ilimitadas, presets e pré-visualização ao vivo.
- Gerador de Box Shadow CSS Crie sombras CSS (box-shadow) visualmente com preview ao vivo e controles de deslocamento, desfoque, espalhamento, cor, opacidade e inset.
- Gerador de Border Radius CSS Gere border-radius CSS visualmente com preview ao vivo, controles por canto, opção de unificar os cantos e unidades em px ou porcentagem.
- Gerador de CSS Clamp Gere um valor clamp() fluido e responsivo em CSS a partir de um tamanho mínimo e máximo e suas viewports, com unidades px ou rem e prévia ao vivo da fórmula.
- Gerador de Cores Tailwind Gere uma escala completa de cores do Tailwind CSS (50–950) a partir de qualquer cor base, com amostras ao vivo e saída pronta para copiar no formato @theme do Tailwind v4 ou na config do v3.
- Verificador de Contraste de Cores Verifique a razão de contraste WCAG entre duas cores e veja se elas atingem os níveis de acessibilidade AA e AAA.
- Verificador de Cores Acessíveis Verifique se as cores do texto e do fundo são acessíveis e receba sugestões de cores compatíveis com WCAG que passam em AA ou AAA quando falham.
- Gerador de Paleta de Cores Gere paletas de cores bonitas a partir de qualquer cor base usando regras de harmonia — complementar, análoga, tríade, tétrade, monocromática e tons — com amostras ao vivo e variáveis CSS prontas para copiar.
- Gerador de Cores Aleatórias Gere uma ou várias cores aleatórias de uma vez em HEX, RGB e HSL. Trave as cores que gostar, gere novamente o restante e copie qualquer cor ou o lote inteiro — tudo no seu navegador.
- Gerador de Cores Material Gere uma paleta completa do Material Design a partir de qualquer cor base, com todos os tons primários (50–900), cores de destaque (A100–A700), amostras ao vivo e saída pronta para copiar em CSS, SCSS ou JSON.
- Gerador de Favicon Transforme qualquer imagem em PNGs de favicon em todos os tamanhos necessários.
- Gerador de Placeholder SVG Gere imagens placeholder em SVG leves com tamanho, cores e texto personalizados. Copie o código SVG ou o data URI, ou baixe o arquivo.
- Gerador de Filtros CSS Crie efeitos de filtro CSS visualmente com pré-visualização ao vivo e controles deslizantes para desfoque, brilho, contraste, escala de cinza, rotação de matiz, inversão, opacidade, saturação e sépia.