Conversor de Color
Convierte un color entre HEX, RGB y HSL con vista previa.
Cómo usar Conversor de Color
- Introduce un color en HEX (#137256) o RGB (rgb(19,114,86)).
- Copia el formato que necesites.
Acerca de Conversor de Color
CSS acepta el mismo color en varias notaciones, y cada una cumple una función. rgb(19, 114, 86) detalla los tres canales en decimal, de 0 a 255. #137256 son esos mismos números en base 16, dos dígitos hexadecimales por canal, y por eso ambos son intercambiables, y por eso #abc se expande a #aabbcc. Ambos son aditivos: describen luz que emite una pantalla, lo opuesto a la impresión CMYK, donde cada tinta añadida resta luz a la página.
hsl() es la notación que vale la pena convertir hacia. El matiz es un ángulo en la rueda de color, la saturación es cuán vivo es el color, la luminosidad cuán claro es: tres números que puedes razonar por separado. Un estado hover es el mismo matiz con la luminosidad reducida. Una escala de tintes es un solo matiz en varios niveles de luminosidad. Intenta cualquiera de los dos a ojo en RGB y estarás resolviendo tres ecuaciones acopladas a la vez. Si quieres una escala ya construida, el generador de tonos lo hace, y el verificador de contraste te dirá si el texto sigue siendo legible sobre el resultado.
Pega HEX (tres o seis dígitos, # opcional) o un valor rgb() y obtén los tres formatos de vuelta con una muestra en vivo, que se actualiza mientras escribes. Se acepta rgba(), pero su alfa se descarta. La entrada en HSL, el hexadecimal de ocho dígitos y los colores con nombre no se analizan. No se sube nada.
Preguntas frecuentes
¿Qué formatos puedo pegar?
HEX de tres o seis dígitos, donde el # es opcional, además de valores rgb() y rgba(). Siempre obtienes de vuelta HEX, RGB y HSL.
¿Puedo pegar un valor HSL?
No como entrada. Aquí HSL es un formato de salida, así que parte de un valor HEX o RGB y lee el HSL en el resultado.
¿Qué pasa con el alfa en un color rgba()?
Se ignora. La herramienta convierte los tres canales de color y devuelve valores HEX, RGB y HSL opacos.
¿Por qué convertir a HSL?
Porque separa el matiz de la saturación y la luminosidad. Ajustar la luminosidad te da un estado hover o un tinte que se mantiene en la misma familia de color, lo cual es mucho más fácil que adivinar nuevos valores RGB.
¿#ABC es el mismo color que #AABBCC?
Sí. El hexadecimal de tres dígitos es pura abreviatura: cada dígito se duplica para producir la forma de seis dígitos.