Selector y conversor de colores: RGB, HEX, HSL
Captura cualquier color de cualquier parte de tu pantalla o convierte al instante entre HEX, RGB y HSL.
Consejo: en Chrome o Edge aparece aquí un cuentagotas para "capturar de la pantalla" que puede tomar cualquier píxel de tu pantalla, incluso fuera del navegador.
#071E93rgb(7, 30, 147)hsl(230, 91%, 30%)HEX (#RGB o #RRGGBB), rgb(), hsl() o un simple "r, g, b", hasta 500 líneas. Cada línea se muestra en HEX, RGB y HSL; las líneas que no son un color se marcan y el resto se convierte igualmente.
¿Encontraste un problema o algo que podría mejorar? Leemos todos los mensajes y lo arreglamos rápido.
Convierte cualquier color entre HEX, RGB y HSL al instante. Elige un color de forma visual, pega un código HEX, escribe valores RGB o HSL, o usa el cuentagotas de pantalla para capturar cualquier píxel de tu pantalla, incluso en otra aplicación. Todos los formatos se mantienen sincronizados, con cadenas CSS listas para copiar en cada uno.
¿Tienes una paleta entera? Pega una lista de colores, uno por línea, en el cuadro de conversión por lotes y cada línea se convertirá a HEX, RGB y HSL en una sola tabla que puedes descargar como CSV.
Cómo usarla
- Elige un color con el selector visual, escribe en cualquier campo (HEX, RGB o HSL), o haz clic en "Capturar color de la pantalla" y haz clic en cualquier píxel de tu pantalla, también fuera del navegador.
- Todos los demás formatos se actualizan al instante.
- Haz clic en Copiar junto al formato que necesites: los valores están listos para pegarlos en CSS.
- Para convertir muchos colores, pégalos uno por línea en el cuadro de conversión por lotes que hay debajo del conversor y descarga la tabla como CSV.
Preguntas frecuentes
¿Qué diferencia hay entre HEX, RGB y HSL?
Describen los mismos colores de forma distinta. HEX (#071E93) es compacto y la notación más habitual en la web. RGB (rgb(7, 30, 147)) expresa los componentes rojo, verde y azul; es útil para añadir transparencia con rgba(). HSL (hsl(229, 91%, 30%)) expresa tono, saturación y luminosidad; es la más intuitiva para ajustar un color, por ejemplo para hacerlo más claro o más apagado.
¿Cuándo debería usar HSL en CSS?
Usa HSL cuando necesites variaciones de un color: si mantienes fijos el tono y la saturación y cambias la luminosidad, obtienes tonos más claros y más oscuros coherentes de un color de marca, mucho más fácil que ir adivinando valores HEX.
¿Admite códigos HEX de 3 dígitos?
Sí: las formas abreviadas como #fff o #1a9 se amplían automáticamente a la forma completa de 6 dígitos (#ffffff, #11aa99).
¿Las conversiones de RGB a HEX son exactas?
Sí: HEX es simplemente RGB escrito en base 16, así que la conversión entre ambos es exacta en los dos sentidos. Al convertir a HSL y volver, un valor puede variar ±1 por redondeo, algo imperceptible en la práctica.
¿Puedo convertir varios colores a la vez?
Sí. Pega hasta 500 colores en el cuadro "Conversión por lotes", uno por línea: sirven HEX (#fff o #071E93), rgb(), hsl() o un trío "r, g, b" sin más. Cada línea aparece en una tabla con sus valores HEX, RGB y HSL y una muestra; las líneas que no son un color se marcan sin detener el resto, y "Descargar CSV" guarda la tabla completa.
¿Cómo funciona el cuentagotas de pantalla?
Usa la API EyeDropper nativa del navegador: haz clic en el botón, el cursor se convierte en una lupa y, al hacer clic en cualquier píxel (de esta página, de otra pestaña o de una aplicación totalmente distinta), se captura ese color exacto. No se graba ni se sube nada; la API solo devuelve el color en el que hiciste clic. Funciona en Chrome y Edge; Firefox y Safari todavía no la han incorporado.
Referencia rápida: las tres notaciones de color
• HEX (#071E93): seis dígitos hexadecimales, dos por canal. La notación más compacta y la habitual en la mayoría de las herramientas de diseño y bases de código CSS.
• RGB (rgb(7, 30, 147)): cada canal de 0 a 255. Usa rgba() o la sintaxis moderna rgb(r g b / a) cuando necesites transparencia alfa.
• HSL (hsl(229, 91%, 30%)): tono en la rueda de color (0–360°), saturación y luminosidad. La notación más fácil de editar a mano: cambia un número para obtener una versión más clara, más oscura o más apagada del mismo tono.
Un flujo de trabajo práctico: define los colores de marca en HEX, manipúlalos en HSL (tonos más claros y más oscuros moviendo la luminosidad) y usa RGB cuando una biblioteca o la API de canvas exija canales numéricos.
Herramientas gratis relacionadas
- Conversor de imágenes — Convierte entre AVIF, HEIC, TIFF, PNG, JPG, WebP, GIF, BMP y SVG. La mayoría de las conversiones no salen de tu navegador.
- Recortar imágenes — Recorta imágenes a cualquier tamaño o relación de aspecto en tu navegador: cuadrado, 16:9, 4:3 o libre.