Το HSL σημαίνει απόχρωση, κορεσμό και ελαφρότητα.
Στο CSS, ένα χρώμα μπορεί να καθοριστεί χρησιμοποιώντας απόχρωση, κορεσμό και φωτεινότητα (HSL). η μορφή:
hsl(απόχρωση, κορεσμός, ελαφρότητα)
Η απόχρωση είναι μια μοίρα στον τροχό χρώματος από το 0 έως το 360. Το 0 είναι κόκκινο, το 120 είναι πράσινο και το 240 είναι μπλε.
Ο κορεσμός είναι μια ποσοστιαία τιμή. Το 0% σημαίνει μια απόχρωση του γκρι και το 100% είναι το πλήρες χρώμα.
Η ελαφρότητα είναι επίσης ένα ποσοστό. Το 0% είναι μαύρο, το 50% δεν είναι ούτε ανοιχτό ούτε σκούρο, το 100% είναι λευκό
Πειραματιστείτε αναμειγνύοντας τις παρακάτω τιμές HSL:
HUE
SATURATION
LIGHTNESS
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using HSL values</h1>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2>
<h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2>
<h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2>
<h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2>
<h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2>
</body>
</html>
Ο κορεσμός μπορεί να περιγραφεί ως η ένταση ενός χρώματος.
100% είναι καθαρό χρώμα, χωρίς αποχρώσεις του γκρι.
Το 50% είναι 50% γκρι, αλλά εξακολουθείτε να βλέπετε το χρώμα.
0% είναι εντελώς γκρι. δεν μπορείτε πλέον να δείτε το χρώμα.
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>HSL Saturation</h1>
<p>The second parameter of hsl() defines the saturation. Less saturation mean less color. 0% is completely gray:</p>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h2>
<h2 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h2>
<h2 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h2>
<h2 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h2>
<h2 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h2>
</body>
</html>
Η φωτεινότητα ενός χρώματος μπορεί να περιγραφεί ως πόσο φως θέλετε να δώσετε στο χρώμα, όπου 0% σημαίνει χωρίς φως (μαύρο), 50% σημαίνει 50% ανοιχτό (ούτε σκούρο ούτε ανοιχτό) και 100% σημαίνει πλήρη ελαφρότητα (λευκό).
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>HSL Lightness</h1>
<p>The third parameter of hsl() defines the lightness. 0% means black, and 100% means white:</p>
<h2 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h2>
<h2 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h2>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h2>
<h2 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h2>
<h2 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h2>
</body>
</html>
Οι αποχρώσεις του γκρι ορίζονται συχνά ορίζοντας την απόχρωση και τον κορεσμό στο 0 και ρυθμίστε τη φωτεινότητα από 0% έως 100% για να αποκτήσετε πιο σκούρες/ανοιχτότερες αποχρώσεις:
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>Shades of gray</h1>
<p>With HSL, shades of gray are made by setting the saturation to 0%, and adjusting the lightness from 0% to 100%:</p>
<h2 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h2>
<h2 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h2>
<h2 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h2>
<h2 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h2>
<h2 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h2>
<h2 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h2>
</body>
</html>
Οι τιμές χρώματος HSLA είναι μια επέκταση των τιμών χρώματος HSL με ένα κανάλι άλφα - που καθορίζει την αδιαφάνεια για ένα χρώμα.
Μια τιμή χρώματος HSLA είναι καθορίζεται με:
hsla(απόχρωση, κορεσμός, ελαφρότητα, άλφα)
Η παράμετρος άλφα είναι ένας αριθμός μεταξύ 0,0 (πλήρως διαφανές) και 1,0 (καθόλου διαφανές):
Πειραματιστείτε αναμειγνύοντας τις παρακάτω τιμές HSLA:
HUE
SATURATION
LIGHTNESS
ALPHA
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>Make transparent colors with HSLA</h1>
<h2 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h2>
</body>
</html>