Converter unha cor entre HEX, RGB e HSL
Publicada o · Actualizada o 2 min de lectura
HEX, RGB e HSL describen a mesma cor de tres maneiras. A ferramenta mostra as tres á vez e acepta as escrituras habituais; o HSL arredondado ao enteiro explica as diferenzas dun nivel que se ven ao volver ao HEX.
Tres escrituras dunha mesma cor
Explorar e converter cores mostra por defecto as tres formas, cunha vista previa da cor. Para o verde #2F4A3F:
| Forma | Resultado |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
Os tres botóns HEX, RGB e HSL do panel reducen o resultado a unha soa forma, práctica para copiala tal cal.
Escrituras aceptadas
| Escritura | Exemplo | Resultado en HEX |
|---|---|---|
| HEX curto | #fff | #ffffff |
| HEX con transparencia | #2F4A3F80 | #2f4a3f80 |
| RGB con comas | rgb(47, 74, 63) | #2f4a3f |
| RGB con espazos | rgb(47 74 63) | #2f4a3f |
| RGB en porcentaxes | rgb(100%, 0%, 0%) | #ff0000 |
| HSL con espazos | hsl(156 22% 24%) | #304b40 |
Os nomes de cor como «rouge» e as canles fóra de 0 a 255 como rgb(300, 0, 0) rexéitanse cunha mensaxe que enumera as escrituras aceptadas.
Transparencia
A transparencia escríbese en HEX con oito díxitos, ou despois dunha barra con espazos. A cor rgb(47 74 63 / 50%) dá #2f4a3f80 en HEX e rgba(47, 74, 63, 0.5) en RGB. Inversamente, #2F4A3F80 dá unha opacidade de 0,502, porque 80 en hexadecimal é 128 sobre 255.
Por que unha ida e volta cambia nun nivel
O HSL móstrase en números enteiros: ton en graos, saturación e luminosidade en porcentaxe. Pasar do HSL de novo ao HEX leva, pois, a unha cor veciña, non á cor de partida.
| Inicio | HSL mostrado | Volta ao HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
A diferenza é dun nivel por canle, invisible ao ollo. Para un token de deseño ou unha marca, conserve o HEX orixinal como referencia e non volva pasar polo HSL.
Grises
Un gris ten saturación cero e un ton sen efecto: #808080 dá rgb(128, 128, 128) e hsl(0, 0%, 50%).
O que a ferramenta non mide
Unha conversión de formato non di nada da lexibilidade. A ferramenta non calcula o contraste entre un texto e o seu fondo: comprobeo á parte antes de publicar. O caso dun código QR, onde o contraste decide a lexibilidade, trátase en Crear un código QR que se lea á primeira.
Comprobar unha conversión
- Pegue a cor no campo: a vista previa debe coincidir co que espera.
- Copie a forma que lle pide o seu sistema.
- Para conservar a cor exacta, conserve o HEX ou o RGB en lugar do HSL.