Conversor de colores
Convierte entre HEX, RGB y HSL con vista previa.
Conversor de colores HEX, RGB y HSL para diseño web
En el diseño web y desarrollo frontend, los colores se representan en diferentes modelos según el contexto. El formato HEX (#RRGGBB) es el más utilizado en hojas de estilo CSS por su brevedad. El modelo RGB (Red, Green, Blue) define colores mediante la mezcla aditiva de rojo, verde y azul con valores de 0 a 255, y es el modelo nativo de las pantallas digitales. HSL (Hue, Saturation, Lightness) organiza los colores de forma más intuitiva para los diseñadores, permitiendo ajustar el tono, la saturación y la luminosidad de manera independiente.
Nuestro conversor transforma cualquier color entre estos tres formatos en tiempo real. Esto es especialmente útil cuando trabajas con herramientas de diseño como Figma o Adobe XD que exportan colores en HEX, pero necesitas valores RGB para animaciones JavaScript, o cuando quieres crear variaciones de un color ajustando solo la luminosidad en HSL. La vista previa en vivo te permite verificar exactamente cómo se ve el color antes de copiarlo.
Puedes ingresar valores manualmente en cualquiera de los tres formatos o usar el selector de color nativo del navegador para elegir visualmente. Cada formato incluye un botón de copiar que coloca el valor en el portapapeles listo para usar en tu código CSS, JavaScript o cualquier otra herramienta de diseño.
Preguntas frecuentes
¿Cuál es la diferencia entre HEX y RGB?
Ambos representan exactamente los mismos colores, solo cambia la notación. HEX usa números hexadecimales (base 16) en formato #RRGGBB, mientras que RGB usa números decimales de 0 a 255 para cada canal. Por ejemplo, el blanco es #FFFFFF en HEX y rgb(255, 255, 255) en RGB. HEX es más compacto para CSS, mientras que RGB es más fácil de manipular programáticamente.
¿Cuándo usar HSL?
HSL es ideal cuando necesitas crear paletas de colores armónicas o variaciones de un mismo tono. Al separar el tono (H) de la saturación (S) y la luminosidad (L), puedes crear versiones más claras u oscuras de un color simplemente ajustando la luminosidad, o versiones más vibrantes o apagadas cambiando la saturación, sin alterar el tono base.
¿Qué modelo de color usan los navegadores?
Los navegadores web entienden los tres formatos: HEX, RGB y HSL en CSS. Internamente, las pantallas trabajan con RGB ya que cada píxel se compone de subpíxeles rojos, verdes y azules. Sin embargo, CSS moderno también soporta modelos más avanzados como oklch y display-p3 para gamuts de color más amplios en pantallas HDR.
¿Quieres saber más? Lee nuestra guía completa →