Selector de Color Avanzado

Un entorno profesional para la selección y ajuste de colores. Visualiza el espectro y obtén códigos precisos para web.

Control visual

Ajusta el color con una rueda limpia y campos numéricos sincronizados

La rueda define el matiz, la barra vertical la saturación y el deslizador inferior la luminosidad. Los seis campos numéricos siguen el mismo estado sin cambiar de contexto.

Luminosidad 57%
Canales HSL

Ajuste fino del color base

Hue y saturación siguen la rueda. Luminosidad comparte el mismo estado con el deslizador para evitar desajustes.

Salida RGB

Canales operativos para web y apps

Si ajustas RGB directamente, el selector vuelve a calcular HSL y reposiciona rueda, saturación y vista previa al instante.

Color activo

#E94B3C

Copia el valor operativo o pega un HEX directo. El panel de salida se mantiene estable mientras ajustas los controles.

#E94B3C RGB(233, 75, 60) HSL(7°, 80%, 57%)
#
Tono 7°
Saturación 80%
Luminosidad 57%
RGB base 233 75 60

Cómo Usar el Selector Avanzado

Este panel provee control total sobre el color mediante la interacción sincrónica de tres sistemas: Rueda Visual, Entradas Numéricas e Inputs Hexadecimales.

1Rueda de Matiz (Hue): Haz clic o arrastra el indicador por la rueda circular para cambiar el tono base en 360 grados.
2Control de Intensidad: Utiliza la barra vertical para modificar la Saturación de color y el deslizador horizontal para la Luminosidad.
3Precisión Numérica: Ingresa el valor exacto en las casillas R, G, B o el Hexadecimal directo para igualar referencias digitales dentro de sRGB; valida el medio final si el color irá a impresión, pintura o material físico.

HSL versus RGB en el Diseño UI

Aunque las pantallas renderizan en RGB (Rojo, Verde, Azul), el sistema HSL (Tono, Saturación, Luminosidad) es mucho más intuitivo para la mente humana cuando buscamos variaciones de un mismo color.

Modificar HSLEfecto visualCaso de Uso
Cambiar solo H Mantiene la intensidad pero cambia la familia (ej. pasa de Rojo a Azul vivo) Descubrir tonos complementarios para un diseño.
Reducir S El color se apaga hacia el gris. Pierde fuerza. Crear colores de estado inactivo, deshabilitado o bordes suaves.
Agitar L Color más blanco (L alto) o más oscuro (L bajo) Crear jerarquías de fondo (Dark mode) o texto sin cambiar el tinte del botón.

Preguntas Frecuentes

¿Para qué sirve un selector de color avanzado?
A diferencia de los selectores básicos, este te permite ajustar con precisión micrométrica los valores de Matiz (Hue), Saturación y Luminosidad interactuando tanto visualmente como numéricamente.
¿Por qué la rueda cambia solo el Matiz (Hue)?
La rueda circular de color representa el espectro cromático de 360°, que es el canal "H" (Hue) en el modelo HSL. El centro representaría una pérdida de saturación, pero para mayor precisión, aquí controlas saturación y luminosidad usando deslizadores dedicados paralelos a la rueda.
¿Los valores HEX y RGB se calculan en base a HSL?
Sí. Esta herramienta utiliza el modelo HSL como base computacional. Cada cambio en un control genera un recálculo absoluto sincronizando HSL, RGB y HEX en tiempo real.