Convertir una color entre HEX, RGB e HSL
Publicat lo · Mes a jorn lo 2 min de lectura
HEX, RGB e HSL descrivon la meteissa color de tres manièras. L’esplech las mòstra totas tres a l’encòp e accepta las escrituras corrèntas; lo HSL arredondit a l’entièr explica las diferéncias d’un nivèl que se vesèn en tornar al HEX.
Tres escrituras d’una meteissa color
Explorar e convertir de colors mòstra per defaut las tres formas, amb un apercebut de la color. Per lo verd #2F4A3F:
| Forma | Resultat |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
Los tres botons HEX, RGB e HSL del panèl redusisson lo resultat a una sola forma, pràctica per la copiar tala quala.
Escrituras acceptadas
| Escritura | Exemple | Resultat en HEX |
|---|---|---|
| HEX cort | #fff | #ffffff |
| HEX amb transparéncia | #2F4A3F80 | #2f4a3f80 |
| RGB amb de virgulas | rgb(47, 74, 63) | #2f4a3f |
| RGB amb d’espacis | rgb(47 74 63) | #2f4a3f |
| RGB en percentatges | rgb(100%, 0%, 0%) | #ff0000 |
| HSL amb d’espacis | hsl(156 22% 24%) | #304b40 |
Los noms de color coma «rouge», e los canals fora de 0 a 255 coma rgb(300, 0, 0), son refusats amb un messatge que lista las escrituras acceptadas.
Transparéncia
La transparéncia s’escriu en HEX amb uèch chifras, o aprèp una barra amb d’espacis. La color rgb(47 74 63 / 50%) dona #2f4a3f80 en HEX e rgba(47, 74, 63, 0.5) en RGB. Inversament, #2F4A3F80 dona una opacitat de 0,502, perque 80 en exadecimal fa 128 sus 255.
Perqué un anar-tornar cambia d’un nivèl
Lo HSL es mostrat en nombres entièrs: ton en grads, saturacion e lumenositat en per cent. Tornar del HSL al HEX mena doncas a una color vesina, pas a la color de partença.
| Començament | HSL mostrat | Retorn al HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
La diferéncia es d’un nivèl per canal, invisibla a l’uèlh. Per un token de design o una marca, conservatz lo HEX original coma referéncia e tornetz pas passar pel HSL.
Grises
Un gris a una saturacion nulla e un ton sens efècte: #808080 dona rgb(128, 128, 128) e hsl(0, 0%, 50%).
Çò que l’esplech mesura pas
Una conversion de format ditz res de la lisibilitat. L’esplech calcula pas lo contrast entre un tèxte e son fons: verificatz-lo a part abans de publicar. Lo cas d’un QR code, ont lo contrast decideís de la lisibilitat, es tractat dins Crear un QR code que se legís al primièr còp.
Verificar una conversion
- Pegatz la color dins lo camp: l’apercebut deu correspondre a çò qu’esperatz.
- Copiatz la forma que vòstre sistèma demanda.
- Per conservar la color exacta, conservatz lo HEX o lo RGB mai que lo HSL.