Conversor de color HEX, RGB y HSL

HEX, RGB y HSL: los tres lenguajes del color

En diseño y desarrollo web, un mismo color se puede escribir de varias formas. Conocer y convertir entre ellas es el pan de cada día:

HEX (#3b66ff): el formato más compacto, habitual en CSS y herramientas de diseño. Codifica los componentes rojo, verde y azul en hexadecimal.
RGB (rgb(59, 102, 255)): describe el color por la cantidad de rojo, verde y azul (de 0 a 255). Muy usado y fácil de entender.
HSL (hsl(225, 100%, 62%)): describe el color por tono, saturación y luminosidad. Perfecto para generar paletas y variaciones.

Cómo usar el conversor de color

Elige un color con el selector o escribe su código HEX.
Verás al instante el color en HEX, RGB y HSL, con una vista previa.
Copia el formato que necesites con un clic.

¿Cuándo usar cada formato?

Para CSS, tanto HEX como RGB y HSL son válidos. HEX es ideal por su brevedad; RGB cuando necesitas transparencia con rgba(); y HSL es insuperable para crear variaciones: cambiando solo la luminosidad obtienes versiones más claras u oscuras del mismo color, perfectas para estados hover, bordes o sombras.

Casos de uso reales

Pasar el color de una herramienta de diseño a tu CSS.
Crear variaciones más claras u oscuras de un color de marca.
Comprobar los valores exactos de un color.
Unificar la paleta de un proyecto.

Si trabajas con imágenes, prueba nuestro conversor de imágenes o el compresor de imágenes.

Privacidad

Todo el cálculo ocurre en tu navegador. Descubre más utilidades en nuestra página de herramientas.

Preguntas frecuentes

¿Entre qué formatos convierte?

Entre HEX, RGB y HSL, los tres formatos de color más usados en diseño y desarrollo web. Eliges un color y ves su valor en los tres a la vez.

¿Puedo usar un selector de color?

Sí. Puedes elegir el color con el selector visual o escribir directamente su código HEX (incluido el formato abreviado de 3 dígitos).

¿Qué es el formato HSL?

HSL describe el color por su tono (Hue), saturación y luminosidad. Es muy intuitivo para crear variaciones: subir o bajar la luminosidad para aclarar u oscurecer un color manteniendo el tono.

¿Se envía algo a un servidor?

No. Todo el cálculo se hace en tu navegador.

¿Funciona en el móvil?

Sí, en cualquier navegador moderno.