Hub de Conversores de Cor

1. 1

   Escolher o conversor

   Abra a ferramenta de que você precisa (ex.: RGB para HEX).

2. 2

   Inserir valores

   Digite números ou use o seletor.

3. 3

   Obter o resultado

   A pré-visualização e os valores atualizam na hora; copie o que usar.

Doze formatos descrevem a mesma cor de maneiras diferentes, e cada um existe porque responde a uma pergunta que os outros respondem mal. Eis para que serve cada um.

Unificar formatos, manter consistência entre web e impressão e mover cores entre aplicações sem erros manuais.

Benefícios

• Compatibilidade: ajuste o formato à plataforma
• Consistência: a mesma tonalidade em vários meios
• Fluxo de design: menos atrito entre ferramentas
• Vários formatos: RGB, HEX, HSL, CMYK
• Ao vivo: veja o resultado ao alterar valores

Cobre formatos comuns em web, design gráfico e impressão.

• RGB para HEXConverter RGB para hexadecimal
• HEX para RGBConverter códigos hex em RGB
• RGB para HSLConverter RGB para HSL
• HSL para RGBConverter HSL para RGB
• RGB para CMYKConverter RGB para CMYK para impressão
• Seletor de corSeletor interativo com conversão ao vivo

Se você só usou HEX e HSL, o OKLCH é o único formato desta página que vale a pena aprender. Resolve um problema que todo sistema de design enfrenta e que a maioria das pessoas contorna à mão.

• Clarear mantém o matiz — aumente a luminosidade de um azul em HSL e ele deriva para o roxo; faça isso em OKLCH e continua azul. É precisamente esse o propósito de um espaço perceptualmente uniforme.
• Passos iguais parecem iguais — uma paleta construída variando a luminosidade OKLCH em incrementos regulares se lê como uma rampa uniforme. Os mesmos incrementos em HSL produzem uma rampa concentrada numa das pontas.
• Um só número para a saturação — o croma é um valor único que significa o mesmo em qualquer matiz, por isso «a mesma intensidade em outra cor» passa a ser mudar um número em vez de adivinhar.
• Alcança cores que o sRGB não tem — o OKLCH consegue descrever cores além de uma tela comum. Esta ferramenta avisa quando isso acontece e dá a cor mais próxima que a tela consegue mostrar.

Cole acima qualquer código HEX e leia a linha OKLCH para ver onde estão as suas cores atuais. Para migrar uma paleta inteira de uma vez, use o modo de arquivo inteiro descrito abaixo.

Converter uma cor é a metade fácil. Passar um projeto de HEX para OKLCH, ou extrair todas as cores de um arquivo de design para verificá-las, significa mexer em centenas de valores — e é aí que todos os outros conversores de cor param.

• Reescreve, não regenera — o arquivo devolvido é o que você entregou, apenas com os valores de cor alterados. Comentários, espaçamento, minificação, fins de linha e tudo o que o leitor não reconheceu passam byte a byte.
• Lê sete tipos de arquivo — CSS, SCSS, SASS, LESS, JSON, SVG e texto simples. Em SVG e JSON todas as cores vivem entre aspas, e também são encontradas.
• Os nomes de cor são opcionais — tan, plum, salmon e red são palavras inglesas comuns. Reconhecê-las é um interruptor que você liga, porque deixá-lo ligado num arquivo de texto reescreveria a prosa.
• Sabe o que não é uma cor — #ff00001 tem dígitos a mais, tangerine não é tan, e --tan-100 é um nome de variável. Nenhum é tocado.

O plano gratuito converte 200 cores por vez, o que cobre a paleta principal de um sistema de design. O Pro remove o limite, aceita até 25 arquivos e os devolve num único arquivo.

Uma cor só é utilizável se o texto por cima dela puder ser lido. O painel de contraste mede a sua cor contra branco, contra preto e contra qualquer segunda cor, e verifica cada resultado com os limiares das WCAG.

• 4,5:1 é o requisito AA para texto normal, e a referência usada pela maioria das auditorias.
• 3:1 chega para texto grande — 18,66px em negrito ou 24px normal em diante — e para componentes de interface e gráficos.
• 7:1 é AAA para texto normal, uma melhoria real de legibilidade e não uma formalidade, sobretudo em leituras longas.
• O contraste depende apenas da luminosidade, por isso mudar o matiz de uma cor que falha não a salva. É por isso que a correção sugerida move a luminosidade e mantém o matiz que você escolheu.

Quando um par falha, a ferramenta procura para o mais claro e para o mais escuro a menor alteração que passa, e mostra o resultado em vez de deixar você adivinhando.

Cerca de um homem em cada doze e uma mulher em cada duzentas tem alguma forma de deficiência de visão da cor. A faixa de simulação mostra a sua cor tal como aparece com cada um dos tipos comuns, para você verificar se duas cores de uma paleta continuam distinguíveis em vez de se confundirem.

• Protanopia e deuteranopia — os tipos vermelho–verde, e de longe os mais frequentes. Os vermelhos escurecem e verdes e vermelhos convergem: por isso um indicador vermelho/verde de certo ou errado é a falha de acessibilidade clássica.
• Tritanopia — rara, afeta o eixo azul–amarelo. Azuis e verdes convergem e os amarelos podem parecer rosados.
• Sem visão da cor — ainda mais rara, e um caso extremo útil: se um design funciona na linha em tons de cinza, funciona para todo mundo.

A simulação modela a ausência completa de um tipo de cone. A deficiência parcial é mais comum e fica entre a vista simulada e a visão típica — trate por isso como merecedor de alteração qualquer par que sobreviva à simulação por pouco.

Ajudamos a mudar entre formatos com rapidez. Tudo é processado no dispositivo para manter os seus dados privados.

Ferramentas disponíveis:

• RGB para HEX: valores RGB em hexadecimal
• HEX para RGB: códigos hex em canais RGB
• RGB para HSL: RGB em matiz, saturação e luminosidade
• HSL para RGB: HSL em RGB para telas
• RGB para CMYK: preparação para impressão em CMYK
• Seletor: escolha uma cor e veja todos os formatos

Escolha o cartão de que precisa e comece já.

Ao mudar de software, preparar CSS, validar marca web/impressão ou documentar paletas.

Casos frequentes

• Desenvolvimento web: CSS e HTML
• Design: alternar entre apps
• Impressão: aproximar RGB de especificações CMYK
• Matching: comparar com referências
• Design systems: tokens e escalas coerentes
• Modernizar uma paleta: Passe uma folha de estilos de HEX para OKLCH numa única passagem

Contexto rápido sobre modelos de cor.

Pontos-chave

• RGB é aditivo (telas)
• CMYK é subtrativo (tinta)
• HEX comprime a mesma informação que RGB
• HSL facilita matizar tom e saturação
• Conversões matemáticas não perdem precisão no mesmo espaço
• O CSS define 148 palavras-chave de cor, contando as grafias gray e grey
• Uma tela sRGB comum mostra cerca de 16,7 milhões de cores; LAB e OKLAB descrevem muitas mais

Para resultados confiáveis.

Qualidade

• Verifique com guias de marca
• Teste na tela e, se aplicável, em prova de impressão
• Lembre-se das diferenças de gama RGB ↔ CMYK
• Escolha o formato conforme o destino
• Revise cores críticas duas vezes
• Construa paletas em OKLCH para que os passos de luminosidade pareçam uniformes e converta para HEX se precisar de suporte antigo

Quando não forçar a conversão

• Se o destino já aceita o seu formato original
• Se uma cor está fora da gama de saída sem prova
• Se precisa de verificação física e só confia no monitor
• Se a plataforma não suporta o formato pretendido
• Não converta um nome de cor dentro de texto corrido — deixe a detecção de palavras-chave desligada para arquivos de texto simples

Requerem dispositivo moderno com JavaScript; a impressão real depende do papel e do perfil.

Com algoritmos otimizados de processamento de imagem.

• RGB para HEX
• HEX para RGB
• RGB para HSL
• HSL para RGB
• RGB para CMYK
• Seletor de cor
• Paleta a partir de uma imagem
• Analisador de cor de imagens
• Gradação de cor
• Hora e data
• Divisor de texto
• Formatador JSON
• Conversor de imagens
• Codificador Base64