Para qué sirve esta herramienta
Este selector de color en línea te permite muestrear un color e inspeccionar sus valores en formatos como hex, rgb, hsl, hwb, lch, device-cmyk y colores con nombre estándar de CSS. También puedes escribir manualmente un valor de color soportado y dejar que la página lo convierta automáticamente.
Es útil para desarrollo frontend, diseño de interfaces, muestreo desde capturas, revisión de colores de marca y preparación de valores CSS. Cuando ves un color pero no sabes su código, o necesitas convertir un valor existente a otra notación CSS, esta página concentra el flujo en un solo lugar.
Casos de uso comunes
- Muestrear el color de un píxel desde una página web, captura, maqueta de diseño, aplicación de escritorio o interfaz del sistema.
- Convertir un color a formatos cómodos para frontend como hex, rgb, hsl, hwb, lch o cmyk.
- Consultar colores con nombre estándar de CSS cuando una documentación, nota de diseño o comentario de código necesita un nombre legible.
- Comprobar si un valor de color existente puede ser interpretado por el navegador y copiar el formato de salida necesario.
Formas de seleccionar un color
Hay dos formas de seleccionar un color: usar el selector de color integrado, o hacer clic en el botón del cuentagotas cuando el navegador soporta la EyeDropper API. El cuentagotas puede muestrear píxeles fuera de esta página, lo que lo hace útil cuando necesitas capturar un color de otra pestaña, una aplicación de escritorio o un diseño.
- Abre el selector de color del navegador y elige un color desde el selector del sistema.
- O haz clic en el botón del cuentagotas y toma un color de la pantalla cuando el navegador lo permita.
- También puedes pegar un código de color o un nombre de color en el campo manual y dejar que la página lo interprete.
- Copia el formato que necesitas para CSS, notas de diseño o archivos de configuración.
Conversiones soportadas
El conversor soporta los formatos de color CSS hex, rgb, hsl, hwb, lch y device-cmyk, y también acepta como entrada colores con nombre estándar en inglés.
- Entradas comunes incluyen #00bfff, rgb(0, 191, 255), hsl(195, 100%, 50%), hwb(195 0% 0%), lch(...) y nombres de colores CSS.
- La lista de resultados muestra varios formatos a la vez, para que puedas moverte con más facilidad entre bases de código, herramientas de diseño y requisitos de documentación.
- La salida de color con nombre es el color CSS estándar más cercano cuando está disponible; conviene tratarla como una etiqueta práctica, no siempre como un token de diseño exacto.
Aspectos a tener en cuenta
- El cuentagotas depende de que el navegador soporte la EyeDropper API. Si no está disponible, el selector de color y la entrada manual siguen funcionando.
- El muestreo de pantalla normalmente devuelve un valor hex sRGB. Perfiles de pantalla, escalado, renderizado del navegador, compresión, transparencia y antialiasing pueden crear pequeñas diferencias respecto a un archivo de diseño.
- Los selectores de color nativos del navegador se ven distintos según el sistema operativo y el navegador, pero los valores convertidos en la página usan el mismo flujo de análisis.
- Si tu entrada incluye transparencia alfa, confirma el formato de salida antes de usarlo en un sistema que necesite conservar alfa.
Preguntas frecuentes
¿Por qué no está disponible el botón del cuentagotas?
El cuentagotas depende de la EyeDropper API del navegador. Algunos navegadores, modos privados o versiones antiguas no la soportan, por lo que quizá debas usar el selector de color integrado o la entrada manual.
¿Por qué el color muestreado difiere de mi herramienta de diseño?
Las causas comunes incluyen perfiles de color de pantalla, escalado del sistema, renderizado del navegador, compresión de imagen, capas transparentes y antialiasing. El muestreo de pantalla sirve para comprobar píxeles visibles, pero no siempre coincide con el valor original gestionado por la herramienta de diseño.
¿Puedo escribir nombres de colores CSS directamente?
Sí. Se pueden interpretar nombres de colores CSS estándar como deepskyblue o rebeccapurple, y la página los convierte a los formatos de salida soportados.
¿Esta página sube mi pantalla o mis datos de color?
No. La selección, interpretación y conversión de colores se ejecutan en tu navegador. La EyeDropper API devuelve el valor del color seleccionado y no sube una captura de pantalla al servidor.