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 partir de un código HEX o de un color elegido visualmente y mover cada control por separado para obtener variantes más claras, más suaves, más intensas o con más contraste sin salirte de la misma familia de color.

Esto es útil para diseño web, sistemas de diseño, branding, interfaces de producto y entrega a frontend. El color original y el resultado se muestran juntos, mientras que HSL, HEX, RGB y CSS quedan listos para copiar en estilos, tokens, documentación o revisión visual.

Cuándo esta herramienta te resuelve el trabajo

• Crear variantes de color de marca – Sacar tonos para botones, fondos suaves, etiquetas y acentos desde una sola base cromática
• Definir hover y estados activos – Ajustar sobre todo la luminosidad para mantener coherencia entre el estado normal y el interactivo
• Ordenar una paleta de interfaz – Corregir pequeñas diferencias entre tarjetas, gráficas, badges y superficies secundarias
• Preparar una revisión de accesibilidad – Probar versiones más claras u oscuras antes de validar contraste
• Explorar rutas visuales – Comparar opciones para una sección principal, un botón importante, ilustraciones o modo oscuro
• Pasar colores a 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 van separados para que cada ajuste sea más claro.
• Punto de partida flexible – Puedes comenzar con un HEX, con el selector visual o con un color guardado antes en el navegador.
• Comparación inmediata – El doble panel ayuda a revisar si la variante sigue funcionando para marca e interfaz.
• Varios formatos en un solo lugar – HSL, HEX, RGB y CSS aparecen juntos para evitar pasos extra.
• Historial local automático – Los últimos ajustes quedan guardados para revisión, comparación y cambios rápidos.
• Favoritos para referencias importantes – Guarda colores clave para reutilizarlos en más pantallas, componentes o entregables.

Cómo usar el ajuste HSL

1. Elige el color base – Usa el selector visual o pega un HEX tomado de tu maqueta, guía de estilo o sistema de componentes.
2. Ajusta los controles – Cambia matiz, saturación y luminosidad hasta conseguir la variante que mejor encaje con tu caso real.
3. Compara antes y después – Revisa si el resultado sigue funcionando en interfaz, branding y legibilidad.
4. Copia o guarda – Copia el formato que necesites o agrega el color a favoritos si lo vas a reutilizar.

Cómo entender matiz, saturación y luminosidad

El modelo HSL facilita trabajar el color mejor que editar solo canales RGB:

• Matiz (0-360°) – Posición en la rueda de color, por ejemplo rojo en 0°, verde en 120° y azul en 240°.
• Saturación (0-100%) – Mide qué tan intensa o qué tan neutra se ve la tonalidad.
• Luminosidad (0-100%) – Ubica el color entre negro, tono pleno y blanco.

Con esto puedes construir hover states, fondos suaves, bordes, acentos y variantes de tema conservando una base cromática consistente en todo el producto.

Preguntas frecuentes