Selector de Color HSL
Color
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
Simulador de Daltonismo
Ve cómo se ve tu imagen para personas con cada uno de los 8 tipos de deficiencia visual cromática (CVD).
Generador de CSS Box Shadow
Diseña box-shadow CSS visualmente con varias capas, vista previa en vivo y salida CSS / Tailwind lista para copiar.
Conversor de Formatos de Color
Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.
Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.
Generador de Paleta de Colores
Crea paletas armoniosas desde un color base con seis esquemas.
Comprobador de Contraste de Color
Comprueba el contraste texto/fondo según los niveles WCAG AA y AAA.