PantoneTools

HSV do HSL

Převod barevných hodnot HSV na HSL pro všestrannou manipulaci s barvami v designových systémech

Transformace mezi intuitivními barevnými modely pro větší flexibilitu návrhu

Převodník barev

HSV Input

180° 360°
100%
0% 50% 100%
100%
0% 50% 100%

Kliknutím na vzorník barev zobrazíte příklady

HSL Output

hsl(0°, 100%, 50%)

HSL Values

Odstín

0-360° color wheel position

Nasycení 100%

0-100% color intensity

Lehkost 50%

0-100% brightness

hsl(0°, 100%, 50%)

Další formáty

HSV Value

hsv(0°, 100%, 100%)

RGB Value

rgb(255, 0, 0)

Použití CSS

color: hsl(0°, 100%, 50%);
background-color: hsl(0°, 100%, 50%);

Přehled konverzí

Tato zářivá červená si zachovává plnou sytost v obou barevných modelech, ale vykazuje odlišná měření jasu, což demonstruje klíčový rozdíl mezi hodnotou (HSV) a světlostí (HSL).

Příklady konverzí

Zářivá červená

HSV 0°, 100%, 100%
HSL 0°, 100%, 50%
Rozdíl Lehkost = 50 % hodnoty

Lesní zelená

HSV 120°, 75%, 55%
HSL 120°, 60%, 35%
Rozdíl Upraveno podle stupnice světlosti

Královská modrá

HSV 220°, 75%, 88%
HSL 220°, 70%, 55%
Rozdíl Lehkost vyvážená pro vnímání

Jemná růžová

HSV 340°, 40%, 95%
HSL 340°, 70%, 80%
Rozdíl Zvýšená saturace v HSL

Tlumená fialová

HSV 270°, 30%, 70%
HSL 270°, 30%, 60%
Rozdíl Světlost upravena směrem dolů

Šedý tón

HSV 0°, 0%, 50%
HSL 0°, 0%, 50%
Rozdíl Identické pro stupně šedi

Doporučené nástroje

O tomto nástroji

Tento převodník HSV do HSL umožňuje plynulý přechod mezi dvěma intuitivními barevnými modely, z nichž každý má odlišné výhody pro různé designové úkoly a pracovní postupy.

HSV (Hue, Saturation, Value) represents colors based on human perception, with Value controlling the brightness from black to full color. This makes it particularly intuitive for tasks like adjusting lightness while preserving chromatic intensity, common in interface design.

HSL (Hue, Saturation, Lightness) structures color around perceived lightness, with Lightness ranging from black through the pure color to white. This model excels at creating consistent color scales and harmonies, as equal increments in lightness produce perceptually consistent steps.

Ačkoli oba modely sdílejí komponenty Odstín a Sytost, jejich zpracování jasu (Hodnota vs. Světlost) vytváří zásadně odlišné chování. Tento převodník používá přesné matematické algoritmy k převodu mezi těmito modely a zároveň zachovává vizuální konzistenci, což umožňuje návrhářům využívat silné stránky každého modelu v celém jejich pracovním postupu.

Často kladené otázky