Conversor de cores

O conversor suporta HEX (3 dígitos, 6 dígitos e 8 dígitos com alfa), RGB e RGBA (sintaxe de vírgula ou espaço), HSL e HSLA, OKLCH e qualquer CSS cor nomeada como cornflowerblue, rebeccapurple ou tomate. O formato é detectado automaticamente conforme você digita, então você pode colar qualquer um deles diretamente no campo de entrada sem selecionar um modo primeiro.

OKLCH é um espaço de cores polares perceptualmente uniforme definido por luminosidade (L), croma (C) e matiz (H). Ao contrário do HSL, onde cores com valores de luminosidade idênticos podem parecer visualmente muito diferentes no brilho percebido, o OKLCH usa um modelo subjacente que corresponde melhor à forma como a visão humana percebe as diferenças de cores. Isso o torna ideal para gerar programaticamente escalas de cores acessíveis, paletas de botões consistentes e tokens de design. CSS oferece suporte nativo a oklch() em todos os navegadores modernos a partir de 2023, e os principais sistemas de design o adotaram para essa precisão. Você pode emparelhar valores OKLCH diretamente com CSS Gradient Generator para gradientes perceptualmente suaves.

A taxa de contraste usa a fórmula WCAG 2.1: (L1 + 0,05) / (L2 + 0,05), onde L1 é a luminância relativa da cor mais clara e L2 é a luminância relativa da cor mais escura. A luminância relativa é calculada a partir de valores de canal sRGB linearizados ponderados como 0,2126 R + 0,7152 G + 0,0722 B. A ferramenta verifica sua cor em relação ao branco puro (255, 255, 255) e quase preto (15, 23, 42) e exibe a proporção junto com a nota WCAG para texto normal e grande.

WCAG 2.1 define dois níveis de conformidade para contraste de texto. Nível AA requer uma proporção de pelo menos 4,5:1 para texto normal e 3:1 para texto grande (18pt+ ou 14pt+ negrito). Nível AAA requer 7:1 para texto normal e 4,5:1 para texto grande. AA é o mínimo legal em muitos regulamentos de acessibilidade, incluindo EN 301 549 e Seção 508. AAA é recomendado para documentos ou interfaces onde a legibilidade máxima é importante, como conteúdo médico ou jurídico.

A paleta converte sua cor para o espaço HSL e, em seguida, gera cinco tonalidades interpolando a luminosidade em direção a 95% (próximo ao branco) e cinco tonalidades interpolando em direção a 5% (próximo ao preto), mantendo o matiz e a saturação constantes. O resultado é uma faixa de 11 amostras: 5 tonalidades, sua cor base (delineada na paleta) e 5 tonalidades. Clicar em qualquer amostra carrega imediatamente essa cor na entrada para conversão adicional ou inspeção WCAG.

Não. Todos os cálculos de análise de cores, matemática de conversão e WCAG são executados inteiramente em seu navegador usando JavaScript. PureTools não possui endpoint de servidor para esta ferramenta e nunca recebe as cores inseridas. A última cor que você digitou é salva em sessionStorage sob uma chave com namespace para que persista na atualização, mas sessionStorage é automaticamente limpo quando você fecha a guia, então os dados são apagados quando você fecha a guia. Nada é carregado ou armazenado remotamente. Seus dados nunca são usados para treinar modelos de IA ou melhorar sistemas de aprendizado de máquina.

Sim. Figma normalmente copia cores como HEX, HSL ou RGB. Os DevTools do navegador copiam cores como hexadecimal, rgb() ou hsl(). Todos estes são aceitos diretamente. Se você copiar um valor oklch() de um arquivo CSS ou de um token de design JSON, isso também será suportado. A ferramenta detecta automaticamente o formato da string colada, portanto você não precisa selecionar nada antes de colar. Você também pode usar o JSON Formatter para extrair valores de cores dos arquivos de token de design JSON antes de colá-los aqui.

Tanto HSL (Matiz, Saturação, Luminosidade) e HSV (Matiz, Saturação, Valor) representam cores usando um ângulo de matiz e dois eixos relativos, mas definem o terceiro eixo de forma diferente. No HSL, uma luminosidade de 50% com saturação máxima dá a tonalidade pura. No HSV, um valor de 100% com saturação máxima também fornece a tonalidade pura, mas o valor é conceitualmente mais próximo do brilho percebido. O HSL mapeia de forma mais intuitiva a forma como os designers pensam sobre matizes e sombras, enquanto o HSV é comumente usado em rodas de seleção de cores e aplicativos de edição de imagens.

sRGB e OKLCH cobrem gamas semelhantes, mas não idênticas. Quando você converte sRGB em OKLCH, os valores são matematicamente exatos. Ao converter de volta, o arredondamento de ponto flutuante nas multiplicações de matrizes intermediárias e a etapa de raiz cúbica podem produzir valores de canal que estão 0 ou 1 fora do intervalo de números inteiros de 0 a 255, uma diferença que é visualmente imperceptível. Se sua entrada usar um valor OKLCH de croma muito alto que esteja fora da gama sRGB, a ferramenta fixa o canal de saída ao valor sRGB válido mais próximo em vez de produzir CSS inválido.

O seletor de cores nativo do navegador (input type="color") sempre armazena seu valor como hexadecimal. Sempre que você digita uma cor válida no campo de texto em qualquer formato, a ferramenta a converte em hexadecimal e atualiza o valor do seletor programaticamente. Por outro lado, escolher uma cor na amostra grava seu valor hexadecimal no campo de texto. Esta sincronização bidirecional significa que você pode usar o seletor visual para exploração e o campo de texto para precisão, e ambos sempre refletem a mesma cor.

Sim, na mesma sessão do navegador. A ferramenta salva a última entrada válida em sessionStorage para que persista na atualização. Ao fechar a aba, sessionStorage é limpo automaticamente pelo navegador, então a cor é apagada e seus dados permanecem apenas no seu dispositivo. A ferramenta não utiliza localStorage para dados de cores, apenas a preferência do tema é armazenada lá.

Não. Conversor de cores mantém arquivos, valores e resultados temporários no seu dispositivo. PureTools não tem banco de dados backend para guardar essas entradas e não as envia para um servidor de processamento. Os dados da ferramenta podem existir em memória ou sessionStorage durante a aba ativa e são apagados quando você fecha a aba ou redefine a página.

Conversor de cores executa cálculos e processamento diretamente no navegador com JavaScript do lado do cliente. A ferramenta lê suas entradas, aplica opções visíveis como Converter HEX, RGB, HSL, HSV e OKLCH em um passo e atualiza o resultado sem enviar arquivos ou valores para um servidor. Esse funcionamento mantém a sessão local, reduz etapas desnecessárias e permite reabrir a página quando os recursos ficam em cache depois do primeiro carregamento.

Quando você fecha a aba, os valores temporários usados por Conversor de cores desaparecem com a sessão do navegador. Preferências gerais como o tema podem ficar em localStorage, mas arquivos, resultados e conteúdo inserido na ferramenta não são salvos como histórico de longo prazo. Essa separação mantém a experiência prática sem criar um rastro duradouro dos seus dados.