¿Qué es Selector de Color?

Elige cualquier color visualmente y obtén sus valores hex, RGB y HSL. Haz clic o arrastra para encontrar el tono exacto y copia el código que necesites.

Arrastra dentro del cuadrado de saturación/brillo para cambiar el tono, mueve la barra de matiz para saltar de familia de color, y la herramienta entrega valores hex, RGB y HSL listos para copiar con un clic. Si escribes un hex en el campo, el cuadrado salta a ese punto, perfecto para retocar un color de marca sin partir de cero.

Cómo usar

1. Haz clic en el área de color o arrastra el selector para encontrar tu color
2. Ajusta con el control de matiz y el control de opacidad opcional
3. Copia el valor hex, RGB o HSL con un clic

Cuándo usar

• Elegir colores de acento para el CSS de una web sin abrir programas de diseño.
• Pasar un hex del manual de marca a HSL para meterlo en un design system.
• Montar una mini paleta de tonos vecinos moviendo el deslizador de matiz.

Resultado

Selecciona un naranja cálido: #E67E22, rgb(230, 126, 34), hsl(28, 80%, 52%).

Preguntas frecuentes

¿Qué diferencia hay entre HSL y HSB (HSV)?

HSL va de negro a blanco pasando por el color puro al 50% de luminosidad, útil para tintes y sombras simétricos. HSB (el de Photoshop) va de negro a color puro al 100% de brillo, que coincide con cómo razona un mezclador de pintura.

¿Por qué los colores de pantalla no coinciden con la impresión?

La pantalla usa RGB (luz aditiva); la imprenta usa CMYK (tinta sustractiva). Verdes vivos y azules eléctricos sobre todo no tienen un equivalente exacto en CMYK. Pide siempre una prueba en el medio final antes de aprobar.

¿Los hex que da son seguros para WCAG por defecto?

No, la accesibilidad depende de la pareja de colores, no de uno solo. Combina el hex de primer plano con el del fondo y comprueba el contraste (mínimo 4,5:1 en cuerpo y 3:1 en texto grande).

¿Cómo capturo un color que ya existe en pantalla?

Pulsa Capturar de la pantalla y el cuentagotas te deja muestrear cualquier píxel de tu pantalla: el hex exacto entra directo en el selector para afinar saturación, brillo o transparencia. (El botón del cuentagotas solo aparece donde está disponible; si no, lee el hex con el medidor de color de tu sistema —Digital Color Meter en macOS, PowerToys en Windows, DevTools de Chrome— y pégalo en el campo de entrada.)

¿El selector admite transparencia?

Sí. Bajo la barra de tono hay un deslizador de Opacidad para fijar cualquier alfa de 0 a 100%. La muestra previa lleva un patrón de cuadros detrás del color para que veas el nivel de transparencia de un vistazo, y los botones de copiar de RGB y HSL pasan automáticamente a rgba() y hsla() cuando el alfa baja del 100%.

Herramientas relacionadas