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.
Ein zylindrisches Farbmodell, das Farben durch Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness) beschreibt und intuitiv für die menschliche Farbauswahl ausgelegt ist.
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.
Ausprobieren
Ähnliche Artikel
CSS color-mix(): Farben nativ im Browser mischen
Lernen Sie CSS color-mix() zum nativen Mischen von Farben im Browser. Meistern Sie Syntax, Farbräume, praktische Anwendungsfälle und erstellen Sie dynamische Paletten ohne JavaScript.
Einen Farbwähler als Web Component von Grund auf bauen
Baue einen barrierefreien Farbwähler als Web Component. Implementiere Canvas-Rendering, Farbton-Schieberegler, Alpha-Kanäle und Custom Events mit Shadow DOM.
Perzeptuelle Farbräume: Lab, LCH, Oklab, OKLCH
Erkunde perzeptuell gleichmäßige Farbräume – CIE Lab, LCH, Oklab und OKLCH. Lerne, wie jeder konzipiert wurde, wo er glänzt und welchen du für CSS und Designarbeit verwenden solltest.
Smaragd vs. Jade vs. Waldgrün: Ein Vergleichsleitfaden
Vergleiche Smaragd (#50C878), Jade (#00A86B) und Waldgrün (#228B22). Lerne die visuellen Unterschiede und Hex-Code-Unterschiede zwischen diesen beliebten Grüntönen.
Unterschied zwischen Cyan und Türkis
Cyan (#00FFFF) und Türkis (#40E0D0) sehen ähnlich aus, unterscheiden sich jedoch grundlegend in Farbmodellposition, Sättigung und Verwendungszweck. Hier ist die vollständige Aufschlüsselung.
Entwurf einer Farb-API: REST-Endpunkte für Farbdaten
RESTful Farb-API mit Endpunkten für Farbkonvertierung, Suche, Kontrastprüfung und Palettengenerierung entwerfen. Schema-Design und Best Practices lernen.