Convertir un color entre HEX, RGB i HSL
Publicat el · Actualitzat el 2 min de lectura
HEX, RGB i HSL descriuen el mateix color de tres maneres. L’eina mostra els tres alhora i accepta les escriptures habituals; el HSL arrodonit a l’enter explica les diferències d’un nivell que es veuen en tornar al HEX.
Tres escriptures d’un mateix color
Explorar colors mostra per defecte les tres formes, amb una vista prèvia del color. Per al verd #2F4A3F:
| Forma | Resultat |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
Els tres botons HEX, RGB i HSL del tauler redueixen el resultat a una sola forma, pràctica per copiar-la tal qual.
Escriptures acceptades
| Escriptura | Exemple | Resultat en HEX |
|---|---|---|
| HEX curt | #fff | #ffffff |
| HEX amb transparència | #2F4A3F80 | #2f4a3f80 |
| RGB amb comes | rgb(47, 74, 63) | #2f4a3f |
| RGB amb espais | rgb(47 74 63) | #2f4a3f |
| RGB en percentatges | rgb(100%, 0%, 0%) | #ff0000 |
| HSL amb espais | hsl(156 22% 24%) | #304b40 |
Els noms de color com «rouge» i els canals fora de 0 a 255 com rgb(300, 0, 0) es rebutgen amb un missatge que enumera les escriptures acceptades.
Transparència
La transparència s’escriu en HEX amb vuit xifres, o després d’una barra amb espais. El color rgb(47 74 63 / 50%) dona #2f4a3f80 en HEX i rgba(47, 74, 63, 0.5) en RGB. Inversament, #2F4A3F80 dona una opacitat de 0,502, perquè 80 en hexadecimal és 128 sobre 255.
Per què una anada i tornada canvia d’un nivell
El HSL es mostra en nombres enters: to en graus, saturació i lluminositat en percentatge. Passar del HSL de nou al HEX porta, doncs, a un color veí, no al color de partida.
| Inici | HSL mostrat | Tornada al HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
La diferència és d’un nivell per canal, invisible a l’ull. Per a un token de disseny o una marca, conserveu el HEX original com a referència i no torneu a passar pel HSL.
Grisos
Un gris té saturació zero i un to sense efecte: #808080 dona rgb(128, 128, 128) i hsl(0, 0%, 50%).
El que l’eina no mesura
Una conversió de format no diu res de la llegibilitat. L’eina no calcula el contrast entre un text i el seu fons: comproveu-lo a part abans de publicar. El cas d’un codi QR, on el contrast decideix la llegibilitat, es tracta a Crear un codi QR que es llegeixi a la primera.
Comprovar una conversió
- Enganxeu el color al camp: la vista prèvia ha de coincidir amb el que espereu.
- Copieu la forma que us demana el vostre sistema.
- Per conservar el color exacte, conserveu el HEX o el RGB en lloc del HSL.