Ajuste HSL

¿Qué es el ajuste HSL?

El ajuste HSL es una herramienta online para modificar matiz, saturación y luminosidad en tiempo real. Puedes empezar con un código HEX o con el selector visual, mover cada control por separado y obtener variantes más claras, más suaves, más intensas o más contrastadas sin perder la familia cromática de la que partes.

Es útil para diseño web, sistemas de diseño, branding, interfaces de producto y handoff frontend. El color original y el resultado aparecen lado a lado, mientras que los valores HSL, HEX, RGB y CSS quedan listos para copiar en hojas de estilo, tokens de diseño o documentación interna.

Cuándo conviene usar esta herramienta

• Crear variantes de color de marca – Preparar tonos para botones, fondos suaves, alertas o elementos destacados a partir de un color principal
• Definir estados hover y active – Ajustar sobre todo la luminosidad para que enlaces y botones respondan visualmente sin cambiar de identidad
• Ordenar una paleta de interfaz – Corregir pequeños desajustes de matiz entre tarjetas, gráficos, insignias y superficies de apoyo
• Preparar una revisión de accesibilidad – Probar versiones más oscuras o más claras antes de pasar al cálculo de contraste
• Explorar opciones visuales – Comparar alternativas para una cabecera principal, un botón importante, ilustraciones o modo oscuro
• Documentar colores para frontend – Entregar HSL, HEX, RGB y CSS listos para implementación y QA visual

Funciones principales

• Controles HSL fáciles de leer – Matiz, saturación y luminosidad están separados para que entiendas exactamente qué cambio estás aplicando.
• Entrada flexible de color – Puedes partir de un HEX, del selector de color o de un color guardado previamente en el navegador.
• Comparación directa – El panel doble ayuda a decidir si la nueva variante sigue siendo coherente con la marca o con la interfaz.
• Copias en varios formatos – HSL, HEX, RGB y CSS aparecen juntos para evitar herramientas adicionales.
• Historial local automático – Los últimos ajustes quedan guardados en el navegador para revisar decisiones de diseño sin repetir pasos.
• Favoritos para referencias clave – Guarda colores importantes para reutilizarlos en varias páginas, componentes o entregables.

Cómo usar el ajuste HSL

1. Elige el color de partida – Usa el selector visual o pega un código HEX ya definido en tu maqueta o guía de estilo.
2. Mueve los deslizadores – Ajusta matiz, saturación y luminosidad hasta conseguir la variante que mejor encaje con tu caso real.
3. Compara el antes y el después – Revisa si el resultado sigue funcionando en interfaz, branding o legibilidad.
4. Copia o guarda – Copia el formato que necesites o añade el color a favoritos si va a repetirse en otros elementos.

Cómo funciona el modelo HSL

HSL describe el color de una forma más intuitiva que trabajar solo con canales RGB:

• Matiz (0-360°) – Marca la posición en la rueda de color, como rojo en 0°, verde en 120° y azul en 240°.
• Saturación (0-100%) – Indica cuánta intensidad conserva el color frente a un gris neutro.
• Luminosidad (0-100%) – Sitúa el color entre negro, tono puro y blanco.

La gran ventaja es poder aclarar u oscurecer una misma familia cromática con control. Eso resulta muy útil para estados hover, fondos de apoyo, bordes, resaltados y variantes de tema oscuro.

Preguntas frecuentes