Ferramentas de cor
Estas ferramentas de cor convertem, comparam e geram cores no seu navegador usando as fórmulas reais da ciência da cor, não aproximações: a função de transferência verdadeira do sRGB, a luminância relativa do WCAG 2.x, o OKLab para tudo que é perceptual e as matrizes de Machado para deficiência na visão de cores. Nada é enviado para lugar nenhum, e todo número mostrado pode ser conferido à mão.
Escolher
Validar
Converter
Converter cores
HEX, RGB, HSL, HSV, OKLCH e CMYK nos dois sentidos
Abrir ferramentaConverter HEX em RGB
Transforma hex em rgb(), inclusive o alfa do hex de 8 dígitos
Abrir ferramentaConverter RGB em HEX
Transforma rgb() ou rgba() em hex de 3, 6 ou 8 dígitos
Abrir ferramentaConverter HEX em HSL
Transforma hex em matiz, saturação e luminosidade
Abrir ferramentaConverter HSL em HEX
Transforma matiz, saturação e luminosidade em hex
Abrir ferramentaConverter RGB em HSL
Transforma valores rgb() em matiz, saturação e luminosidade
Abrir ferramenta
Gerar
Gerar gradiente CSS
Cria gradiente linear ou radial e copia o CSS pronto
Abrir ferramentaGerador de gradiente mesh
Fundo fluido com quatro manchas de cor, em CSS, Tailwind ou PNG
Abrir ferramentaGerador de glassmorphism
Vidro fosco com desfoque, tonalidade e brilho; CSS ou Tailwind
Abrir ferramentaGerador de sombras CSS
Sombras em camadas e brilhos, em CSS ou classe do Tailwind
Abrir ferramenta
Quando usar uma ferramenta de cor que roda no navegador?
Ferramentas de cor têm um modo de falha incomum. Uma ferramenta de PDF quebrada produz um PDF quebrado e você descobre na hora. Uma ferramenta de cor que está silenciosamente errada produz um número plausível, você cola em uma folha de estilo, e nada avisa — nem o navegador, nem o build, nem a revisão — até que alguém com baixa visão não consiga ler o seu botão, ou até que o azul da marca chegue um tom deslocado no folheto impresso.
Os erros são específicos e se repetem. Elevar um canal à potência de 2.2 em vez de usar a verdadeira função de transferência por trechos do sRGB, o que desloca levemente cada razão de contraste e inverte os casos de fronteira. Pular o módulo na fórmula da matiz, de modo que um sexto do espaço de cores reporta um ângulo negativo. Compor um primeiro plano semitransparente sobre nada e reportar uma razão de contraste para uma cor que nunca aparece na tela. Gerar uma paleta caminhando pela luminosidade do HSL. Cada um deles produz uma saída que parece inteiramente razoável.
Por isso a aritmética daqui segue as especificações, e não as aproximações que circulam. O contraste é a luminância relativa do WCAG 2.x com a função por trechos, calculada depois que o alfa é composto sobre o fundo real. Tudo que é perceptual — escalas, mistura, gradientes, a cor aprovada mais próxima — roda no OKLab, a revisão de 2020 da ideia do Lab que finalmente corrigiu o desvio de matiz no azul que os espaços mais antigos tinham. A simulação de daltonismo usa as matrizes de Machado, Oliveira e Fernandes aplicadas ao RGB linear, não aos valores codificados em gama — é a diferença entre uma simulação e uma mancha de cor.
As ferramentas também se recusam a adivinhar. Um hex de cinco dígitos é um erro de digitação, não uma cor, e é rejeitado em vez de ser completado até virar algo plausível; um conversor que devolve preto em silêncio diante de uma entrada ruim entrega uma amostra da qual você não tem motivo para desconfiar. Onde uma conversão realmente não pode ser exata — CMYK sem o perfil da gráfica, uma coordenada OKLCH fora da gama do sRGB — a página diz isso em vez de imprimir o número com a mesma confiança dos exatos.
Nada disso precisa de um servidor. Conversão de cor são algumas dezenas de linhas de aritmética sobre três números; uma simulação de imagem é um loop sobre um canvas que o seu navegador já tem. A Content-Security-Policy do site define connect-src 'self', então uma paleta da marca ou um screenshot inédito solto no simulador não sai da aba, nem que algo aqui tentasse enviá-lo.
Por onde começar: Escolher cores para uma cor e toda a sua rampa, Verificar contraste quando um par precisa passar no AA, Converter cores para transitar entre formatos, Códigos de cores para consultar o hex de uma cor com nome, e Testar daltonismo para ver como a sua interface fica para cerca de um homem em cada doze que não vê o vermelho e o verde como você.
Perguntas frequentes
Qual formato de cor devo realmente usar no CSS?
Hex para um valor que você digita uma vez e nunca mais toca — é compacto, universalmente entendido e sem perdas. HSL quando uma pessoa vai editar à mão, porque “um pouco mais escuro” e “menos saturado” são mudanças de um único número ali. OKLCH quando um programa calcula a cor: uma escala gerada, um gradiente, um estado de hover interpolado. O OKLCH é o único dos três cujo número de luminosidade corresponde ao que o olho reporta, então números igualmente espaçados ficam com aparência igualmente espaçada.
Por que duas ferramentas me dão valores HSL diferentes para o mesmo hex?
Quase sempre é arredondamento, não divergência. O HSL como normalmente é escrito — matiz em número inteiro e décimos de porcentagem — guarda menos valores distintos que os 16,7 milhões que um hex pode expressar, então vários valores hex colapsam no mesmo HSL e a conversão de volta cai no valor que a fórmula produzir. Onde as ferramentas realmente divergem é em como reportam um cinza: a matiz de uma cor com croma zero é indefinida, e algumas imprimem 0 enquanto outras imprimem o que a aritmética deu.
A razão de contraste daqui é a mesma que o Lighthouse usa?
Sim. É a fórmula do WCAG 2.x: linearize cada canal com a função de transferência por trechos do sRGB, pondere-os com 0.2126, 0.7152 e 0.0722, some 0.05 às duas luminâncias e divida a maior pela menor. O erro mais comum em uma implementação caseira é elevar os canais à potência de 2.2 — chega perto, mas desloca a razão o suficiente para virar um par de fronteira de aprovado para reprovado. O número APCA mostrado ao lado é um modelo completamente diferente e é informativo, não um padrão com o qual você possa declarar conformidade.
Posso confiar em números CMYK de uma ferramenta web para impressão?
Como ponto de partida, não como especificação. CMYK depende do dispositivo: a mesma cor sRGB vira porcentagens de tinta diferentes no papel couché e no papel não couché, e diferentes de novo em outra gráfica com outras tintas. É isso que um perfil ICC codifica, e nenhuma página web tem um para a sua impressora. Envie à gráfica a referência sRGB ou Pantone e deixe que ela converta com o perfil do trabalho.
Qual é a precisão de um teste de daltonismo online?
É uma indicação de triagem, não um diagnóstico. Um resultado clínico vem de um anomascópio, sob iluminação controlada e em uma tela calibrada, e nenhuma dessas condições vale na sua mesa. O que um teste online pode fazer honestamente é dizer se você lê as mesmas figuras que alguém com visão de cores típica, o que já basta para valer um acompanhamento. As pranchas daqui são geradas a partir de pares de confusão encontrados por simulação, em vez de digitalizadas de um conjunto de pranchas protegido por direitos autorais — o que elimina a maior fonte de erro da versão online usual: um JPEG de uma impressão de 1917, recomprimido, com a precisão de cor que o scanner tinha.
Por que os tons claros e escuros daqui parecem mais uniformes do que os que consigo em outros lugares?
Porque eles são gerados no OKLCh, e não caminhando pela luminosidade do HSL. O HSL pesa os três canais igualmente, enquanto a visão humana pesa o verde cerca de dez vezes mais que o azul, então uma rampa construída sobre ele parece clara nos amarelos e escura nos azuis com números idênticos. Caminhar pela luminosidade do OKLCh em uma curva, mantendo a matiz e afinando o croma nas duas pontas, produz degraus que parecem tão uniformes quanto medem — e cada parada volta para dentro da gama do sRGB, então nenhuma delas aparece como uma cor achatada, cortada.
O que mais existe no ToolsByUs?
- Ferramentas de PDFJunte, divida, gire e converta PDFs sem enviá-los.
- Ferramentas de imagemComprima, redimensione e converta imagens no navegador.
- Ferramentas de vídeoEdite vídeos no navegador, sem upload nem marca d'água.
- Ferramentas de áudioCorte, converta e trabalhe com áudio no navegador.
- Ferramentas para criadoresRedimensione e otimize banners, avatares, emotes e capas para cada plataforma.
- Ferramentas JSONCompare, formate, valide e explore documentos JSON.
- Ferramentas de textoCompare, converta e transforme texto simples e código.
- Ferramentas de codificaçãoBase64, codificação de URL, hashes e inspeção de tokens.
- GeradoresIdentificadores, texto de preenchimento e códigos.