RGB dáche tres canles decimais entre 0 e 255. Converter a HEX transforma cada canal nun número hexadecimal de dous díxitos, de modo que a cor enteira encaixa nun token compacto que calquera navegador, ferramenta de deseño e guía de estilos entende.
Como funciona a conversión de RGB a HEX
- Toma o canal vermello e divídeo por 16: o cociente é o primeiro díxito, o resto o segundo.
- Escribe os díxitos 10 a 15 como as letras A a F — 255 convértese en FF.
- Repíteo para o verde e o azul, enche os díxitos simples cun cero á esquerda: 5 convértese en 05.
- Une os tres pares e coloca un # por diante.
Exemplo práctico
Exacto, sempre que os canais sexan números enteiros de 0 a 255. Valores fraccionarios como rgb(79.5, 70, 229) redóndanse ao enteiro máis próximo primeiro, porque HEX non pode almacenar valores intermedios.
RGB e HEX explicados
Que é RGB?
RGB describe unha cor como tres canles de luz — vermello, verde e azul — cada unha de 0 a 255. Reflicte como funcionan realmente as pantallas: as tres a 255 dan branco, todas a 0 dan negro. RGB é a opción axeitada sempre que precises calcular cunha cor, e rgba() engade transparencia por riba.
- Sintaxe:
- rgb(R, G, B)
- Rango:
- 0–255 por canal
- Mellor para:
- código, canvas, transparencia con rgba()
Que é HEX?
Un código HEX é un número hexadecimal de seis díxitos que almacena os canles vermello, verde e azul dunha cor detrás dun # inicial. Cada par de díxitos cubre un canal, desde 00 (ningún) ata FF (completo), o que dá os mesmos 16,7 millóns de cores que RGB nunha notación moito máis curta. HEX é o predeterminado en CSS, ferramentas de deseño e guías de marca.
- Sintaxe:
- #RRGGBB
- Rango:
- 00–FF por canal
- Mellor para:
- CSS, entrega de deseño, guías de marca
Táboa de referencia de RGB a HEX
As cores CSS máis comúns, convertidas de RGB a 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 |