Conversor de Cores

Sobre os modelos de cor

Cada formato desta página descreve a mesma cor numa linguagem diferente. HEX e RGB endereçam diretamente os canais de luz vermelha, verde e azul da sua tela — são intercambiáveis. HSL e HSV reorganizam essa informação em matiz, saturação e um eixo de luminosidade ou valor, o que costuma ser mais intuitivo quando você quer clarear, escurecer ou girar uma cor. CMYK é o modelo de impressão: as tintas ciano, magenta, amarelo e preto (key) subtraem luz do papel branco, então a prévia na tela é apenas uma aproximação de como a cor vai sair impressa.

Como usar o conversor

Escolha uma cor pelo seletor nativo do navegador ou digite um valor em qualquer campo — HEX aceita #RGB e #RRGGBB, RGB aceita rgb(r, g, b) e HSL aceita hsl(h, s%, l%). As demais linhas se atualizam na hora. Use o botão Copiar ao lado de cada formato para enviar o valor para a área de transferência. As cinco amostras abaixo do formulário mostram o mesmo matiz com 10%, 30%, 50%, 70% e 90% de luminosidade — clique em qualquer uma para carregá-la no formulário.

Referência rápida de formatos

Use HEX em CSS, ferramentas de design e manuais de marca — é a forma escrita mais compacta. Use RGB quando precisar de transparência: passe para rgba(r, g, b, a) com alfa entre 0 e 1. Use HSL ao montar paletas manualmente — manter matiz e saturação fixos e variar só a luminosidade produz tons que parecem da mesma família. Use CMYK apenas quando enviar arte para gráfica e peça ao impressor a especificação exata — cada perfil de impressão desloca um pouco as cores.

Perguntas frequentes

A conversão é exata?

HEX, RGB, HSL e HSV descrevem cores de tela e fazem ida e volta sem perdas além do pequeno arredondamento inerente a canais de 8 bits. CMYK é uma aproximação: o resultado real depende do perfil da impressora, do papel e do conjunto de tintas, então use a saída como ponto de partida e confirme com uma prova impressa.

Qual é a diferença entre HSL e HSV?

Os dois compartilham os eixos de matiz e saturação, mas o terceiro eixo muda. Em HSL, luminosidade 0% é preto e 100% é branco, com o matiz puro em 50%. Em HSV, valor 100% é o matiz puro e 0% é preto — não existe caminho direto até o branco. HSL é mais natural para escolher tons claros e escuros; HSV é mais natural para decidir o quanto um matiz deve brilhar.

Por que meu HEX fica diferente quando imprime?

Telas emitem luz de forma aditiva (RGB), impressoras absorvem luz de forma subtrativa (CMYK). Azuis, verdes e laranjas vibrantes que aparecem fácil na tela costumam ficar fora do gamut do CMYK. Confira sempre uma prova impressa antes de aprovar e pergunte à gráfica se ela prefere CMYK ou, melhor ainda, uma referência Pantone para cores institucionais.

Posso colar qualquer string de cor CSS?

Os campos HEX, RGB e HSL aceitam as formas mais comuns de CSS — #RGB, #RRGGBB, rgb(...), rgba(...), hsl(...), hsla(...). Nomes como tomato e o moderno oklch() ainda não são interpretados — converta primeiro no DevTools do navegador.

Os valores convertidos ficam salvos em algum lugar?

Não. A conversão acontece toda no seu navegador; nada é enviado para servidor e nada fica salvo entre visitas. Salve ou copie a paleta que quiser manter.

Por que os tons usam a luminosidade do HSL?

Manter matiz e saturação constantes e varrer a luminosidade do HSL produz uma escala visualmente consistente — o tipo de rampa que você montaria à mão para uma paleta de UI. As cinco amostras em 10%, 30%, 50%, 70% e 90% dão um intervalo rápido entre um tom bem escuro e um quase branco da mesma família.

Conversor de Cores