Προτεινόμενη εκμάθηση:

Η χρήση της συνάρτησης hwb() του CSS

Η ορισμός και η χρήση του CSS hwb() Η συνάρτηση χρησιμοποιεί το μοντέλο χρώματος χρώματος-λευκότητα-μαύροτητα (HWB) για να καθορίσει το χρώμα. Μπορεί επίσης να προσστεί μια επιλογή διαφάνειας (που εκφράζει τη διαφάνεια του χρώματος).

Παράδειγμα

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

#p1 {background-color:hwb(60 40% 20% / 0.5);}
#p2 {χρώμα φόντου:hwb(120 40% 20%);}
#p3 {χρώμα φόντου:hwb(120 40% 20% / 20%);}
#p4 {χρώμα φόντου:hwb(240 40% 20%);}
#p5 {χρώμα φόντου:hwb(240 50% 10%);}
#p6 {χρώμα φόντου:hwb(240 40% 20% / 0.3);}
#p7 {χρώμα φόντου:hwb(300 40% 20% / 0.5);}
#p8 {χρώμα φόντου:hwb(360 40% 20%);}
#p9 {χρώμα φόντου:hwb(360 90% 0%);}

Προσπάθησε να το δοκιμάσεις

Γλώσσα CSS

Γλώσσα αμετάβλητης τιμής

hwb(hue whiteness blackness / A)
Τιμή Περιγραφή
hue

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

Μπορεί επίσης να χρησιμοποιηθεί το none (ίσο με 0deg).
whiteness

Απαιτείται. Ορίζει την λευκότητα της μείξης; 0% σημαίνει χωρίς λευκότητα, 100% σημαίνει πλήρης λευκότητα.

Μπορεί επίσης να χρησιμοποιηθεί το none ( ίσο με 0%).
blackness

Απαιτείται. Ορίζει την πυκνότητα της μείξης; 0% σημαίνει χωρίς πυκνότητα, 100% σημαίνει πλήρης πυκνότητα.

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

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

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

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

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

hwb(from color whiteness blackness / A)
Τιμή Περιγραφή
from color

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

Αυτό είναι το αρχικό χρώμα που βασίζεται στο σχετικό χρώμα.
hue

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

Μπορεί επίσης να χρησιμοποιηθεί το none (ίσο με 0deg).
whiteness

Απαιτείται. Ορίζει την λευκότητα της μείξης; 0% σημαίνει χωρίς λευκότητα, 100% σημαίνει πλήρης λευκότητα.

Μπορεί επίσης να χρησιμοποιηθεί το none ( ίσο με 0%).
blackness

Απαιτείται. Ορίζει την πυκνότητα της μείξης; 0% σημαίνει χωρίς πυκνότητα, 100% σημαίνει πλήρης πυκνότητα.

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

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

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

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

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

Έκδοση: CSS Color Module Level 4

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

Τα αριθμάτα στη τаблицή αντιπροσωπεύουν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως τη συνάρτηση.

Chrome Edge Firefox Safari Opera
hwb()
101 101 96 15 87
Ανάμεξη αριθμών και ποσοστιαίων μετρούμενων στους παραμέτρους
121 121 122 Δεν υποστηρίζεται 107

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

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

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

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

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

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

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