Convertidor de colores (HEX / RGB / HSL)

Cómo funciona

Los diseñadores suelen trabajar con códigos HEX (por ejemplo, los copiados desde Figma o un software de diseño), mientras que el CSS moderno a menudo aprovecha el formato HSL para ajustar fácilmente el tono (hue), la saturación o la luminosidad de un color sin recalcular un código HEX a mano — útil para generar variantes más claras o más oscuras de un mismo color de marca para los estados hover, disabled o los temas oscuros. Esta herramienta detecta automáticamente si ha pegado un código HEX, RGB o HSL y lo convierte al formato que necesita.

¿Cuál es la diferencia entre HEX, RGB y HSL?

HEX ( #rrggbb ) y RGB ( rgb(r, g, b) ) describen ambos un color por sus componentes rojo, verde y azul —HEX en base 16, RGB en base 10— y representan exactamente la misma información en dos notaciones distintas. HSL (hsl(h, s%, l%)) describe el mismo color de otra manera: por su tono (un ángulo en la rueda cromática), su saturación y su luminosidad, lo que hace mucho más intuitivo «mantener el mismo color pero aclararlo» o «mantener la misma luminosidad pero cambiar el tono».

¿Por qué usar HSL en lugar de HEX en CSS?

Porque es fácil derivar variantes coherentes de un color modificando solo el componente de luminosidad (por ejemplo hsl(217, 91%, 60%) para el color base y hsl(217, 91%, 40%) para un estado hover más oscuro), sin tener que recalcular un nuevo código HEX cada vez ni adivinar a ojo si el tono sigue siendo idéntico.

Procesamiento 100% local: la conversión se realiza directamente en su navegador mediante WebAssembly, sin ninguna llamada a un servidor externo.