>>Διαχείριση χρωμάτων
Δεκαεξαδικές τιμές χρώματος RGB
Οι μέθοδοι για την περιγραφή και την επεξεργασία των χρωμάτων διαφέρουν μεταξύ τους ως προς την τελική αναπαράσταση για την οποία προορίζονται. Ας συγκρίνουμε, για παράδειγμα, αναπαραστάσεις χρωμάτων για την πολυγραφία και για οθόνες υπολογιστών. Στην πρώτη περίπτωση, η βάση είναι άσπροτο χρώμα του χαρτιού στο οποίο εφαρμόζονται στη συνέχεια τα τρία βασικά χρώματα: μπλε, μωβκαι κίτρινος. Ανακατεύοντας μεταξύ τους και με το λευκό χρώμα του χαρτιού σε διαφορετικές αναλογίες, αυτά τα τρία βασικά χρώματα δίνουν διαφορετικές χρωματικές αποχρώσεις, εκτός από το καθαρό μαύρο, ή σε περίπτωση παντελούς απουσίας χρωμάτων δίνουν λευκό χαρτί. Αν τους προσθέσουμε μαύρο, παίρνουμε CMYK- ένας τρόπος μεταφοράς χρώματος όταν το επιθυμητό χρώμα λαμβάνεται αφαιρώντας τα χρώματα που λείπουν από το λευκό.
Στη δεύτερη περίπτωση, η βάση είναι μαύροςτο χρώμα της οθόνης της οθόνης, κάθε κελί της οποίας λάμπει σε ένα από τα τρία χρώματα: το κόκκινο-το κόκκινο, πράσινος-πράσινο και μπλε-μπλε. Στη συνέχεια, ελλείψει οποιασδήποτε λάμψης, παίρνουμε ένα καθαρό μαύρο χρώμα της οθόνης και οποιοδήποτε από τα απαιτούμενα χρώματα δίνεται από την αναλογία καθενός από τα τρία χρώματα. Σε αυτή την περίπτωση θα πάρουμε RGB- Μέθοδος μεταφοράς χρώματος. Τα βασικά χρώματα μπορούν να έχουν νόημα από 0
πριν 255
, ή από 0%
πριν 100%
, ή μπορεί να αναπαρασταθεί ως δεκαεξαδική τιμή. Στο παρακάτω σχήμα μπορείτε να δείτε τα αποτελέσματα της ανάμειξης των βασικών χρωμάτων.
Το δεκαεξαδικό σύστημα αριθμών, σε αντίθεση με το δεκαδικό σύστημα αριθμών, δεν έχει δέκα ψηφία στη σειρά των ψηφίων του, αλλά δεκαέξι - εξ ου και το όνομα. Συνεπώς, οι μη επαναλαμβανόμενες παραλλαγές συνδυασμών δύο ψηφίων μπορούν να είναι μόνο - 256 , για να συνεχίσετε τη σειρά των ψηφίων μετά 9 γράμματα από ΕΝΑπριν φά, οπότε η σειρά θα μοιάζει με αυτό -
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
Σε αυτήν την περίπτωση, το χρώμα δίνεται από τρεις δεκαεξαδικούς αριθμούς, ο καθένας από τους οποίους αποτελείται από δύο ψηφία. Ο πρώτος αριθμός καθορίζει την ένταση το κόκκινοχρώματα, μέτρια πράσινος, το τελευταίο πράγμα- μπλεχρωματιστά. Όλοι οι αριθμοί μπορούν να λάβουν τιμές που κυμαίνονται από 00 πριν FF(από 0 έως 255). Για παράδειγμα: το πράσινο χρώμα δίνεται ως #00FF00, κόκκινο - σαν #FF0000, μπλε - σαν #0000FF, λευκό - σαν #FFFFFF, πλήρης απουσίαχρώματα ή μαύρο δίνεται ως #000000 .
Στην παρακάτω φόρμα, μπορείτε να ορίσετε οποιεσδήποτε δεκαεξαδικές τιμές για καθένα από τα τρία χρώματα και να δείτε το αποτέλεσμα της ανάμειξής τους κάνοντας κλικ στο πεδίο εξόδου.
Παραδείγματα ορισμένων δεκαεξαδικών τιμών χρώματος RGB: διαβαθμίσεις κόκκινου, μπλε και πράσινου.
θέα | ο κώδικας | θέα | ο κώδικας | θέα | ο κώδικας | θέα | ο κώδικας | θέα | ο κώδικας | θέα | ο κώδικας |
#010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
#100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
#200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
#300000 | #B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
#400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
#500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
#600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
#700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
Καθορισμός χρώματος με κυριολεκτικά συμβολοσειράς
Για ευκολία στη χρήση, σε ορισμένα χρώματα και στους συνδυασμούς τους δόθηκαν ονόματα που αναγνωρίζονται από όλα τα προγράμματα περιήγησης και κατέστη δυνατό να οριστούν πολλά από αυτά ονομαστικά. Ο παρακάτω πίνακας δείχνει μερικά από τα ονόματα των χρωμάτων:
θέα | όνομα | θέα | όνομα | θέα | όνομα | θέα | όνομα |
άσπρο | το κόκκινο | Πορτοκάλι | Κίτρινος | ||||
Πράσινος | Μπλε | Μωβ | Μαύρος | ||||
Αλίκη μπλε | αντίκα λευκό | Aqua | ακουαμαρίνης | ||||
Γαλανός | Μπεζ | Είδος πυκνής σούπας | blanchedalmond | ||||
Μπλε βιολετί | καφέ | Burlywood | Cadetblue | ||||
κιτρινοπράσινος | Σοκολάτα | Κοράλλι | Αραβοσίτου | ||||
Μετάξι καλαμποκιού | βυσσινί | κυανό | σκούρο μπλε | ||||
Σκοτεινός | σκοτεινόχρυσο ραβδί | σκούρο γκρίζο | σκούρο πράσινο | ||||
Darkkhaki | Darkmagenta | Darkolivegreen | σκούρο πορτοκαλί | ||||
Darkorchid | σκούρο κόκκινο | σκοτεινός σολομός | Σκοτεινό πράσινο | ||||
σκούρο μπλε | γκρι σκούρο σχιστόλιθο | σκούρο τιρκουάζ | Σκούρο βιολετί | ||||
Βαθύ ροζ | βαθύ μπλε του ουρανού | Dimgray | ντότζερ μπλε | ||||
Πυρίμαχο τούβλο | Λουλουδάτο λευκό | πράσινο του δάσους | Φούσκια | ||||
Gainsboro | λευκό φάντασμα | Χρυσός | Goldenrod | ||||
Γκρί | Πράσινο κίτρινο | Μελίτωμα | καυτό ροζ | ||||
Ινδικό κόκκινο | Ινδικό | Ελεφαντόδοντο | Χακί | ||||
Λεβάντα | Κόκκινο λεβάντας | Λεμονσιφόν | γαλάζιο | ||||
ελαφρύ κοράλλι | ανοιχτόχρωμος | ανοιχτόχρωμο κίτρινο | ανοιχτό πράσινο | ||||
ανοιχτό γκρι | Ανοιχτό ροζ | ελαφρύς σολομός | Lightseagreen | ||||
Ανοιχτό μπλε | Ανοιχτόσχημα γκρι | ανοιχτό ατσάλι | Ανοιχτό κίτρινο | ||||
άσβεστος | Ασβεστοπράσινο | ΛΕΥΚΑ ΕΙΔΗ | Πορφύρα βαφή | ||||
μαρόν | μεσαία ακουαμαρίνη | μέτριο μπλε | Μέτρια ορχιδέα | ||||
Μεσαίο μωβ | Mediumseagreen | Mediumslateblue | Mediumspringgreen | ||||
μεσαίο τιρκουάζ | μεσαίου ιώδους | μεσάνυχτα μπλε | κρέμα μέντας | ||||
mistyrose | Ναβάχολευκο | ΠΟΛΕΜΙΚΟ ΝΑΥΤΙΚΟ | oldlace | ||||
Ελιά | Olivedrab | πορτοκαλοκόκκινο | Ορχιδέα | ||||
palegoldenrod | Απαλό πράσινο | παλετουρκουάζ | παλαιοιώδες | ||||
μαστίγιο παπάγια | Peachpuff | Περού | Ροζ | ||||
Δαμάσκηνο | Μπλε σκόνη | Rosybrown | μπλε ρουά | ||||
καστανή σέλα | πράσινη θάλασσα | Κοχύλι | Χώμα σιένης | ||||
Ασήμι | μπλε του ουρανού | Μπλε σχιστόλιθος | Slategray | ||||
Χιόνι | Springgreen | ατσάλι μπλε | Ηλιοκαμένος | ||||
Βάσκας | Γαϊδουράγκαθο | Ντομάτα | Τουρκουάζ | ||||
βιολέτα | Σιτάρι | Λευκός καπνός | κίτρινο πράσινο |
Χρήση ασφαλούς επιλογής χρωμάτων
Δυστυχώς, στις διαφορετικές πλατφόρμες, με διαφορετικές ρυθμίσεις συστήματος, η σωστή αναπαραγωγή χρωμάτων είναι ένα πρόβλημα. Το θέμα είναι ότι το πρόγραμμα περιήγησης προσπαθεί πάντα να προσαρμόσει την παλέτα χρωμάτων του εγγράφου κάτω ρυθμίσεις συστήματοςκαι τις δυνατότητες παρακολούθησης, αναμιγνύοντας τα χρώματα και αντικαθιστώντας τα. Ως αποτέλεσμα, μερικές φορές ο χρήστης δεν βλέπει ακριβώς αυτό που ήθελε να του δείξει ο webmaster. Η διέξοδος από αυτήν την κατάσταση βρέθηκε στη χρήση μιας παλέτας, κάθε χρώμα της οποίας είναι εγγυημένο ότι θα αποδίδεται με τον ίδιο τρόπο από όλα τα προγράμματα περιήγησης σε διαφορετικές πλατφόρμες. Αυτό το λεγόμενο εγγυημένηπαλέτα, επίσης γνωστή ως ασφαλήςπαλέτα. Αυτή η παλέτα περιλαμβάνει χρώματα των οποίων τα στοιχεία χρώματος λαμβάνουν τις ακόλουθες τιμές: 00 ,33 ,66 ,99 , CC,FF, σε όλα τα δυνατά 216 τους συνδυασμούς τους.
θέα | ο κώδικας | θέα | ο κώδικας | θέα | ο κώδικας | θέα | ο κώδικας | θέα | ο κώδικας | θέα | ο κώδικας |
ΦΦΦΦΦΦ | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
66 FF00 | 66FF33 | 33 FF00 | 33CC00 | 339900 | 009900 | ||||||
33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
CCFFFF | 99FFFF | 66FFFF | 33ΦΦΦΦ | 00FFFF | 00CCCC | ||||||
99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
66CCFF | 33CCFF | 00CCFF | 3399 CC | 0099CC | 003333 | ||||||
99CCFF | 3399FF | 0099FF | 6699 CC | 336699 | 006699 | ||||||
0066FF | 3366 CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
6699FF | 3366FF | 0000 FF | 0000 CC | 0033CC | 000033 | ||||||
3333FF | 3300 FF | 3300 CC | 3333CC | 000099 | 000066 | ||||||
9999 CC | 6666FF | 6666 CC | 666699 | 333399 | 333366 | ||||||
CCCCFF | 9999FF | 6666FF | 6600 FF | 330099 | 330066 | ||||||
9966 CC | 9966FF | 6600 cc | 6633 CC | 663399 | 330033 | ||||||
CC99FF | CC66FF | 9933FF | 9900 FF | 660099 | 663366 | ||||||
CC66FF | CC33FF | CC00FF | 9900 CC | 996699 | 660066 | ||||||
CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
Στην HTML, το χρώμα μπορεί να καθοριστεί με τρεις τρόπους:
Ρύθμιση χρώματος σε HTML με το όνομά του
Ορισμένα χρώματα μπορούν να καθοριστούν με το όνομά τους, χρησιμοποιώντας το όνομα του χρώματος στο αγγλική γλώσσα. Οι πιο συνηθισμένες λέξεις-κλειδιά: μαύρο (μαύρο), λευκό (άσπρο), κόκκινο (κόκκινο), πράσινο (πράσινο), μπλε (μπλε) κ.λπ.:
Χρώμα κειμένου - Κόκκινο
Τα πιο δημοφιλή χρώματα του προτύπου Consortium Παγκόσμιος Ιστός(Αγγλική Κοινοπραξία World Wide Web, W3C):
Χρώμα | Ονομα | Χρώμα | Ονομα | Χρώμα | Ονομα | Χρώμα | Ονομα |
---|---|---|---|---|---|---|---|
Μαύρος | Γκρί | Ασήμι | άσπρο | ||||
Κίτρινος | άσβεστος | Aqua | Φουξία | ||||
το κόκκινο | Πράσινος | Μπλε | Μωβ | ||||
μαρόν | Ελιά | ΠΟΛΕΜΙΚΟ ΝΑΥΤΙΚΟ | Βάσκας |
Ένα παράδειγμα χρήσης διαφορετικών ονομάτων χρωμάτων:
Παράδειγμα: ορίζοντας ένα χρώμα με το όνομά του
- Δοκιμάστε το μόνοι σας"
Κεφαλίδα σε κόκκινο φόντο
Κεφαλίδα σε πορτοκαλί φόντο
Κεφαλίδα σε ασβέστη φόντο
Λευκό κείμενο σε μπλε φόντο
Κεφαλίδα σε κόκκινο φόντο
Κεφαλίδα σε πορτοκαλί φόντο
Κεφαλίδα σε ασβέστη φόντο
Λευκό κείμενο σε μπλε φόντο
Καθορισμός χρώματος με RGB
Όταν εμφανίζονται διαφορετικά χρώματα στην οθόνη, λαμβάνεται ως βάση η παλέτα RGB. Οποιοδήποτε χρώμα λαμβάνεται με ανάμειξη των τριών κύριων: R - κόκκινο, G - πράσινο (πράσινο), Β - μπλε (μπλε). Η φωτεινότητα κάθε χρώματος δίνεται από ένα byte και επομένως μπορεί να πάρει τιμές από 0 έως 255. Για παράδειγμα, το RGB (255,0,0) εμφανίζεται ως κόκκινο επειδή το κόκκινο έχει οριστεί στην υψηλότερη τιμή του (255) και άλλα έχουν οριστεί σε 0 Μπορείτε επίσης να ορίσετε το χρώμα ως ποσοστό. Κάθε μία από τις παραμέτρους υποδεικνύει το επίπεδο φωτεινότητας του αντίστοιχου χρώματος. Για παράδειγμα: οι τιμές rgb(127, 255, 127) και rgb(50%, 100%, 50%) θα ορίσουν το ίδιο πράσινο χρώμα μεσαίου κορεσμού:
Παράδειγμα: Καθορισμός χρώματος με RGB
- Δοκιμάστε το μόνοι σας"
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Ορισμός χρώματος με δεκαεξαδική τιμή
Αξίες R σολ σιμπορεί επίσης να καθοριστεί χρησιμοποιώντας δεκαεξαδικές (HEX) τιμές χρώματος με τη μορφή: #RRGGBB όπου RR (κόκκινο), GG (πράσινο) και BB (μπλε) είναι δεκαεξαδικές τιμές από 00 έως FF (ίδιο με το δεκαδικό 0- 255) . Το δεκαεξαδικό σύστημα, σε αντίθεση με το δεκαδικό σύστημα, βασίζεται, όπως υποδηλώνει το όνομά του, στον αριθμό 16. Το δεκαεξαδικό σύστημα χρησιμοποιεί τους ακόλουθους χαρακτήρες: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Εδώ οι αριθμοί από το 10 έως το 15 αντικαθίστανται από λατινικά γράμματα. Οι αριθμοί μεγαλύτεροι από 15 στο δεκαεξαδικό σύστημα είναι η ένωση δύο χαρακτήρων σε μία τιμή. Για παράδειγμα, ο μεγαλύτερος αριθμός 255 ίντσες μετρικό σύστημααντιστοιχεί στην υψηλότερη τιμή FF σε δεκαεξαδικό. Σε αντίθεση με το δεκαδικό σύστημα, του δεκαεξαδικού αριθμού προηγείται ένα σύμβολο λίρας. # , για παράδειγμα, το #FF0000 αποδίδεται ως κόκκινο επειδή το κόκκινο έχει οριστεί στην υψηλότερη τιμή του (FF) και τα υπόλοιπα χρώματα έχουν οριστεί σε ελάχιστη τιμή(00). Χαρακτήρες μετά το σύμβολο κατακερματισμού # μπορεί να πληκτρολογηθεί τόσο με κεφαλαία όσο και με πεζά. Το δεκαεξαδικό σύστημα σάς επιτρέπει να χρησιμοποιήσετε τη συντομευμένη μορφή #rgb, όπου κάθε χαρακτήρας είναι ίσος με δύο φορές. Επομένως, η καταχώριση #f7O θα πρέπει να θεωρείται ως #ff7700.
Παράδειγμα: Έγχρωμο HEX
- Δοκιμάστε το μόνοι σας"
κόκκινο: #FF0000
πράσινο: #00FF00
μπλε: #0000FF
κόκκινο: #FF0000
πράσινο: #00FF00
μπλε: #0000FF
κόκκινο+πράσινο=κίτρινο: #FFFF00
κόκκινο+μπλε=μοβ: #FF00FF
πράσινο+μπλε=κυανό: #00FFFF
Λίστα των χρωμάτων που χρησιμοποιούνται συνήθως (όνομα, HEX και RGB):
Αγγλικός τίτλος | Ρωσικό όνομα | Δείγμα | ΜΑΓΕΥΩ | RGB | ||
---|---|---|---|---|---|---|
Αμάραντος | αμάραντος | #E52B50 | 229 | 43 | 80 | |
Κεχριμπάρι | Κεχριμπάρι | #FFBF00 | 255 | 191 | 0 | |
Aqua | μπλε πράσινο | #00FFFF | 0 | 255 | 255 | |
Γαλανός | Γαλανός | #007FFF | 0 | 127 | 255 | |
Μαύρος | Μαύρος | #000000 | 0 | 0 | 0 | |
Μπλε | Μπλε | #0000FF | 0 | 0 | 255 | |
Bondi Blue | Το νερό της παραλίας Bondi | #0095B6 | 0 | 149 | 182 | |
Ορείχαλκος | Ορείχαλκος | #B5A642 | 181 | 166 | 66 | |
καφέ | καφέ | #964B00 | 150 | 75 | 0 | |
Κυανός | Γαλανός | #007BA7 | 0 | 123 | 167 | |
σκούρο ανοιξιάτικο πράσινο | Σκούρο πράσινο της άνοιξης | #177245 | 23 | 114 | 69 | |
σμαράγδι | σμαράγδι | #50C878 | 80 | 200 | 120 | |
Μελιτζάνα | μελιτζάνα | #990066 | 153 | 0 | 102 | |
Φουξία | Φουξία | #FF00FF | 255 | 0 | 255 | |
Χρυσός | Χρυσός | #FFD700 | 250 | 215 | 0 | |
Γκρί | Γκρί | #808080 | 128 | 128 | 128 | |
Πράσινος | Πράσινος | #00FF00 | 0 | 255 | 0 | |
Ινδικό | Ινδικό | #4B0082 | 75 | 0 | 130 | |
Νεφρίτης | Νεφρίτης | #00A86B | 0 | 168 | 107 | |
άσβεστος | Ασβεστος | #CCFF00 | 204 | 255 | 0 | |
Μαλαχίτης | Μαλαχίτης | #0BDA51 | 11 | 218 | 81 | |
ΠΟΛΕΜΙΚΟ ΝΑΥΤΙΚΟ | Σκούρο μπλε | #000080 | 0 | 0 | 128 | |
Ωχρα | Ωχρα | #CC7722 | 204 | 119 | 34 | |
Ελιά | Ελιά | #808000 | 128 | 128 | 0 | |
Πορτοκάλι | Πορτοκάλι | #FFA500 | 255 | 165 | 0 | |
ροδάκινο | Ροδάκινο | #FFE5B4 | 255 | 229 | 180 | |
Κολοκύθι | Κολοκύθι | #FF7518 | 255 | 117 | 24 | |
Μωβ | Βιολέτα | #800080 | 128 | 0 | 128 | |
το κόκκινο | το κόκκινο | #FF0000 | 255 | 0 | 0 | |
Κρόκος | Κρόκος | #F4C430 | 244 | 196 | 48 | |
πράσινο της θάλασσας | πράσινη θάλασσα | #2E8B57 | 46 | 139 | 87 | |
Βάλτο πράσινο | Μπολότνι | #ACB78E | 172 | 183 | 142 | |
Βάσκας | μπλε πράσινο | #008080 | 0 | 128 | 128 | |
Βαθύ γαλάζιο | βαθύ γαλάζιο | #120A8F | 18 | 10 | 143 | |
βιολέτα | Βιολέτα | #8B00FF | 139 | 0 | 255 | |
Κίτρινος | Κίτρινος | #FFFF00 | 255 | 255 | 0 |
Χρωματικοί κωδικοί (φόντο) κατά κορεσμό και απόχρωση.
Βλαντ Μέρζεβιτς
Στην 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) το μπλε στοιχείο. Το τελικό αποτέλεσμα είναι αυτό το χρώμα.
ΦΑ | + | 8Ε | + | 47 | = | FA8E47 |
Καθένα από τα τρία χρώματα - κόκκινο, πράσινο και μπλε - μπορεί να πάρει τιμές από 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 δείχνει τα ονόματα των δημοφιλών ονομάτων χρωμάτων.
Όνομα χρώματος | Χρώμα | Περιγραφή | Δεκαεξαδική τιμή |
---|---|---|---|
μαύρος | Μαύρος | #000000 | |
μπλε | Μπλε | #0000FF | |
φουξία | Ανοιχτό μωβ | #FF00FF | |
γκρί | Σκούρο γκρι | #808080 | |
πράσινος | Πράσινος | #008000 | |
άσβεστος | ανοιχτό πράσινο | #00FF00 | |
μαρόν | Σκούρο κόκκινο | #800000 | |
ΠΟΛΕΜΙΚΟ ΝΑΥΤΙΚΟ | Σκούρο μπλε | #000080 | |
ελιά | Ελιά | #808000 | |
μωβ | Σκούρο βιολετί | #800080 | |
το κόκκινο | το κόκκινο | #FF0000 | |
ασήμι | ανοιχτό γκρι | #C0C0C0 | |
βάσκας | μπλε πράσινο | #008080 | |
άσπρο | άσπρο | #FFFFFF | |
κίτρινος | Κίτρινος | #FFFF00 |
Δεν έχει σημασία πώς προσδιορίζετε το χρώμα - με το όνομά του ή χρησιμοποιώντας δεκαεξαδικούς αριθμούς. Ως προς την επίδρασή τους, αυτές οι μέθοδοι είναι ίσες. Το Παράδειγμα 6-1 δείχνει πώς να ορίσετε τα χρώματα φόντου και κειμένου μιας ιστοσελίδας.
Παράδειγμα 6.1. Χρώμα φόντου και κειμένου
Δείγμα κειμένου
Σε αυτό το παράδειγμα, το χρώμα φόντου ορίζεται χρησιμοποιώντας το χαρακτηριστικό bgcolor της ετικέτας
, και το χρώμα του κειμένου μέσω του χαρακτηριστικού κειμένου. Για ποικιλία, η τιμή του χαρακτηριστικού κειμένου ορίζεται σε δεκαεξαδικό αριθμό και το bgcolor στη δεσμευμένη λέξη-κλειδί teal .Οι δεκαεξαδικοί αριθμοί χρησιμοποιούνται για τον καθορισμό των χρωμάτων. Το δεκαεξαδικό σύστημα, σε αντίθεση με το δεκαδικό σύστημα, βασίζεται, όπως υποδηλώνει το όνομά του, στον αριθμό 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.
από όνομα
Internet Explorer | Χρώμιο | ΛΥΡΙΚΗ ΣΚΗΝΗ | σαφάρι | Firefox | Android | iOS |
4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Τα προγράμματα περιήγησης υποστηρίζουν ορισμένα χρώματα ονομαστικά. Στον πίνακα. 1 δείχνει τα ονόματα, τον δεκαεξαδικό κώδικα, τις τιμές σε μορφή RGB, HSL και περιγραφή.
Ονομα | Χρώμα | Ο κώδικας | RGB | HSL | Περιγραφή |
---|---|---|---|---|---|
άσπρο | #ffffff ή #fff | rgb(255,255,255) | hsl(0,0%,100%) | άσπρο | |
ασήμι | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | Γκρί | |
γκρί | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Σκούρο γκρι | |
μαύρος | #000000 ή #000 | rgb(0,0,0) | hsl(0,0%,0%) | Μαύρος | |
μαρόν | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Σκούρο κόκκινο | |
το κόκκινο | #ff0000 ή #f00 | rgb(255,0,0) | hsl(0,100%,50%) | το κόκκινο | |
πορτοκάλι | #ffa500 | rgb(255,165,0) | hsl(38,8,100%,50%) | Πορτοκάλι | |
κίτρινος | #ffff00 ή #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Κίτρινος | |
ελιά | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Ελιά | |
άσβεστος | #00ff00 ή #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | ανοιχτό πράσινο | |
πράσινος | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Πράσινος | |
aqua | #00ffff ή #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Μπλε | |
μπλε | #0000ff ή #00f | rgb(0,0,255) | hsl(240,100%,50%) | Μπλε | |
ΠΟΛΕΜΙΚΟ ΝΑΥΤΙΚΟ | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Σκούρο μπλε | |
βάσκας | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | μπλε πράσινο | |
φουξία | #ff00ff ή #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Ροζ | |
μωβ | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Βιολέτα |
Με RGB
Internet Explorer | Χρώμιο | ΛΥΡΙΚΗ ΣΚΗΝΗ | σαφάρι | Firefox | Android | iOS |
5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Μπορείτε να ορίσετε ένα χρώμα χρησιμοποιώντας τις τιμές του κόκκινου, του πράσινου και του μπλε σε δεκαδικούς όρους. Κάθε ένα από τα τρία συστατικά χρώματος παίρνει μια τιμή από 0 έως 255. Είναι επίσης αποδεκτό να ορίσετε το χρώμα ως ποσοστό, ενώ το 100% θα αντιστοιχεί στον αριθμό 255. Αρχικά, καθορίστε λέξη-κλειδί rgb και, στη συνέχεια, σε αγκύλες, διαχωρισμένες με κόμμα, καθορίστε τα στοιχεία χρώματος, για παράδειγμα, rgb(255, 128, 128) ή rgb(100%, 50%, 50%).
RGBA
Internet Explorer | Χρώμιο | ΛΥΡΙΚΗ ΣΚΗΝΗ | σαφάρι | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Η μορφή RGBA είναι παρόμοια στη σύνταξη με το RGB, αλλά περιλαμβάνει ένα κανάλι άλφα που ορίζει τη διαφάνεια του στοιχείου. Μια τιμή 0 είναι πλήρως διαφανής, το 1 είναι αδιαφανές και μια ενδιάμεση τιμή όπως το 0,5 είναι ημιδιαφανής.
Το RGBA προστίθεται στο CSS3, επομένως η επικύρωση του κώδικα CSS θα πρέπει να πραγματοποιείται σύμφωνα με αυτήν την έκδοση. Θα πρέπει να σημειωθεί ότι το πρότυπο CSS3 είναι ακόμη υπό ανάπτυξη και ορισμένα από τα χαρακτηριστικά του ενδέχεται να αλλάξουν. Για παράδειγμα, ένα χρώμα RGB που προστίθεται στην ιδιότητα χρώματος φόντου περνά την επικύρωση, αλλά ένα χρώμα που προστίθεται στην ιδιότητα φόντου όχι. Ταυτόχρονα, τα προγράμματα περιήγησης κατανοούν πολύ σωστά το χρώμα και για τις δύο ιδιότητες.
HSL
Internet Explorer | Χρώμιο | ΛΥΡΙΚΗ ΣΚΗΝΗ | σαφάρι | Firefox | Android | iOS |
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Ονομα Μορφή HSLπου σχηματίζεται από έναν συνδυασμό των πρώτων γραμμάτων Hue (απόχρωση), Saturate (κορεσμός) και Lightness (ελαφρότητα). Η απόχρωση είναι η τιμή χρώματος στον τροχό χρώματος (Εικ. 1) και καθορίζεται σε μοίρες. 0° είναι κόκκινο, 120° είναι πράσινο και 240° μπλε. Η τιμή απόχρωσης μπορεί να ποικίλλει από 0 έως 359.
Ρύζι. 1. Χρώμα τροχού
Ο κορεσμός είναι η ένταση ενός χρώματος, μετρούμενη ως ποσοστό από 0% έως 100%. Μια τιμή 0% υποδηλώνει ότι δεν υπάρχει χρώμα και μια απόχρωση του γκρι, 100% είναι η μέγιστη τιμή κορεσμού.
Το Lightness ορίζει πόσο φωτεινό είναι το χρώμα και καθορίζεται ως ποσοστό από 0% έως 100%. Οι μικρές τιμές κάνουν το χρώμα πιο σκούρο, ενώ οι υψηλές τιμές το κάνουν πιο ανοιχτό, οι ακραίες τιμές 0% και 100% αντιστοιχούν στο ασπρόμαυρο.
HSLA
Internet Explorer | Χρώμιο | ΛΥΡΙΚΗ ΣΚΗΝΗ | σαφάρι | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Η μορφή HSLA είναι παρόμοια στη σύνταξη με την HSL, αλλά περιλαμβάνει ένα κανάλι άλφα που ορίζει τη διαφάνεια του στοιχείου. Μια τιμή 0 είναι πλήρως διαφανής, το 1 είναι αδιαφανές και μια ενδιάμεση τιμή όπως το 0,5 είναι ημιδιαφανής.
Τιμές χρώματος σε Μορφές RGBA, HSL και HSLA προστίθενται στο CSS3, επομένως όταν χρησιμοποιείτε αυτές τις μορφές, ελέγξτε τον κώδικα για εγκυρότητα σε σχέση με την έκδοση.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Προειδοποίηση
Όλες οι μέθοδοι σύλληψης ενός λιονταριού που αναφέρονται στον ιστότοπο είναι θεωρητικές και βασίζονται σε υπολογιστικές μεθόδους. Οι συγγραφείς δεν εγγυώνται την ασφάλειά σας κατά τη χρήση τους και αποποιούνται κάθε ευθύνη για το αποτέλεσμα. Θυμηθείτε, το λιοντάρι είναι ένα αρπακτικό και ένα επικίνδυνο ζώο!
Αποτέλεσμα αυτό το παράδειγμαφαίνεται στο σχ. 2.
Ρύζι. 2. Χρώματα στην ιστοσελίδα