Un código HEX encapsula tres números de 8 bits en seis díxitos hexadecimais. Converter HEX a RGB significa dividir eses díxitos en pares e ler cada par como un número decimal entre 0 e 255 — exactamente os valores que esperan CSS, Figma e editores de imaxe.
Como funciona a conversión de HEX a RGB
- Elimina o # inicial e, se o código ten só tres díxitos, duplica cada un: #f53 convértese en #ff5533.
- Divide os seis díxitos en tres pares — RR, GG e BB.
- Lé cada par como un número en base 16 e convérteo a base 10: FF convértese en 255, 57 en 87, 33 en 51.
- Escribe os tres resultados como rgb(R, G, B).
Exemplo práctico
Esta conversión é exacta. HEX e RGB describen os mesmos valores sRGB en notación diferente, así que non se arredonda nin perde nada en ningunha Dirección.
HEX e RGB explicados
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
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()
Táboa de referencia de HEX a RGB
As cores CSS máis comúns, convertidas de HEX a RGB.
| Cor | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |