HEX de 3 dígitos é uma notação que repete três números.
#369 e #336699 representam a mesma cor. Repete-se cada dígito duas vezes; não se acrescentam zeros para obter #306090. O resultado é rgb(51, 102, 153). As regras oficiais de CSS estão ligadas abaixo.
W3C CSS Cor 4: notação de cores HEX
Moyoutil remove os espaços das extremidades e um # inicial antes de processar HEX de três ou seis dígitos. Não distingue maiúsculas de minúsculas e mostra o HEX em maiúsculas. O seletor de cor ou a entrada HEX atualizam a pré-visualização e o resultado.
Quatro entradas reproduzidas com funções reais da ferramenta
Executámos a função color do projeto em 5 de outubro de 2026. HSL mostra os valores arredondados para inteiros pela ferramenta. RGB contém os valores inteiros dos canais do HEX de entrada.
| Entrada | Resultado HEX | RGB | HSL |
|---|---|---|---|
#369 | #336699 | rgb(51, 102, 153) | hsl(210, 50%, 40%) |
#808080 | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
#123456 | #123456 | rgb(18, 52, 86) | hsl(210, 65%, 20%) |
#fff | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
Esta tabela não é o resultado da medição de cores a olho nu em uma tela, mas sim a saída de uma entrada de código convertida. Manter os valores HEX e RGB tradicionais juntos torna mais fácil distingui-los da precisão da exibição HSL.
Um ângulo de cor 0 em cinza não significa vermelho
A ferramenta exibe o ângulo de cor HSL 0 para entrada cinza. Contudo, quando a saturação é 0%, o ângulo da cor não altera a cor exibida. Portanto, você não deve julgar que é vermelho apenas olhando para o primeiro número de hsl(0, 0%, 50%). Leia o ângulo de matiz, saturação e brilho juntos.
W3C CSS Cor 4: Sem efeito de ângulo de cor na saturação 0 Torna-se
HSL arredondado não restaura o RGB original
As ferramentas exibem #123456 como hsl(210, 65%, 20%). Converter esse HSL arredondado em sRGB e, em seguida, arredondar cada canal para um número inteiro no intervalo de 0 a 255 resulta em rgb(18, 51, 84) ou #123354. O RGB original é rgb(18, 52, 86), portanto os dois canais são diferentes. Isso não significa que todas as cores farão diferença.
W3C CSS Cor 4: conversão de HSL para sRGB
Para tarefas que exigem o código original exato, use o HEX ou RGB resultante e mantenha o original também. Use HSL como ponto de partida para ajustes, mas não trate a representação inteira da ferramenta como uma conversão de ida e volta sem perdas. A ferramenta não tem a capacidade de inserir HSL e revertê-lo para HEX.
Distinguir entre HEX de 4 e 8 dígitos e faixa de suporte
CSS também possui HEX de 4 e 8 dígitos com canal alfa. No entanto, o atual conversor Moyoutil não aceita isso. #12345678 e #abcd são erros e não são processados como resultados RGB. Se você cortar a posição alfa, as informações de transparência serão perdidas; portanto, não pense nisso como as mesmas informações de cor.
W3C CSS Cor 4: HEX com canal alfa
- Arquive o código de cores original e onde ele será usado primeiro.
- Insira 3 ou 6 dígitos HEX na ferramenta de conversão de cores e veja o HEX e RGB resultante.
- Clique em Copiar resultados para copiar três linhas: HEX, RGB e HSL. Selecione e use uma linha de notação conforme necessário.
- Considere diferenças de arredondamento ao reutilizar HSL inteiro. A legibilidade do fundo real e da combinação de letras também é verificada separadamente.
Esta ferramenta é um conversor de código de cores e não fornece verificação de conformidade de contraste de cores, conversão de perfil ICC ou conversão CMYK para impressão.
Perguntas frequentes
Os dígitos HEX de 6 sempre podem ser reduzidos para 3 dígitos?
Não. A abreviação só pode ser feita com precisão se os dois dígitos em cada canal forem iguais. Por exemplo, #336699 pode ser abreviado para #369, mas #123456 não pode ser abreviado dessa forma.
Se os números HSL forem iguais, eles aparecerão com a mesma cor em todas as telas?
As comparações neste artigo são limitadas ao código e aos resultados dos cálculos. A conversão do código de cores por si só não garante a correspondência visual entre diferentes telas ou materiais impressos.