Selector de Color HSL
Un selector con sliders para HSL, el modelo de color con el que piensan la mayoría de diseñadores CSS. Cada raíl visualiza qué varía el slider — fácil ver cómo es saturación 0 en tu matiz actual, o cómo la luminosidad va de negro a tu color a blanco. Salida en HEX (con alpha opcional de 8 dígitos), `rgb()` / `rgba()`, `hsl()` / `hsla()` y wrapper de valor arbitrario Tailwind.
- HEX#209FDF
- RGBrgb(32, 159, 223)
- HSLhsl(200, 75%, 50%)
- Tailwind[color:#209fdf]
Cómo usar
- Arrastra los sliders. El panel grande refleja el color actual; un tablero de cuadros se ve cuando alpha está por debajo de 100%.
- Pulsa Random para inspirarte — elige saturación y luminosidad razonables, no neón puro.
- Copia el formato que necesites a tu CSS o clase utility Tailwind.
Preguntas frecuentes
- ¿Por qué HSL en vez de RGB?
- HSL se mapea a cómo piensan los diseñadores: matiz (qué color), saturación (qué tan vívido), luminosidad (qué tan brillante). Para ajustar un solo eje — "mismo color, un poco más oscuro" — solo mueves un slider. El mismo cambio en RGB requiere tocar los tres canales.
- ¿Qué significa el HEX de 8 dígitos?
- Cuando alpha baja del 100%, el HEX se extiende a `#RRGGBBAA`. Los últimos dos dígitos hex codifican el canal alpha (00 = transparente, FF = opaco). Navegadores modernos y herramientas de diseño lo soportan.
- ¿Por qué luminosidad 50, no 100, es el punto más saturado?
- En HSL, luminosidad 0% es negro puro y 100% es blanco puro — ambos matan la saturación. La representación más saturada de cualquier matiz está en 50% de luminosidad.
Herramientas relacionadas
Conversor de Formatos de Color
Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.
Generador de Colores Aleatorios
Genera una cuadrícula de colores aleatorios en HEX, RGB o HSL — elige cuántos, copia cualquier valor con un clic y regenera al instante para inspirarte.
Conversor de longitud de onda a color (nm → sRGB)
Convierte una longitud de onda en nanómetros (380–780 nm — el espectro visible) a un color sRGB aproximado, con una barra de gradiente arcoíris clicable y líneas de absorción de Fraunhofer del espectro solar real como referencia.
Conversor de color CMYK ↔ RGB (impresión)
Convierte entre colores RGB/hex de pantalla y porcentajes CMYK para impresión, con estrategias de generación de negro Simple, GCR (Reemplazo de componente gris) y UCR (Eliminación de subcolor), vista previa de separación de canales y lectura de cobertura total de tinta.
Paleta de Colores Tailwind
La paleta por defecto completa de Tailwind CSS — 22 matices × 11 sombras, 50 a 950 — click para copiar como clase Tailwind, HEX o rgb().
Comparador de Brillo de Color (HSL vs Lab L* vs WCAG vs HSP)
Compara siete métricas de brillo distintas — Luminosidad HSL, Valor HSV, Luminancia Relativa WCAG (LRV), L* de CIE Lab (claridad perceptual), Luma Rec. 709, Brillo Percibido HSP y promedio ingenuo (R+G+B)/3 — para uno o dos colores en paralelo, con deltas que muestran por qué un color 'más claro' puede sentirse más oscuro.