Conversor de Cores: HEX, RGB, HSL, CMYK

O que é o Color Converter?

Color Converter é uma ferramenta gratuita online que converte instantaneamente qualquer cor entre os cinco formatos de cor mais comuns: HEX, RGB, HSL, HSB (HSV) e CMYK. Cole ou digite um valor de cor em qualquer formato suportado e a ferramenta detecta automaticamente o que você digitou e exibe todas as outras representações simultaneamente em tempo real. Ela resolve a fricção cotidiana de alternar entre um valor HEX do Figma e uma função CSS HSL, ou traduzir valores RGB de tela para porcentagens CMYK de impressão — sem copiar valores em uma calculadora. Toda a conversão acontece localmente no navegador sem necessidade de servidor.

Funcionalidades principais

• Converter entre HEX, RGB, HSL, HSB e CMYK — os cinco formatos são exibidos simultaneamente no momento em que uma cor válida é inserida. O código usa um hook useColorConversion que mantém os objetos de estado hex, rgb, hsl, hsb e cmyk sincronizados.
• Detecção automática de formato — a área de texto detecta HEX (valores que começam com # ou que correspondem a /^[0-9a-f]{3,8}$/i), RGB (prefixo rgb) e HSL (prefixo hsl) automaticamente, exibindo um badge que lê "Detected: HEX" (ou RGB/HSL/Auto).
• Conversão em tempo real ao digitar — cada tecla que produz um valor analisável aciona um re-renderização imediata dos cinco formatos de saída. Não é necessário pressionar nenhum botão.
• Copiar qualquer formato para a área de transferência — cada linha de formato tem um botão de cópia que mostra uma marca verde por 2 segundos após uma cópia bem-sucedida. Uma notificação toast confirma a ação.
• Pré-visualização visual da cor — uma grande caixa de pré-visualização se preenche com a cor atual e renderiza o valor hex em texto de contraste automático (preto ou branco com base na luminância).
• Entradas numéricas para RGB, HSL, HSB e CMYK — painéis de ajuste manual permitem ajustar canais individuais: R, G, B (0–255), H (0–360), S (0–100), L (0–100) para HSL, H (0–360), S (0–100), B (0–100) para HSB, e C, M, Y, K (0–100) para CMYK, cada um limitado a intervalos válidos.
• URL compartilhável — a ferramenta usa um hook useShareableState para codificar a cor atual na URL, permitindo links diretos para conversões de cores específicas.
• Funciona offline após carregar — sem solicitações de rede durante a conversão; a biblioteca de conversão completa está incluída na página.

Como usar

Passo 1: Inserir a cor

Abra o Color Converter. A metade esquerda do cartão de entrada contém um campo de texto. Cole qualquer um dos seguintes:

• Um valor hex: #3B82F6
• Uma função RGB: rgb(59, 130, 246)
• Uma função HSL: hsl(217, 91%, 60%)
• Uma string hex pura: 3b82f6 (sem o #)

Assim que você digita ou cola um valor reconhecível, um pequeno badge aparece na parte superior direita do campo — por exemplo "Detected: HEX". A metade direita do cartão mostra uma caixa de pré-visualização de cor ao vivo que imediatamente se preenche com a cor detectada.

Alternativamente, use o seletor de cor nativo abaixo da caixa de pré-visualização. Clique no quadrado de amostra para abrir o seletor de cores do seu navegador; selecionar uma cor define a entrada e atualiza todos os formatos simultaneamente.

Passo 2: Verificar todos os formatos

Abaixo do cartão de entrada, o cartão "All Formats" lista cinco linhas:

Cada linha mostra o rótulo do formato, o valor formatado em fonte monoespaçada e um botão de ícone para copiar. Clique em qualquer botão de copiar para colocar esse valor específico na área de transferência.

Passo 3: Ajuste fino com entradas numéricas

Abaixo do campo de texto, a ferramenta fornece entradas numéricas diretas para todos os quatro modelos de cor ajustáveis:

• RGB: Três entradas numéricas rotuladas R, G, B — cada uma aceita valores de 0 a 255 e é limitada a intervalos válidos.
• HSL: Três entradas numéricas rotuladas H (0–360), S (0–100), L (0–100).
• HSB: Três entradas numéricas rotuladas H (0–360), S (0–100), B (0–100).
• CMYK: Quatro entradas numéricas rotuladas C, M, Y, K — cada uma aceita valores de 0 a 100.

Alterar qualquer entrada atualiza o estado hex, que se propaga instantaneamente para todos os cinco formatos de saída. Isso é útil quando você conhece um ângulo de matiz alvo, um percentual de saturação ou um valor CMYK e precisa do hex equivalente para CSS.

Passo 4: Copiar e usar os valores convertidos

Clique no botão de copiar ao lado do formato que você precisa. O ícone do botão muda de um ícone de área de transferência para uma marca verde por 2 segundos. Um toast de sucesso aparece na parte inferior da tela.

A ferramenta também rastreia um histórico de conversões no HistoryPanel (Premium). Quando você restaura uma entrada do histórico, ela define a entrada para o valor hex armazenado e reexecuta todas as conversões.

Passo 5: Compartilhar uma cor específica

A URL é atualizada automaticamente conforme você altera a cor (via useShareableState). Copie a URL do navegador para compartilhar um link direto para qualquer cor específica. Os destinatários que abrirem o link verão um toast "Loaded from shared link" e a cor compartilhada pré-carregada em todos os formatos.

Exemplos práticos

Traduzir um token de design do Figma para CSS

Um designer fornece um violeta de marca como #8467C7. O desenvolvedor precisa do valor HSL para uma função CSS color-mix(). Abrindo o Color Converter e digitando #8467C7, imediatamente mostra hsl(261, 40%, 59%) na linha HSL — pronto para colar.

Converter uma cor de impressão para web

Uma gráfica especifica um azul corporativo como cmyk(76%, 47%, 0%, 4%). A detecção automática do campo de texto não reconhece a notação CMYK bruta, mas você pode inserir os valores diretamente usando o painel de entrada numérica CMYK: defina C como 76, M como 47, Y como 0 e K como 4. As saídas HEX, RGB e HSL são atualizadas em tempo real, fornecendo instantaneamente os valores prontos para web.

Criar uma paleta de modo escuro

Um desenvolvedor está construindo um tema escuro e precisa mudar uma cor clara para uma variante mais escura. Ele insere #E2E8F0 (slate claro), nota que o HSL é hsl(214, 32%, 91%), depois reduz manualmente a entrada do canal L de 91 para 25 para obter o equivalente escuro. A saída HEX é atualizada para #253443, que ele copia diretamente.

Dicas e melhores práticas

Digite sem o # para entrada mais rápida. A regex de detecção automática corresponde a strings hex puras como 3b82f6 como formato HEX. Você pode colar diretamente de ferramentas de design que removem o hash.

Use as entradas RGB para controle preciso de canal. Se você precisa de uma cor com um valor vermelho exato de 200, digite diretamente na entrada R em vez de procurar o prefixo hex correto. A limitação min/max impede que você insira valores fora do intervalo acidentalmente.

Salve cores como favoritos via URL compartilhável. Como a cor é codificada na URL através de useShareableState, você pode marcar como favoritas as cores de marca frequentemente referenciadas e reabri-las instantaneamente sem reinserir os valores.

O badge de detecção é uma verificação rápida de validade. Se o badge não aparecer após a digitação, a entrada não foi reconhecida como uma cor válida. Verifique erros de digitação — erros comuns incluem um # faltando, usar rgba com um canal alfa (não analisado atualmente) ou inserir valores RGB baseados em porcentagem.

Todos os quatro modelos de cor têm entradas editáveis. RGB, HSL, HSB e CMYK têm painéis de entrada numérica dedicados. Você pode começar em qualquer modelo ajustando seus valores diretamente, e os outros formatos são atualizados em tempo real.

Problemas comuns e solução de problemas

Nada aparece nas linhas de saída após digitar. O texto de entrada não foi reconhecido como uma cor válida. A função parseColorToHex lida com hex #, hex puro, strings rgb() e hsl(). Se você inseriu um formato diferente (como um nome de cor CSS cornflowerblue), a detecção automática cai para null e nenhuma conversão é disparada. Use um valor hex em vez disso.

As entradas RGB aceitam valores acima de 255. O código limita os valores a Math.min(255, Math.max(0, val)) na mudança, então se você digitar 300, ele é ajustado para 255 assim que a entrada é processada. Esse é o comportamento esperado.

A entrada de matiz HSL é limitada em 360. O campo de matiz é limitado a Math.min(360, Math.max(0, val)). Inserir 361 define para 360; inserir -1 define para 0.

O botão de copiar não responde. Se navigator.clipboard.writeText falhar (por exemplo em um contexto inseguro ou restrito), a ferramenta recorre ao método document.execCommand('copy') usando um elemento textarea temporário. Se ambos falharem, verifique se o navegador tem permissão de área de transferência para o site.

O toast "Loaded from shared link" aparece inesperadamente. Este toast é exibido uma vez quando isFromUrl é verdadeiro, significando que uma cor estava codificada na string de consulta da URL. Se você abriu uma URL marcada como favorita, isso é esperado. O toast só aparece uma vez por carregamento de página devido ao guarda de referência hasShownShareToast.

Privacidade e segurança

O Color Converter processa todas as conversões localmente usando matemática JavaScript. Nenhum valor de cor, texto de entrada ou resultado de conversão é transmitido para qualquer servidor. A URL compartilhável codifica a cor apenas na URL do navegador — ela nunca é enviada para lugar algum a menos que você opte por compartilhar o link. A ferramenta usa a Web Clipboard API para operações de cópia, que também são completamente locais. Funciona completamente offline após o carregamento inicial da página.

Perguntas frequentes

O Color Converter é gratuito?

Sim, completamente gratuito sem conta necessária. Os cinco formatos de conversão, o seletor visual de cores, as entradas manuais RGB e HSL, a cópia para área de transferência e as URLs compartilháveis estão disponíveis para todos os usuários sem custo. Funcionalidades Supporter como PresetsPanel e HistoryPanel requerem uma ativação Ko-fi de $5 por 30 dias de acesso.

O Color Converter funciona offline?

Sim. Uma vez que a página foi carregada, toda a lógica de conversão é executada completamente em JavaScript sem solicitações externas. Você pode fechar sua conexão de rede e continuar convertendo cores sem interrupção.

Meus dados estão seguros com o Color Converter?

Sim. Os valores de cor são processados apenas na memória do navegador. Nada é enviado para um servidor. A URL compartilhável codifica a cor no lado do cliente — os servidores do Glyph Widgets nunca registram as cores específicas com as quais você trabalha.

Quais formatos o Color Converter suporta?

A ferramenta suporta cinco formatos: HEX (strings hex de 3 ou 6 dígitos com ou sem #), RGB (notação rgb(R, G, B)), HSL (notação hsl(H, S%, L%)), HSB/HSV e CMYK. Todos os cinco formatos têm painéis de entrada numérica dedicados para ajuste direto de valores.

Qual é a diferença entre HSL e HSB?

Ambos usam Matiz (0–360 graus) e Saturação (0–100%), mas o terceiro canal é diferente. HSL usa Luminosidade, onde 50% é uma cor totalmente saturada e 100% é sempre branco. HSB (também chamado HSV) usa Brilho/Valor, onde 100% é a versão mais pura do matiz e 0% é sempre preto. Figma e a maioria das ferramentas de design exibem HSB; CSS usa HSL.

Posso converter CMYK para HEX?

A detecção automática no campo de texto não analisa a notação CMYK bruta, mas você pode usar o painel de entrada numérica CMYK para inserir os valores de C, M, Y e K diretamente. Ajustar qualquer valor CMYK atualiza todos os outros formatos em tempo real, incluindo HEX.

Por que a conversão CMYK parece ligeiramente diferente dos meus valores de impressão?

A conversão de tela para impressão depende do perfil de cor. A ferramenta usa uma fórmula matemática padrão de sRGB para CMYK sem correção de perfil ICC. Para trabalho de produção de impressão, use uma ferramenta de gerenciamento de cores que aplique os perfis ICC corretos para sua impressora e papel.

Posso inserir valores hex abreviados de 3 dígitos como #F0F?

Sim. A função parseColorToHex detecta strings hex que correspondem a /^[0-9a-f]{3,8}$/i, o que inclui a abreviação de 3 dígitos. #F0F é tratado como equivalente a #FF00FF.

Como compartilho uma cor específica com um colega?

Altere a cor na ferramenta e copie a URL do navegador. O valor hex atual está codificado na string de consulta da URL via useShareableState. Quando seu colega abrir o link, ele verá a cor pré-carregada com uma notificação "Loaded from shared link".

O Color Converter suporta alpha (RGBA / HSLA)?

Não na versão atual. O analisador de entrada lida com rgb() e hsl(), mas não rgba() ou hsla(). Os valores do canal alfa não são preservados no pipeline de conversão. Para suporte completo de alfa, extraia os valores RGB ou HSL manualmente e trate o alfa separadamente.

Ferramentas relacionadas

• Color Picker — amostre cores diretamente de uma imagem carregada ou da sua tela e envie o resultado para o conversor.
• Contrast Checker — verifique se duas cores convertidas atendem aos requisitos de contraste WCAG AA ou AAA.
• Em breve: Palette Generator — gere paletas de cores harmoniosas a partir de uma cor base e converta cada amostra para o formato preferido.

Experimente o Color Converter agora: Glyph Widgets Color Converter