Color Picker & Converter
Pick a color and convert between HEX, RGB, and HSL formats instantly.
Sobre esta herramienta
Un selector de color te permite elegir un color visualmente y leer su valor en todos los formatos que puedas necesitar: HEX para CSS y herramientas de diseño, RGB para canvas y edición de imágenes, y HSL cuando quieres ajustar la luminosidad o la saturación sin cambiar el tono.
Los tres formatos describen el mismo color de maneras distintas. HEX y RGB son la misma información escrita de otro modo: #2563EB es exactamente rgb(37, 99, 235). HSL es el útil cuando construyes una paleta, porque puedes mantener el tono fijo y variar la luminosidad para obtener un conjunto coherente de claros y oscuros.
Todo se ejecuta localmente en tu navegador, y cada valor se copia con un clic directamente a tu hoja de estilos o archivo de diseño.
Cómo elegir y convertir un color
- 1Usa el campo de color para elegir visualmente, o pega un valor HEX existente para partir de un color conocido.
- 2Lee los valores HEX, RGB y HSL, que se actualizan juntos mientras mueves el selector.
- 3Haz clic en cualquier valor para copiarlo al portapapeles con la sintaxis exacta que espera CSS.
- 4Ajusta la luminosidad en HSL para crear variantes más claras y más oscuras del mismo tono y armar una paleta.
Qué hace esta herramienta
HEX, RGB y HSL juntos
Los tres formatos se muestran a la vez, así que nunca necesitas una segunda conversión ni buscar una fórmula.
Copia con un clic
Cada valor se copia en sintaxis CSS válida — #2563eb, rgb(37, 99, 235), hsl(221, 83%, 53%) — listo para pegar.
Selección visual
Elige colores a ojo con el campo nativo, o escribe un valor exacto cuando tienes que igualar un color de marca.
Sin cuenta ni subidas
Se ejecuta por completo en tu navegador. Nada se almacena y la herramienta funciona sin conexión una vez cargada.
Preguntas frecuentes
¿Cómo convierto HEX a RGB?
Un código HEX son tres pares de dígitos hexadecimales para rojo, verde y azul. #2563EB se divide en 25, 63 y EB, que en decimal son 37, 99 y 235: rgb(37, 99, 235). Esta herramienta hace la conversión mientras eliges.
¿Cuál es la diferencia entre RGB y HSL?
RGB describe cuánta luz roja, verde y azul mezclar. HSL describe el tono (qué color de la rueda), la saturación (cuán vivo) y la luminosidad (cuán claro). HSL es más intuitivo: para una versión más oscura del mismo color solo bajas la luminosidad.
¿Qué formato debo usar en CSS?
Los tres son válidos en cualquier navegador moderno. HEX es el más común en el código y en las entregas de diseño. RGB es cómodo cuando necesitas transparencia con rgba(). HSL es el mejor para generar escalas de color sistemáticas.
¿Qué significa el código HEX de 8 dígitos?
Un HEX de 8 dígitos añade dos caracteres al final para la transparencia alfa: #2563EBFF es totalmente opaco y #2563EB80 es aproximadamente 50% transparente. Está soportado en todos los navegadores modernos.
¿Se envían mis datos de color a algún sitio?
No. La conversión de color es aritmética simple hecha en tu navegador. Nada se transmite ni se almacena.