Λειτουργία hsl() CSS

Ορισμός και χρήση

CSS hsl() Η λειτουργία χρησιμοποιεί το μοντέλο χρώματος Χρώμα-Πυκνότητα-Ένταση (HSL) για να καθορίσει το χρώμα. Μπορεί επίσης να προσθέσει μια προαιρετική συνιστώσα alpha (το επίπεδο διαφάνειας του χρώματος).

Συμβουλή:Το HSL αντιπροσωπεύει το χρώμα (Hue), την πυκνότητα (Saturation) και την ένταση (Lightness), και εκφράζει το κύλινδρο συντεταγμένων χρώματος.

Σημείωση:hsla() Η λειτουργία είναι hsl() Αλλοτρίωση της λειτουργίας. Προτείνεται η χρήση hsl() Λειτουργία.

Επίδειξη

Παράδειγμα 1

Ορισμός διαφορετικών χρωμάτων HSL(A):

#p1 {background-color:hsl(120 100% 50%);} /* Μια πράσινη */
#p2 {background-color:hsl(120 100% 75%);} /* Μια ανοιχτή πράσινη */
#p3 {background-color:hsl(120 100% 25%);} /* Μια σκοτεινή πράσινη */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* Μια αδιαφανής και σκοτεινή πράσινη */
#p5 {background-color:hsl(120 60% 70%);} /* Μια μαλακή πράσινη */
#p6 {background-color:hsl(290 100% 50%);} /* Μια πορτοκαλί */
#p7 {background-color:hsl(290 60% 70%);} /* Μια μαλακή πορτοκαλί */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* Μια αδιαφανής και μαλακή πορτοκαλί */

Προσπαθήστε το προσωπικά

Παράδειγμα 2

Παλαιά γραμματική με διαχωριστικό την κόμμα

#p1 {χρώμα περιβάλλοντος:hsl(120, 100%, 50%);} /* Πράσινο */
#p2 {χρώμα περιβάλλοντος:hsl(120, 100%, 75%);} /* Χλωμό πράσινο */
#p3 {χρώμα περιβάλλοντος:hsl(120, 100%, 25%);} /* Δύσοξινο πράσινο */
#p4 {χρώμα περιβάλλοντος:hsl(120, 60%, 70%);} /* Ζεστό πράσινο */
#p5 {χρώμα περιβάλλοντος:hsl(290, 100%, 50%);} /* Μπλε */
#p6 {χρώμα περιβάλλοντος:hsl(290, 60%, 70%);} /* Ζεστό μπλε */

Προσπαθήστε το προσωπικά

Γλώσσα CSS

Γλώσσα α绝对的 τιμής

hsl(χρώμα σaturaση λαμπρότητα / A)
Τιμή Περιγραφή
χρώμα Απαιτείται. Ορίζει το βαθμό του χρώματος στο κύκλο χρωμάτων (από 0 έως 360) - 0 (ή 360) είναι κόκκινο, 120 είναι πράσινο, 240 είναι μπλε.
σaturaση

Απαιτείται. Ορίζει τη σaturaση του χρώματος; 0% είναι γκρι, 100% είναι πλήρης χρώμα (πλήρης σaturaση).

Μπορεί επίσης να χρησιμοποιηθεί None (ίδιο με το 0%).
λαμπρότητα

Απαιτείται. Ορίζει τη λαμπρότητα του χρώματος; 0% είναι μαύρο, 50% είναι κανονικό, 100% είναι λευκό.

Μπορεί επίσης να χρησιμοποιηθεί None (ίδιο με το 0%).
/ A

Προαιρετική. Προσδιορίζει την τιμή του αλφα κανάλου του χρώματος (από 0% (ή 0) - πλήρως διαφανές μέχρι 100% (ή 100) - πλήρως αδιαφανές).

Μπορεί επίσης να χρησιμοποιηθεί None (υποδηλώνει την απουσία αλφα κανάλου).

Η προεπιλεγμένη τιμή είναι 100%.

Γλώσσα σχετικής τιμής

hsl(from χρώμα χρώμα σaturaση λαμπρότητα / A)
Τιμή Περιγραφή
from χρώμα

Με την κήρυξη από το κλειδί από το κλειδί from, ακολουθεί μια τιμή χρώματος που αντιπροσωπεύει το αρχικό χρώμα.

Αυτό είναι το αρχικό χρώμα που βασίζεται στο σχετικό χρώμα.
χρώμα Απαιτείται. Ορίζει το βαθμό του χρώματος στο κύκλο χρωμάτων (από 0 έως 360) - 0 (ή 360) είναι κόκκινο, 120 είναι πράσινο, 240 είναι μπλε.
σaturaση

Απαιτείται. Ορίζει τη σaturaση του χρώματος; 0% είναι γκρι, 100% είναι πλήρης χρώμα (πλήρης σaturaση).

Μπορεί επίσης να χρησιμοποιηθεί None (ίδιο με το 0%).
λαμπρότητα

Απαιτείται. Ορίζει τη λαμπρότητα του χρώματος; 0% είναι μαύρο, 50% είναι κανονικό, 100% είναι λευκό.

Μπορεί επίσης να χρησιμοποιηθεί None (ίδιο με το 0%).
/ A

Προαιρετική. Προσδιορίζει την τιμή του αλφα κανάλου του χρώματος (από 0% (ή 0) - πλήρως διαφανές μέχρι 100% (ή 100) - πλήρως αδιαφανές).

Μπορεί επίσης να χρησιμοποιηθεί None (υποδηλώνει την απουσία αλφα κανάλου).

Η προεπιλεγμένη τιμή είναι 100%.

Τεχνικές λεπτομέρειες

Έκδοση: CSS3

Υποστήριξη προγράμματος περιήγησης

Οι αριθμοί στη τράπεζα δεδομένων αντιπροσωπεύουν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως τη συνάρτηση.

Chrome Edge Firefox Safari Opera
hsl()
1 9 1 3.1 9.5
με alpha Παράμετροι hsl()
65 79 52 12.1 52
Διαχωρισμένα με κενά παραμέτρων
65 79 52 12.1 52

Σχετικές σελίδες

Εκμάθηση:CSS HSL χρώμα

Αναφορά:Χρώματα CSS

Αναφορά:CSS hwb() συγχρονισμός

Αναφορά:CSS lab() συγχρονισμός

Αναφορά:CSS lch() συγχρονισμός

Αναφορά:CSS oklab() συναρτηση

Αναφορά:CSS oklch() συναρτηση