Δοκιμάστε να επεξεργαστείτε αυτό το παράδειγμα για να συμπεριλάβετε τις δικές σας τιμές, όπως rgb(100, 100, 100) .

Ρύθμιση χρώματος με RGBA

Στο CSS3 εμφανίστηκε νέο εργαλείογια εργασία με χρώμα - μορφή RGBA. Μπορεί να ονομαστεί εξέλιξη του μοντέλου RGB, αλλά με την προσθήκη ενός νέου καναλιού - καναλιού Α ή άλφα. Αυτό το κανάλι ορίζει τη διαφάνεια του χρώματος. Οι τιμές του ορίζονται στην περιοχή από 0 έως 1. Μια τιμή ίση με 0 αντιστοιχεί σε πλήρη διαφάνεια, 1 - πλήρη αδιαφάνεια (το χρώμα θα είναι το ίδιο με αυτό που έχει οριστεί στο τρία πρώταΚανάλια RGB) και ενδιάμεσες τιμές όπως 0,4 ή 0,6 - ημιδιαφάνεια σε διάφορους βαθμούς.

Παράδειγμα κώδικα.

Εδώ είναι πώς θα λειτουργήσει:

Αυτός ο κώδικας είναι οπτικά παρόμοιος με τον ακόλουθο, ο οποίος χρησιμοποιεί το μοντέλο RGB για να ορίσει την τιμή χρώματος:

Ιδού το αποτέλεσμα του:

Μια τιμή καναλιού άλφα ίση με μηδέν κάνει οποιοδήποτε χρώμα αόρατο - απολύτως διαφανές, μια τιμή ίση με ένα μεταφράζει το χρώμα στον κώδικα RGB χωρίς αλλαγές. Η ιδιότητα rgba(255,0,0,1.0) δείχνει το κόκκινο χρώμα rgb(255, 0, 0) .

Με δεκαεξαδική τιμή (κωδικός HEX)

Στην καθημερινή ζωή, χρησιμοποιούμε το δεκαδικό σύστημα μέτρησης. Η προέλευσή του είναι πολύ απλή - έχουμε δέκα δάχτυλα στα χέρια μας και ήταν βολικό να μετράμε στα δάχτυλα στη ζωή. Αν μέσα μετρικό σύστημαδέκα ψηφία: από το 0 έως το 9, και ο αριθμός 10 είναι το επόμενο ψηφίο, τότε υπάρχουν 16 ψηφία στο δεκαεξαδικό σύστημα αριθμών και το επόμενο ψηφίο θα είναι ο αριθμός 16.

Για να υποδείξουν τους χρωματικούς κωδικούς, τα συνηθισμένα δεκαδικά ψηφία από το 0 έως το 9 χρησιμοποιούνται ως δεκαεξαδικά ψηφία και τα λατινικά γράμματα από το A έως το F χρησιμοποιούνται για να υποδείξουν αριθμούς από το 10 έως το 15, δηλαδή (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, Α, Β, Γ, Δ, Ε, ΣΤ). Για λόγους σαφήνειας, ας το συνοψίσουμε σε έναν πίνακα:

Για να γράψουν δεκαεξαδικούς αριθμούς μεγαλύτερους από F (15 δεκαδικούς), όπως στο δεκαδικό σύστημα, χρησιμοποιούν επίσης την ένωση δύο ψηφίων, αλλά ήδη δεκαεξαδικών, κάτι που είναι προφανές. Ναι, για την ιστορία δεκαδικός αριθμόςΤο 255 στον δεκαεξαδικό συμβολισμό είναι FF.

Το δεκαεξαδικό σύστημα είναι πιο κατανοητό στον υπολογιστή, επεξεργάζεται τις τιμές που δίνονται από τη δεκαεξαδική τιμή πιο γρήγορα.

Για να καθορίσετε ένα χρώμα σε δεκαεξαδικό σύστημα, προηγηθείτε της αριθμητικής τιμής με το σύμβολο "#", για παράδειγμα: #FFC0CB . Η ίδια η τιμή #FFC0CB αποτελείται από τρία δεκαεξαδικά ψηφία FF , C0 και CB . Η έννοια αυτής της καταχώρησης είναι η ίδια με τη ρύθμιση του χρώματος Μορφή RGB(rgb(r, g, b) ) - κάθε δεκαεξαδικό ψηφίο στον κωδικό HEX υποδεικνύει τον κορεσμό χρώματος στο κανάλι μοντέλου RGB.

Αυτός ο κώδικας θα εμφανίσει τα ακόλουθα στοιχεία:

Και εδώ είναι μια εικόνα με το αποτέλεσμα από την ενότητα "Ρύθμιση χρώματος με RGB" σε αυτήν τη σελίδα παραπάνω.

Βλέπουμε ότι τα χρώματα είναι πανομοιότυπα.

Επιτρέπεται μια συντομευμένη σημείωση για τον κωδικό χρώματος HEX: ένας 6ψήφιος αριθμός μπορεί να γραφτεί ως τριψήφιος αριθμός. Αυτό ισχύει μόνο εάν επαναληφθούν δύο ψηφία στην τιμή χρώματος του ίδιου καναλιού.

Δηλαδή, η ακόλουθη συντομογραφία είναι αποδεκτή:

Για παράδειγμα, το χρώμα #ff22aa μπορεί να γραφτεί ως #f2a ή το χρώμα #44aa22 μπορεί να γραφτεί ως #4a2.

Ρύθμιση χρώματος με HSL

Το CSS3 έχει μια νέα μορφή για τον καθορισμό χρωμάτων.

Η μορφή HSL είναι συντομογραφία των αγγλικών λέξεων: Hue (απόχρωση), Saturate (κορεσμός) και Lightness (ελαφρότητα).

Η απόχρωση στο HSL είναι μια τιμή χρώματος σε έναν ειδικό χρωματικό τροχό (Εικόνα 2) και καθορίζεται σε μοίρες. Αν σχεδιάσουμε αναλογίες με το μοντέλο RGB, τότε η 0° αντιστοιχεί στο κόκκινο, η 120° αντιστοιχεί στο πράσινο και η 240° αντιστοιχεί στο μπλε.

Η τιμή απόχρωσης θα αλλάξει από 0 σε 359.

Η δεύτερη τιμή - κορεσμός (Saturate) ορίζεται ως ποσοστό. Σε 100% κορεσμό, το χρώμα είναι όσο το δυνατόν πιο "ζουμερό", καθώς ο δείκτης κορεσμού κινείται προς το 0%, το χρώμα γίνεται όλο και πιο θαμπό και γίνεται γκρι.

Η τρίτη τιμή - ελαφρότητα (Lightness) ορίζεται επίσης ως ποσοστό. Όσο μεγαλύτερο είναι το ποσοστό, τόσο πιο φωτεινό θα είναι το χρώμα. Οι ακραίες τιμές 0% και 100% θα υποδεικνύουν αντίστοιχα μαύρο (έλλειψη φωτός) και λευκό (εκτεθειμένο) χρώματα και δεν έχει σημασία ποιο χρώμα από τον τροχό χρωμάτων επιλέχθηκε στο πρώτο κανάλι. Η βέλτιστη τιμή μπορεί να θεωρηθεί η τιμή της φωτεινότητας του χρώματος ίση με 50%.

Ρύθμιση χρώματος με HSLA

Η μορφή HSLA σχετίζεται με το HSL, όπως και το RGB με το RGBA. Στη μορφή HSLA, καθώς και σε RGBA, προστίθεται ένα κανάλι άλφα που είναι υπεύθυνο για τη διαφάνεια των χρωμάτων.

Ένα χρώμα που καθορίζεται σε μορφή HSL είναι πιο ευανάγνωστο. Μπορούμε να πούμε ότι είναι διαισθητικό. Για παράδειγμα, ο κωδικός hsl(120,60%,50%) μπορεί να αντιπροσωπεύει το τελικό χρώμα εάν υπάρχει μια εικόνα του χρωματικού τροχού HSL στη μνήμη. Αυτό δεν μπορεί να ειπωθεί για τις μορφές RGB και HEX, ο χρωματικός κώδικας που καθορίζεται σε αυτές τις μορφές γίνεται σαφής μόνο αφού αποδοθεί στην οθόνη.

Οι νέες μορφές στο CSS3 (HSL, HSLA και RGBA) λειτουργούν σε προγράμματα περιήγησης από τις εκδόσεις: IE 9.0, Opera 10.0 Firefox 3.0. Πώς να κάνετε τα στυλ να λειτουργούν σε παλαιότερα προγράμματα περιήγησης;

Κάποιο μπλοκ (χρώμα φόντου: rgb(255,50,50); χρώμα φόντου: rgba(255,50,50,0,85) )

Όταν χρησιμοποιείτε αυτόν τον κώδικα σε παλαιότερα προγράμματα περιήγησης, το χρώμα φόντου για την κλάση .somebloсk, αν και δεν χρησιμοποιεί κανάλι άλφα, θα εμφανίζεται σε μορφή RGB.

Οι δεκαεξαδικοί αριθμοί χρησιμοποιούνται για τον καθορισμό των χρωμάτων. Το δεκαεξαδικό σύστημα, σε αντίθεση με το δεκαδικό σύστημα, βασίζεται, όπως υποδηλώνει το όνομά του, στον αριθμό 16. Οι αριθμοί θα είναι οι εξής: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Οι αριθμοί από το 10 έως το 15 αντικαθίστανται από λατινικά γράμματα. Οι αριθμοί μεγαλύτεροι από το 15 στο δεκαεξαδικό σύστημα σχηματίζονται με το συνδυασμό δύο αριθμών σε έναν. Για παράδειγμα, ο αριθμός 255 σε δεκαδικό αριθμό αντιστοιχεί στον αριθμό FF σε δεκαεξαδικό. Για να αποφευχθεί η σύγχυση στον ορισμό του συστήματος αριθμών, του δεκαεξαδικού αριθμού προηγείται το σύμβολο κατακερματισμού #, για παράδειγμα #666999. Καθένα από τα τρία χρώματα - κόκκινο, πράσινο και μπλε - μπορεί να πάρει τιμές από 00 έως FF. Έτσι, ο προσδιορισμός του χρώματος χωρίζεται σε τρία στοιχεία #rrggbb, όπου οι δύο πρώτοι χαρακτήρες σημειώνουν το κόκκινο στοιχείο του χρώματος, οι δύο μεσαίοι σημειώνουν πράσινο και οι δύο τελευταίοι σημειώνουν μπλε. Επιτρέπεται η χρήση της συντομευμένης μορφής #rgb, όπου κάθε χαρακτήρας πρέπει να διπλασιαστεί. Επομένως, η καταχώριση #fe0 θα πρέπει να θεωρείται ως #ffee00.

από όνομα

Τα προγράμματα περιήγησης υποστηρίζουν ορισμένα χρώματα ονομαστικά. Στον πίνακα. 1 δείχνει τα ονόματα, τον δεκαεξαδικό κώδικα, τις τιμές σε μορφή RGB, HSL και περιγραφή.

Με RGB

Μπορείτε να ορίσετε ένα χρώμα χρησιμοποιώντας τις τιμές του κόκκινου, του πράσινου και του μπλε σε δεκαδικούς όρους. Κάθε ένα από τα τρία συστατικά χρώματος παίρνει μια τιμή από 0 έως 255. Είναι επίσης αποδεκτό να ορίσετε το χρώμα ως ποσοστό, ενώ το 100% θα αντιστοιχεί στον αριθμό 255. Πρώτα, καθορίζεται η λέξη-κλειδί rgb και, στη συνέχεια, τα στοιχεία χρώματος καθορίζεται σε αγκύλες, διαχωρισμένα με κόμματα, για παράδειγμα rgb(255 , 128, 128) ή rgb(100%, 50%, 50%).

RGBA

Η μορφή RGBA είναι παρόμοια στη σύνταξη με το RGB, αλλά περιλαμβάνει ένα κανάλι άλφα που ορίζει τη διαφάνεια του στοιχείου. Μια τιμή 0 είναι πλήρως διαφανής, το 1 είναι αδιαφανές και μια ενδιάμεση τιμή όπως το 0,5 είναι ημιδιαφανής.

Το RGBA προστίθεται στο CSS3, επομένως η επικύρωση του κώδικα CSS θα πρέπει να πραγματοποιείται σύμφωνα με αυτήν την έκδοση. Θα πρέπει να σημειωθεί ότι το πρότυπο CSS3 είναι ακόμη υπό ανάπτυξη και ορισμένα από τα χαρακτηριστικά του ενδέχεται να αλλάξουν. Για παράδειγμα, ένα χρώμα RGB που προστίθεται στην ιδιότητα χρώματος φόντου περνά την επικύρωση, αλλά ένα χρώμα που προστίθεται στην ιδιότητα φόντου όχι. Ταυτόχρονα, τα προγράμματα περιήγησης κατανοούν πολύ σωστά το χρώμα και για τις δύο ιδιότητες.

HSL

Το όνομα της μορφής HSL σχηματίζεται από έναν συνδυασμό των πρώτων γραμμάτων Hue (απόχρωση), Saturate (κορεσμός) και Lightness (ελαφρότητα). Η απόχρωση είναι η τιμή χρώματος στον τροχό χρώματος (Εικ. 1) και καθορίζεται σε μοίρες. 0° είναι κόκκινο, 120° είναι πράσινο και 240° μπλε. Η τιμή απόχρωσης μπορεί να ποικίλλει από 0 έως 359.

Ρύζι. 1. Χρώμα τροχού

Ο κορεσμός είναι η ένταση ενός χρώματος, μετρούμενη ως ποσοστό από 0% έως 100%. Μια τιμή 0% υποδηλώνει ότι δεν υπάρχει χρώμα και μια απόχρωση του γκρι, 100% είναι η μέγιστη τιμή κορεσμού.

Το Lightness ορίζει πόσο φωτεινό είναι το χρώμα και καθορίζεται ως ποσοστό από 0% έως 100%. Οι μικρές τιμές κάνουν το χρώμα πιο σκούρο, ενώ οι υψηλές τιμές το κάνουν πιο ανοιχτό, οι ακραίες τιμές 0% και 100% αντιστοιχούν στο ασπρόμαυρο.

HSLA

Η μορφή HSLA είναι παρόμοια στη σύνταξη με την HSL, αλλά περιλαμβάνει ένα κανάλι άλφα που ορίζει τη διαφάνεια του στοιχείου. Μια τιμή 0 είναι πλήρως διαφανής, το 1 είναι αδιαφανές και μια ενδιάμεση τιμή όπως το 0,5 είναι ημιδιαφανής.

Τιμές χρώματος σε Μορφές RGBA, HSL και HSLA προστίθενται στο CSS3, επομένως όταν χρησιμοποιείτε αυτές τις μορφές, ελέγξτε τον κώδικα για εγκυρότητα σε σχέση με την έκδοση.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Προειδοποίηση

Όλες οι μέθοδοι σύλληψης ενός λιονταριού που αναφέρονται στον ιστότοπο είναι θεωρητικές και βασίζονται σε υπολογιστικές μεθόδους. Οι συγγραφείς δεν εγγυώνται την ασφάλειά σας κατά τη χρήση τους και αποποιούνται κάθε ευθύνη για το αποτέλεσμα. Θυμηθείτε, το λιοντάρι είναι ένα αρπακτικό και ένα επικίνδυνο ζώο!

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 2.

Ρύζι. 2. Χρώματα στην ιστοσελίδα

Βλαντ Μέρζεβιτς

Στην HTML, το χρώμα καθορίζεται με έναν από τους δύο τρόπους: χρησιμοποιώντας έναν δεκαεξαδικό κώδικα και με το όνομα ορισμένων χρωμάτων. Η πιο συχνά χρησιμοποιούμενη μέθοδος βασίζεται στο δεκαεξαδικό σύστημα, ως η πιο καθολική.

Δεκαεξαδικά χρώματα

Η HTML χρησιμοποιεί δεκαεξαδικούς αριθμούς για να καθορίσει χρώματα. Το δεκαεξαδικό σύστημα, σε αντίθεση με το δεκαδικό σύστημα, βασίζεται, όπως υποδηλώνει το όνομά του, στον αριθμό 16. Οι αριθμοί θα είναι οι εξής: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Οι αριθμοί από το 10 έως το 15 αντικαθίστανται από λατινικά γράμματα. Στον πίνακα. Το 6.1 δείχνει την αντιστοιχία μεταξύ δεκαδικών και δεκαδικών αριθμών.

Οι αριθμοί μεγαλύτεροι από το 15 στο δεκαεξαδικό σύστημα σχηματίζονται με το συνδυασμό δύο αριθμών σε έναν (Πίνακας 6.2). Για παράδειγμα, ο αριθμός 255 σε δεκαδικό αριθμό αντιστοιχεί στον αριθμό FF σε δεκαεξαδικό.

Για να αποφευχθεί η σύγχυση στον ορισμό του συστήματος αριθμών, του δεκαεξαδικού αριθμού προηγείται το σύμβολο της λίρας #, για παράδειγμα #aa69cc. Σε αυτήν την περίπτωση, η περίπτωση δεν έχει σημασία, επομένως επιτρέπεται να γράψετε #F0F0F0 ή #f0f0f0.

Ένα τυπικό χρώμα που χρησιμοποιείται σε HTML είναι το εξής.

Εδώ, το χρώμα φόντου της ιστοσελίδας έχει οριστεί σε #FA8E47. Το σύμβολο της λίρας # μπροστά από έναν αριθμό σημαίνει ότι είναι δεκαεξαδικό. Τα δύο πρώτα ψηφία (FA) ορίζουν το κόκκινο στοιχείο του χρώματος, το τρίτο έως το τέταρτο ψηφία (8E) το πράσινο στοιχείο και τα δύο τελευταία ψηφία (47) το μπλε στοιχείο. Το τελικό αποτέλεσμα είναι αυτό το χρώμα.

Καθένα από τα τρία χρώματα - κόκκινο, πράσινο και μπλε - μπορεί να πάρει τιμές από 00 έως FF, το οποίο τελικά σχηματίζει 256 αποχρώσεις. Έτσι, ο συνολικός αριθμός χρωμάτων μπορεί να είναι 256x256x256 = 16.777.216 συνδυασμοί. Το χρωματικό μοντέλο που βασίζεται στα κόκκινα, πράσινα και μπλε στοιχεία ονομάζεται RGB (κόκκινο, πράσινο, μπλε, κόκκινο, πράσινο, μπλε). Αυτό το μοντέλο είναι προσθετικό (από προσθήκη - προσθήκη), στο οποίο η προσθήκη και των τριών συστατικών σχηματίζει λευκό.

Για να διευκολύνετε την πλοήγηση σε δεκαεξαδικά χρώματα, λάβετε υπόψη ορισμένους κανόνες.

• Εάν οι τιμές των στοιχείων χρώματος είναι οι ίδιες (για παράδειγμα: #D6D6D6), τότε θα ληφθεί μια γκρι απόχρωση. Όσο μεγαλύτερος είναι ο αριθμός, τόσο πιο ανοιχτό είναι το χρώμα και οι τιμές αλλάζουν από #000000 (μαύρο) σε #FFFFFF (λευκό).
• Ένα έντονο κόκκινο χρώμα σχηματίζεται εάν το κόκκινο συστατικό γίνει μέγιστο (FF) και τα υπόλοιπα στοιχεία ρυθμιστούν στο μηδέν. Το χρώμα με την τιμή #FF0000 είναι η πιο κόκκινη δυνατή κόκκινη απόχρωση. Το ίδιο ισχύει για το πράσινο (#00FF00) και το μπλε (#0000FF).
• Το κίτρινο (#FFFF00) λαμβάνεται με ανάμειξη κόκκινου με πράσινο. Αυτό φαίνεται ξεκάθαρα στον χρωματικό κύκλο (Εικ. 6.1), ο οποίος παρουσιάζει τα κύρια χρώματα (κόκκινο, πράσινο, μπλε) και τα συμπληρωματικά ή συμπληρωματικά. Αυτά περιλαμβάνουν το κίτρινο, το κυανό και το ιώδες (ονομάζονται επίσης ματζέντα). Σε γενικές γραμμές, οποιοδήποτε χρώμα μπορεί να ληφθεί με την ανάμειξη χρωμάτων δίπλα σε αυτό. Έτσι, το κυανό (#00FFFF) προκύπτει συνδυάζοντας μπλε και πράσινο.

Ρύζι. 6.1. Κύκλος χρώματος

Τα χρώματα που βασίζονται σε δεκαεξαδικές τιμές δεν χρειάζεται να επιλέγονται εμπειρικά. Κατάλληλο για το σκοπό αυτό επεξεργαστής γραφικώνπου μπορεί να εργαστεί με διαφορετικά μοντέλα χρωμάτων, για παράδειγμα, Adobe Photoshop. Στο σχ. Το 6.2 δείχνει ένα παράθυρο για την επιλογή ενός χρώματος σε αυτό το πρόγραμμα, η γραμμή κυκλώνει την προκύπτουσα δεκαεξαδική τιμή του τρέχοντος χρώματος. Μπορείτε να το αντιγράψετε και να το επικολλήσετε στον κώδικά σας.

Ρύζι. 6.2. Επιλογέας χρωμάτων στο Photoshop

Χρώματα Ιστού

Εάν ορίσετε την ποιότητα χρώματος της οθόνης σε 8-bit (256 χρώματα), το ίδιο χρώμα μπορεί να εμφανιστεί σε διαφορετικά προγράμματα περιήγησηςμε τον δικό μου τρόπο. Αυτό έχει να κάνει με τον τρόπο απόδοσης των γραφικών όταν το πρόγραμμα περιήγησης λειτουργεί με τη δική του παλέτα και δεν μπορεί να εμφανίσει ένα χρώμα που δεν υπάρχει στην παλέτα του. Σε αυτή την περίπτωση, το χρώμα αντικαθίσταται από έναν συνδυασμό pixel άλλων, κοντά σε αυτό, χρωμάτων που μιμούνται το δεδομένο. Προκειμένου το χρώμα να παραμείνει το ίδιο σε διαφορετικά προγράμματα περιήγησης, εισήχθη μια παλέτα με τα λεγόμενα χρώματα web. Τα χρώματα Ιστού είναι τέτοια χρώματα, για κάθε στοιχείο του οποίου - κόκκινο, πράσινο και μπλε - έχει οριστεί μία από τις έξι τιμές - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). Η δεκαεξαδική τιμή αυτού του στοιχείου υποδεικνύεται σε παρενθέσεις. Ο συνολικός αριθμός χρωμάτων από όλους τους πιθανούς συνδυασμούς δίνει 6x6x6 - 216 χρώματα. Ένα παράδειγμα χρώματος ιστού είναι το #33FF66.

Το κύριο χαρακτηριστικό του χρώματος ιστού είναι ότι εμφανίζεται το ίδιο σε όλα τα προγράμματα περιήγησης. Αυτή τη στιγμή, η συνάφεια των χρωμάτων web είναι πολύ μικρή λόγω της βελτίωσης της ποιότητας των οθονών και της επέκτασης των δυνατοτήτων τους.

Χρώματα με το όνομα

Για να μην θυμάστε μια συλλογή αριθμών, μπορείτε να χρησιμοποιήσετε τα ονόματα των χρωμάτων που χρησιμοποιούνται συνήθως. Στον πίνακα. Το 6.3 δείχνει τα ονόματα των δημοφιλών ονομάτων χρωμάτων.

Δεν έχει σημασία πώς προσδιορίζετε το χρώμα - με το όνομά του ή χρησιμοποιώντας δεκαεξαδικούς αριθμούς. Ως προς την επίδρασή τους, αυτές οι μέθοδοι είναι ίσες. Το Παράδειγμα 6-1 δείχνει πώς να ορίσετε τα χρώματα φόντου και κειμένου μιας ιστοσελίδας.

Παράδειγμα 6.1. Χρώμα φόντου και κειμένου

Δείγμα κειμένου

ΣΤΟ αυτό το παράδειγματο χρώμα φόντου ορίζεται χρησιμοποιώντας το χαρακτηριστικό bgcolor της ετικέτας , και το χρώμα του κειμένου μέσω του χαρακτηριστικού κειμένου. Για ποικιλία, η τιμή του χαρακτηριστικού κειμένου ορίζεται σε δεκαεξαδικό αριθμό και το bgcolor σε δεσμευμένη τιμή. λέξη-κλειδίβάσκας.