RGB dá-te três canais decimais entre 0 e 255. Converter para HEX transforma cada canal num número hexadecimal de dois dígitos, assim a cor inteira cabe num token compacto que qualquer navegador, ferramenta de design e guia de estilos entende.
Como funciona a conversão de RGB para HEX
- Pega o canal vermelho e divide-o por 16: o quociente é o primeiro dígito, o resto é o segundo.
- Escreve os dígitos 10 a 15 como as letras A a F — 255 torna-se FF.
- Repete para o verde e o azul, preenchendo dígitos únicos com um zero à esquerda: 5 torna-se 05.
- Une os três pares e põe um # na frente.
Exemplo prático
Exato, desde que os canais sejam números inteiros de 0 a 255. Valores fracionários como rgb(79.5, 70, 229) são arredondados ao inteiro mais próximo primeiro, porque HEX não consegue representar valores intermédios.
RGB e HEX explicados
O que é RGB?
RGB descreve uma cor como três canais de luz — vermelho, verde e azul — cada um de 0 a 255. Espelha como os ecrãs realmente funcionam: todos os três a 255 produzem branco, todos a 0 produzem preto. RGB é a escolha certa sempre que precisas de calcular com uma cor, e rgba() adiciona transparência por cima.
- Sintaxe:
- rgb(R, G, B)
- Intervalo:
- 0–255 por canal
- Melhor para:
- código, canvas, transparência com rgba()
O que é HEX?
Um código HEX é um número hexadecimal de seis dígitos que armazena os canais vermelho, verde e azul de uma cor atrás de um # inicial. Cada par de dígitos representa um canal, de 00 (nenhum) a FF (cheio), o que dá os mesmos 16,7 milhões de cores do RGB numa notação muito mais curta. HEX é o padrão em CSS, ferramentas de design e guidelines de marca.
- Sintaxe:
- #RRGGBB
- Intervalo:
- 00–FF por canal
- Melhor para:
- CSS, entrega de design, guidelines de marca
Tabela de referência RGB para HEX
As cores CSS mais comuns, convertidas de RGB para HEX.
| Cor | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |