HSL
Embed This Widget
Add the script tag and a data attribute to embed this widget.
Embed via iframe for maximum compatibility.
<iframe src="https://colorfyi.com/iframe/glossary/hsl/" width="420" height="400" frameborder="0" style="border:0;border-radius:10px;max-width:100%" loading="lazy"></iframe>Paste this URL in WordPress, Medium, or any oEmbed-compatible platform.
https://colorfyi.com/glossary/hsl/Add a dynamic SVG badge to your README or docs.
[](https://colorfyi.com/glossary/hsl/)Use the native HTML custom element.
Un modelo de color cilíndrico que describe los colores mediante matiz, saturación y luminosidad, diseñado para ser intuitivo en la selección de color humana.
HSL represents color as an angle on the color wheel (hue, 0-360), a percentage of color intensity (saturation, 0-100%), and a percentage of lightness (0-100% where 0% is black and 100% is white). At 50% lightness, the pure hue is displayed. HSL is widely used in CSS (the hsl() function) because it makes it easy to create tints, shades, and tones by adjusting a single parameter. It is more intuitive than RGB for design work but has the limitation of not being perceptually uniform, meaning equal numeric changes do not always produce equal visual changes.
Pruébelo
Artículos relacionados
CSS color-mix(): Mezcla Colores Nativamente en el Navegador
Aprende CSS color-mix() para mezclar colores nativamente en el navegador. Domina la sintaxis, los espacios de color, los casos de uso prácticos y crea paletas dinámicas sin JavaScript.
Construyendo un Selector de Color como Web Component desde Cero
Construye un selector de color accesible como Web Component. Implementa renderizado en canvas, sliders de tono, canales alfa y eventos personalizados con Shadow DOM.
Espacios de Color Perceptuales: Lab, LCH, Oklab, OKLCH
Explora los espacios de color perceptualmente uniformes — CIE Lab, LCH, Oklab y OKLCH. Aprende cómo fue diseñado cada uno, en qué destaca y cuál usar para CSS y trabajo de diseño.
Esmeralda vs Jade vs Verde Bosque: Guía de Comparación de Verdes
Compara esmeralda (#50C878), jade (#00A86B) y verde bosque (#228B22). Aprende las diferencias visuales y en código hex entre estos populares tonos de verde.
Diferencia Entre Cian y Turquesa
El cian (#00FFFF) y la turquesa (#40E0D0) son similares pero difieren fundamentalmente en posición en el modelo de color, saturación y caso de uso. Aquí está el análisis completo.
Diseño de una API de color: Endpoints REST para datos de color
Diseña una API REST de color con endpoints para conversión, búsqueda, verificación de contraste y generación de paletas. Aprende diseño de esquema y mejores prácticas.