¿Qué es el selector de color?
Elige colores visualmente y convierte entre HEX, RGB, HSL y CMYK. Copia cualquier formato con un clic y ajusta los valores directamente en el navegador.
Cómo usar el selector de color
- Introduce un valor HEX o usa el selector visual para elegir un color.
- Revisa los valores RGB, HSL y CMYK convertidos que se muestran a continuación.
- Ajusta los valores de entrada hasta que el color coincida con tu diseño o con el objetivo en el código.
- Copia el formato que necesites con un clic.
Guías rápidas
Referencia de formatos de color compara HEX, RGB, HSL y CMYK para que puedas elegir el formato adecuado para flujos de trabajo de CSS, diseño e impresión.
Entiende la selección de color ▾
Ejemplo
Casos de uso comunes
- Elige colores exactos de la interfaz para CSS o tokens de diseño
- Copia los valores HEX, RGB o HSL en el código front-end
- Inspecciona y compara colores durante el QA de diseño
- Crea paletas pequeñas a partir de un único color seleccionado
Preguntas frecuentes
HEX, RGB, RGBA, HSL, HSLA y CMYK. Haz clic en cualquier campo de formato para copiar su valor.
En los navegadores compatibles con EyeDropper API (Chrome 95+), sí. Haz clic en el icono del cuentagotas para elegir desde cualquier parte de la pantalla.
HSL (Hue, Saturation, Lightness) y HSB/HSV (Hue, Saturation, Brightness/Value) son modelos de color cilíndricos, pero difieren en cómo definen el tercer eje. En HSL, el 50 % de luminosidad es el color "puro". En HSB, el 100 % de brillo significa el brillo máximo, que se acerca más al color que los artistas consideran vívido. CSS usa HSL; Photoshop y Figma usan HSB.
Esta herramienta muestra valores de color y conversiones. Para comprobar el contraste de accesibilidad (relaciones WCAG AA/AAA) frente a un color de fondo, usa la herramienta dedicada Comprobador de contraste.