Converter uma cor entre HEX, RGB e HSL
Publicado em · Atualizado em 3 min de leitura
HEX, RGB e HSL são três jeitos de escrever a mesma cor. Você os encontra em um programa de desenho, em uma folha de estilo, em uma ferramenta de maquete ou em um guia de marca, e passa de um para o outro o tempo todo. A ferramenta mostra os três de uma vez e aceita as notações comuns.
Três notações da mesma cor
Explorar cores mostra as três formas por padrão, com uma prévia da cor. HEX é uma sequência de seis dígitos e letras precedida de um sinal de jogo da velha. RGB dá as quantidades de vermelho, verde e azul, de 0 a 255. HSL descreve o matiz em graus, a saturação e a luminosidade em porcentagens, o que costuma ser mais intuitivo para clarear ou escurecer uma cor. Para o verde #2F4A3F:
| Forma | Resultado |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
Os três botões HEX, RGB e HSL do painel reduzem o resultado a uma única forma, prática para copiar como está.
Notações aceitas
| Notação | Exemplo | Resultado em HEX |
|---|---|---|
| HEX curto | #fff | #ffffff |
| HEX com transparência | #2F4A3F80 | #2f4a3f80 |
| RGB com vírgulas | rgb(47, 74, 63) | #2f4a3f |
| RGB com espaços | rgb(47 74 63) | #2f4a3f |
| RGB em porcentagens | rgb(100%, 0%, 0%) | #ff0000 |
| HSL com espaços | hsl(156 22% 24%) | #304b40 |
Nomes de cores como «red» e valores fora de 0 a 255 como rgb(300, 0, 0) são recusados com uma mensagem que lista as notações aceitas.
Transparência
Uma transparência se escreve em HEX com oito dígitos, ou depois de uma barra com espaços. A cor rgb(47 74 63 / 50%) dá #2f4a3f80 em HEX e rgba(47, 74, 63, 0.5) em RGB. Inversamente, #2F4A3F80 dá uma opacidade de 0,502, porque 80 em hexadecimal é 128 em 255.
Por que uma ida e volta muda em um nível
O HSL é mostrado em números inteiros: matiz em graus, saturação e luminosidade em porcentagens. Voltar do HSL para o HEX cai, portanto, em uma cor vizinha, nem sempre a de partida.
| Partida | HSL mostrado | De volta ao HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
A diferença é de um nível em cada canal, invisível a olho nu. Para um token de design ou uma marca, guarde o HEX original como referência e não passe pelo HSL.
Cinzas
Um cinza tem saturação zero e um matiz sem efeito: #808080 dá rgb(128, 128, 128) e hsl(0, 0%, 50%).
O que a ferramenta não mede
Uma conversão de formato não diz nada sobre a legibilidade. A ferramenta não calcula o contraste entre um texto e seu fundo: confira-o separadamente antes de publicar. O caso de um QR Code, em que o contraste decide se ele é lido, é tratado em Criar um QR Code que escaneia de primeira.
Para quais usos
Um designer gráfico passando uma cor a um desenvolvedor, uma pessoa adaptando uma folha de estilo, um professor preparando uma apostila: a mesma cor se escreve de três jeitos conforme a ferramenta.
Conferir uma conversão
- Cole a cor no campo: a prévia deve corresponder ao que você espera.
- Copie a forma que o seu sistema pede.
- Para guardar a cor exata, guarde o HEX ou o RGB em vez do HSL.
Perguntas frequentes
- Como converter HEX em RGB?
- Cole a cor na ferramenta, que mostra as três formas de uma vez, por exemplo #2F4A3F, rgb(47, 74, 63) e hsl(156, 22%, 24%).
- Por que uma ida e volta pelo HSL muda a cor em um nível?
- O HSL é mostrado em números inteiros. Guarde o HEX original como referência.
- Como escrever uma transparência?
- Em HEX com oito dígitos, ou em RGB com uma barra, por exemplo rgb(47 74 63 / 50%).
- A ferramenta confere a legibilidade do texto?
- Não, ela não calcula o contraste entre um texto e seu fundo: confira-o separadamente.