Artigo
Ferramentas de cor para a web: hex, paletas e acessibilidade
Escolher cores para um site parece simples até você se deparar com códigos hex, trios RGB e ângulos HSL que descrevem a mesma coisa de maneiras diferentes. Este artigo explica como esses formatos se relacionam, como transformar uma única cor de marca em uma paleta utilizável e como garantir que o resultado continue legível para quem enxerga a cor de outro jeito.
Hex, RGB e HSL descrevem a mesma cor
Uma cor na tela é misturada a partir de luz vermelha, verde e azul. A notação hex escreve esses três canais como um código de seis caracteres, por exemplo #2563eb, em que cada par de caracteres é um canal de 00 a ff. O RGB escreve os mesmos três números em decimal, de 0 a 255, o que é mais fácil de ler mas não acrescenta nada. O HSL adota outra abordagem: descreve uma cor pela sua matiz (uma posição na roda de cores de 0 a 360 graus), sua saturação (o quanto ela é viva) e sua luminosidade (o quanto está próxima do branco ou do preto). O HSL é o formato a que os designers recorrem quando querem ajustar uma cor, porque aumentar a luminosidade ou deslocar a matiz é uma única mudança intuitiva em vez de três números acoplados. Um conversor permite alternar entre os três, de modo que você pode ler um valor em um formato e usá-lo em outro.
Transformar uma cor em uma paleta
Uma única cor de marca raramente basta. Uma paleta que funciona costuma precisar de uma cor principal, de um ou dois acentos e de um conjunto de cinzas neutros para o texto e os fundos. As relações entre as cores seguem regras simples na roda de cores: as cores complementares ficam uma de frente para a outra, as cores análogas ficam lado a lado para um efeito tranquilo e um conjunto triádico distribui três cores de forma uniforme para ter contraste sem conflito. Uma ferramenta de esquemas de cor aplica essas regras à sua cor de partida e fornece os códigos hex correspondentes, assim você não precisa calcular os ângulos à mão. Se você já tem uma imagem cujo clima agrada, um extrator de paletas lê dela as cores dominantes, um jeito rápido de basear um site em uma foto ou em um logotipo.
Contraste e daltonismo
Uma paleta que parece boa na sua tela ainda pode falhar para alguns leitores. Cerca de um em cada doze homens e uma em cada duzentas mulheres têm alguma forma de deficiência na visão das cores, sendo a mais comum a dificuldade de separar o vermelho do verde. Se o seu único sinal de um erro é um texto vermelho sobre um botão verde, esses leitores não o percebem. A solução não é evitar a cor, mas nunca depender só dela: combine-a com um ícone, um rótulo ou uma forma e mantenha contraste de luminosidade suficiente entre o texto e o seu fundo. Um simulador de daltonismo mostra como a sua paleta aparece nos tipos comuns de visão das cores, para que você detecte um problema antes de publicar em vez de depois de uma reclamação.
Fazer tudo isso no navegador
Nenhuma dessas etapas precisa de um servidor. Converter um código hex, gerar um esquema, ler as cores de uma imagem e simular o daltonismo são todos cálculos pequenos que um navegador resolve na hora. Isso importa quando a imagem que você está amostrando é um design não publicado ou o logotipo de um cliente: com as ferramentas daqui, o arquivo permanece no seu dispositivo e nada é enviado. Você obtém o mesmo resultado que teria de um serviço on-line, sem entregar o material gráfico. O conversor de cor, o gerador de esquemas de cor, o extrator de paletas e o simulador de daltonismo rodam todos localmente e funcionam do mesmo modo off-line depois que a página carrega.
OKLCH e espaços de cores mais amplos
Hex, RGB e HSL descrevem cores dentro do gamut sRGB que as telas usam há anos. Monitores mais novos exibem mais, e o CSS agora consegue acessar isso com a função color() e o espaço Display P3, que adiciona verdes e vermelhos vivos que o sRGB não consegue representar. A mudança mais importante é o OKLCH, uma forma de escrever cores em termos de luminosidade, croma e matiz que acompanha como o olho realmente percebe o brilho. No HSL, um amarelo e um azul com o mesmo valor de 50% de luminosidade parecem completamente diferentes: o amarelo aparece claro, o azul aparece escuro. No OKLCH, manter a luminosidade fixa e alterar apenas o matiz conserva o brilho percebido constante. Isso torna prático construir uma paleta em que cada tom atinge o mesmo alvo de contraste travando um único número, em vez de ajustar cada cor manualmente.
Ferramentas neste artigo
- Conversor de CoresConverta cores entre HEX, RGB, HSL, HSV e CMYK. Verificador de contraste WCAG incluído. Sem upload.
- Gerador de Esquema de CoresGere paletas complementares, análogas, triádicas, tetrádicas e monocromáticas a partir de uma cor base. Sem upload.
- Extrator de paleta de coresExtraia as cores dominantes de uma imagem como amostras HEX. Copie qualquer cor. Sem upload.
- Simulador de daltonismoSimule protanopia, deuteranopia, tritanopia e acromatopsia em uma imagem. Sem upload.
Perguntas frequentes
Qual é a diferença entre hex e RGB?
São duas formas de escrever a mesma cor. O hex agrupa os canais vermelho, verde e azul em um código de seis caracteres na base 16, enquanto o RGB lista esses mesmos três canais como números decimais de 0 a 255. #ff0000 e rgb(255, 0, 0) são o mesmo vermelho. O hex é compacto e comum no CSS e nos arquivos de design, o RGB é mais fácil de ler de relance, e converter de um para o outro não muda nada na cor em si.
Como sei se minhas cores são legíveis para usuários daltônicos?
Passe a sua paleta por um simulador de daltonismo, que redesenha as suas cores como alguém com cada tipo comum de visão das cores as veria. Fique atento a pares que se fundem na mesma tonalidade, em especial os vermelhos e os verdes. O hábito mais seguro é nunca usar a cor como única pista: reforce-a com texto, um ícone ou um padrão, e mantenha uma diferença de luminosidade clara entre o primeiro plano e o fundo, para que o significado sobreviva mesmo quando a matiz não sobreviver.