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.
Um modelo de cores cilíndrico que descreve cores usando matiz, saturação e luminosidade, projetado para ser intuitivo na seleção de cores.
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.
Experimente
Artigos relacionados
CSS color-mix(): Misture Cores Nativamente no Navegador
Aprenda CSS color-mix() para misturar cores nativamente no navegador. Domine a sintaxe, espaços de cores, casos de uso práticos e crie paletas dinâmicas sem JavaScript.
Criando um Seletor de Cores como Web Component do Zero
Crie um seletor de cores acessível como Web Component. Implemente renderização em canvas, sliders de matiz, canais alfa e eventos customizados com Shadow DOM.
Espaços de Cor Perceptuais: Lab, LCH, Oklab, OKLCH
Explore espaços de cor perceptualmente uniformes — CIE Lab, LCH, Oklab e OKLCH. Aprenda como cada um foi projetado, onde se destaca e qual usar para CSS e trabalho de design.
Esmeralda vs Jade vs Verde Floresta: Guia de Comparação de Verdes
Compare esmeralda (#50C878), jade (#00A86B) e verde floresta (#228B22). Conheça as diferenças visuais e os códigos hex entre essas populares tonalidades de verde.
Diferença Entre Ciano e Turquesa
Ciano (#00FFFF) e turquesa (#40E0D0) parecem semelhantes, mas diferem fundamentalmente em posição no modelo de cores, saturação e aplicação. Veja a análise completa.
Projetando uma API de Cores: Endpoints REST para Dados de Cores
Projete uma API RESTful de cores com endpoints para conversao, busca, verificacao de contraste e geracao de paletas. Aprenda design de esquema e boas praticas.