Ferramentas de cores gratuitas

Sobre nossas ferramentas de cor

O Absolutool inclui 7 ferramentas de cor especializadas para designers, desenvolvedores e profissionais de acessibilidade. Converta entre os formatos HEX, RGB, HSL e HSB. Gere paletas harmoniosas usando teoria das cores. Verifique as taxas de contraste WCAG para garantir que seus designs sejam acessíveis a todos.

O simulador de daltonismo usa matrizes de pesquisa Brettel/Viénot para modelar com precisão 8 tipos de deficiência da visão das cores · envie uma imagem ou teste cores individuais. Use o gerador de tonalidades para tokens de design system, o misturador de cores para misturas precisas e o seletor de cor de imagem para extrair cores de qualquer foto. Todas as ferramentas rodam totalmente no seu navegador.

Os modelos de cor na web

Cada pixel de uma página web moderna é descrito por um valor de cor que o navegador interpreta e pede à GPU para renderizar. Os dois formatos que você verá com mais frequência são o HEX (um trio hexadecimal de seis dígitos como #3b82f6) e o RGB (valores decimais como rgb(59 130 246)). Ambos descrevem a mesma coisa: quanta luz vermelha, verde e azul misturar numa tela que usa cor aditiva. Uma tela padrão de 24 bits oferece 256 níveis por canal, o que significa que 16,78 milhões de cores únicas podem ser endereçadas. O HEX é mais curto, o RGB é mais fácil de calcular, e os dois são intercambiáveis.

O HSL (matiz, saturação, luminosidade) e o HSB (matiz, saturação, brilho) descrevem a mesma cor de tela, mas em coordenadas mais próximas de como nós, humanos, a percebemos. O matiz é a posição da cor na roda de cores, de 0° (vermelho) a 360°. A saturação indica o quão viva é a cor, do cinza ao puro. A luminosidade controla quanto branco ou preto é misturado. O HSL é o formato que os designers costumam escolher ao construir sistemas de design, porque ajustar um único canal produz uma mudança previsível, como escurecer um botão em 10% para o estado ao passar o cursor. O CSS suporta nativamente HEX, RGB, HSL e os mais recentes LCH e OKLCH.

Por trás de todos esses formatos há um espaço de cor, que define exatamente o que «vermelho 255» significa em termos físicos. O padrão da web é o sRGB, normalizado pela IEC em 1996 e a gama que quase todas as telas de computador e de telefone cobrem. Dispositivos Apple recentes, OLED e de ponta suportam o Display P3, uma gama mais ampla que adiciona cerca de 25% a mais de vermelhos e verdes saturados. O CSS agora permite escrever color(display-p3 1 0 0) para aproveitá-la. A maioria das ferramentas de cor deste site trabalha em sRGB e alcança todos os navegadores; o P3 amplia o que está disponível sem mudar o fluxo de trabalho.

Entendendo o contraste de cores da WCAG

As Diretrizes de Acessibilidade para Conteúdo Web (WCAG 2.1) definem limiares numéricos para o contraste entre o texto e seu fundo. O nível AA, o que a maioria das auditorias de acessibilidade busca, exige uma relação de pelo menos 4,5:1 para texto normal e 3:1 para texto grande (18 pt normal ou 14 pt em negrito e acima). O nível AAA aperta esses valores para 7:1 e 4,5:1. A relação é calculada a partir da luminância relativa de cada cor, um valor de brilho perceptual derivado das primárias sRGB pela fórmula IEC 61966-2-1. Duas cores que parecem «quase iguais» ainda podem passar, e duas cores que parecem totalmente diferentes podem falhar se uma for cinza sobre cinza.

Esses números importam porque cerca de 5% da população adulta mundial tem uma redução mensurável da sensibilidade ao contraste por catarata, glaucoma, retinopatia diabética ou alterações maculares relacionadas à idade. A luz forte do sol reduz o contraste efetivo para todos. As telas de celular vistas em ângulo o reduzem ainda mais. Os limiares da WCAG são projetados para manter o texto legível nessas condições reais, não em um monitor calibrado num escritório com pouca luz. Um algoritmo mais recente chamado APCA (o candidato a substituto que virá na WCAG 3.0) leva em conta coisas que a WCAG 2.x ignora, como o peso e a polaridade do texto. Por ora, o 4,5:1 AA continua sendo o padrão a que a maioria dos reguladores se refere.

O daltonismo e o design inclusivo

Cerca de 8% dos homens e 0,5% das mulheres de ascendência do norte da Europa têm alguma forma de deficiência da visão de cores vermelho-verde, e os números mundiais são de magnitude semelhante. Os três tipos mais comuns afetam como os cones da retina respondem a comprimentos de onda específicos. A deuteranomalia (a mais comum, cerca de 5% dos homens) reduz a sensibilidade à luz verde de comprimento de onda médio. A protanomalia reduz a sensibilidade à luz vermelha de comprimento de onda longo. A tritanomalia afeta a percepção azul-amarelo e é bem mais rara. Os simuladores deste site usam a derivação por matriz de cor de Brettel, Viénot e Mollon (1997), a referência padrão para essas transformações na ciência das cores.

A regra prática de design é «não dependa só da cor». Um ícone de erro vermelho e um ícone de sucesso verde parecem idênticos para muitos usuários com deuteranomalia. Adicionar uma forma diferente (uma cruz em vez de uma marca de seleção), um rótulo («Erro» ou «Sucesso») ou um padrão resolve isso sem custo algum para os demais usuários. Os designs de gráficos e painéis são os infratores mais frequentes, porque as legendas costumam depender de uma amostra de cor. O simulador de daltonismo deste site permite pré-visualizar uma captura de tela real através de cada deficiência comum antes de publicar, para que você detecte os elementos que teriam falhado em produção.

Teoria das cores para paletas

A roda de cores organiza os matizes pelo seu ângulo em torno do círculo: vermelho a 0°, amarelo a 60°, verde a 120°, ciano a 180°, azul a 240°, magenta a 300°. As cores complementares ficam diretamente opostas entre si (vermelho e ciano, azul e laranja) e produzem o contraste mais forte. As paletas análogas usam de dois a quatro matizes vizinhos na roda e parecem calmas e unificadas, muito adequadas para fundos e gradientes. As paletas triádicas usam três matizes igualmente espaçados a 120°, trazendo equilíbrio com variedade. As paletas tetrádicas usam quatro matizes formando um retângulo. Essas regras surgiram dos manuais de artistas do século XIX, mas combinam com o que a pesquisa perceptual confirmou desde então.

Um sistema de marca típico precisa de cerca de cinco cores: uma cor de marca principal, uma cor de destaque (muitas vezes complementar), um cinza neutro, mais um verde de sucesso e um vermelho de erro. O gerador de paletas deste site escolhe primeiro a harmonia e depois oferece escalas de tons claros e escuros de 10 passos para cada cor escolhida, a mesma estrutura que sistemas de design como Tailwind, Material e Carbon usam. A ferramenta de paleta acessível limita a geração a combinações que cumprem o contraste WCAG AA sobre um fundo branco ou escuro. Ambas as ferramentas funcionam inteiramente no seu navegador, então as cores que você escolhe para uma marca ainda não lançada nunca são enviadas para lugar nenhum.

Perguntas frequentes