Χρώματα HSL CSS

Τιμή HSL

Στο CSS, μπορείτε να καθορίσετε το χρώμα χρησιμοποιώντας τον τόνο, την συχνότητα και την ένταση (HSL), με τη μορφή:

hsla(hue, saturation, lightness)

Χρώμα (hue)είναι το βαθμό από το 0 έως το 360 του κύκλου των χρωμάτων. Το 0 είναι το κόκκινο, το 120 είναι το πράσινο, και το 240 είναι το μπλε.

Συχνότητα (saturation)είναι ποσοστό, το 0% σημαίνει σκιά του γκρι, ενώ το 100% είναι το πλήρες χρώμα.

Ένταση (lightness)είναι επίσης ποσοστό, το 0% είναι μαύρο, το 50% είναι τόσο σκοτεινό όσο και φωτεινό, και το 100% είναι λευκό.

Προτείνουμε να κάνετε δοκιμές με τη μείξη των παρακάτω τιμών HSL:

 

HUE

0

SATURATION

100%

LIGHTNESS

50%

Παράδειγμα

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

Δοκιμάστε Εκτέλεση

Συχνότητα

Η συχνότητα μπορεί να περιγραφεί ως η ένταση του χρώματος.

Το 100% είναι καθαρό χρώμα, χωρίς σκιά του γκρι

Το 50% είναι 50% γκρι, αλλά μπορείτε να δείτε το χρώμα.

Το 0% είναι πλήρως γκρι, δεν μπορείτε να δείτε χρώμα.

Παράδειγμα

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)

Δοκιμάστε Εκτέλεση

Ένταση

Η ένταση του χρώματος μπορεί να περιγραφεί ως πόσο φως θέλουμε να δώσουμε στο χρώμα, όπου το 0% σημαίνει μη φωτεινό (μαύρο), το 50% σημαίνει 50% φωτεινό (ни тёмное, ни светлое), και το 100% σημαίνει πλήρη φωτεινότητα (λευκό).

Παράδειγμα

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)

Δοκιμάστε Εκτέλεση

Γενικά, ορίζεται η σκιά του γκρι ρυθμίζοντας τον τόνο και την συχνότητα σε 0 και προσαρμόζοντας την ένταση από 0% έως 100% για να πάρουμε πιο βαθιές ή πιο λεπτές σκιάς:

Παράδειγμα

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)

Δοκιμάστε Εκτέλεση

Τιμή HSLA

Η τιμή χρώματος HSLA είναι η επέκταση της τιμής χρώματος HSL με κανάλι ανοιχτότητας - καθορίζει την αδιαφάνεια του χρώματος.

Η τιμή χρώματος HSLA καθορίζεται ως:

hsla(hue, saturation, lightness, alpha)

alpha Οι παραμέτρους είναι αριθμοί μεταξύ 0.0 (πλήρως διαφανής) και 1.0 (πλήρως αδιαφανής):

Παρακαλώ δοκιμάστε τη μείξη των παρακάτω τιμών HSLA:

 

HUE

0

SATURATION

100%

LIGHTNESS

50%

ALPHA

0.5

Παράδειγμα

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)

Δοκιμάστε Εκτέλεση