Κωδικός rgb μωβ χρώματος. Το χρώμα στα στυλ μπορεί να καθοριστεί με διάφορους τρόπους: με δεκαεξαδική τιμή, με όνομα, σε μορφή RGB, RGBA, HSL, HSLA
Όπως γνωρίζετε, το χρώμα μπορεί να επηρεάσει την κατάσταση ενός ατόμου: τόσο ψυχική όσο και σωματική. Καθημερινά, κατά την περιήγηση σε ιστότοπους στο Διαδίκτυο, τα μάτια αξιολογούν εκατομμύρια χρώματα και αποχρώσεις. Ένας σχεδιαστής ιστοσελίδων που είναι εξοικειωμένος με την ψυχολογία του χρώματος μπορεί να χειραγωγήσει τη διάθεση του επισκέπτη για να πετύχει συγκεκριμένους στόχους.
Αυτό οφείλεται στο γεγονός ότι ορισμένες αποχρώσεις ηρεμούν και μερικές, αντίθετα, ενθουσιάζουν. Στη συνέχεια θα μιλήσουμε για το πώς συντίθεται και εμφανίζεται το χρώμα χρησιμοποιώντας τεχνολογία υπολογιστών.
Το RGB είναι ένα χρωματικό μοντέλο που αντιπροσωπεύει μια μέθοδο λήψης όλων των χρωμάτων και των αποχρώσεων τους με ανάμειξη σε διάφορες αναλογίες τριών βασικών συστατικών, τα οποία είναι:
- Κόκκινο χρώμα ( το κόκκινο);
- πράσινο χρώμα ( Πράσινος);
- μπλε χρώμα ( Μπλε).
Από αυτό προέρχεται το συντομευμένο όνομα RGB. Αυτά τα χρώματα επιλέχθηκαν ως τα κύρια για έναν λόγο: ο λόγος είναι η φυσιολογία του αμφιβληστροειδούς του ανθρώπινου ματιού και πώς τα αντιλαμβάνεται:
Το μοντέλο RGB παραμένει το πιο δημοφιλές σήμερα και χρησιμοποιείται για την αναπαραγωγή χρωμάτων σε οθόνες τηλεοράσεων και οθόνες υπολογιστών. Δεδομένου ότι οι κατασκευαστές προικίζουν τα προϊόντα τους με διαφορετικά χαρακτηριστικά, το 1996 δημιουργήθηκε ένα ενοποιημένο σύστημα σύνθεσης χρωμάτων βασισμένο σε RGB που ονομάζεται sRGB, στο οποίο συνεργάστηκαν η Microsoft και η HP.
Αριθμητική αναπαράσταση χρώματος
Όπως αναφέρθηκε προηγουμένως, τα χρώματα RGB σχηματίζονται με την ανάμειξη των βασικών χρωμάτων. Για να περιγραφεί η ένταση καθενός από αυτά, υιοθετήθηκε ένα σχήμα στο οποίο το χρώμα αντιπροσωπεύεται από το εύρος 0-255 (8 bit), το οποίο σε δεκαεξαδικό συμβολισμό αντιστοιχεί σε 00-FF.
Δηλαδή, τα βασικά χρώματα θα μοιάζουν με αυτό:
- Κόκκινο – RGB (255,0,0);
- Πράσινο – RGB (0,255,0);
- Μπλε – RGB (0,0,255);
Εάν η ένταση του χρώματος παίρνει τιμές μικρότερες από 255, τότε λαμβάνονται διαφορετικές αποχρώσεις του κόκκινου, του πράσινου και του μπλε. Ακολουθεί ένας πίνακας με τις διαβαθμίσεις τους, καθώς και τις δεκαεξαδικές τιμές καθεμιάς από τις αποχρώσεις:
Έγχρωμοι πίνακες RGB
Φυσικά, εκτός από τις διαβαθμίσεις των βασικών χρωμάτων, υπάρχουν και μικτά και ο αριθμός τους είναι αρκετά μεγάλος. Ως εκ τούτου, δημιουργήθηκε ένας πίνακας χρωμάτων RGB, ο οποίος παρουσιάζει όλες τις υπάρχουσες αποχρώσεις, καθώς και τα ονόματα και τις αριθμητικές τους αναπαραστάσεις ( σε δεκαδική και δεκαεξαδική μορφή).
Μπορείτε να το δείτε εδώ. Αυτός ο πίνακας κάνει τη ζωή πολύ πιο εύκολη για τους σχεδιαστές ιστοσελίδων, αφού σε λίγα δευτερόλεπτα μπορείτε να βρείτε την απαιτούμενη απόχρωση και να μάθετε την αριθμητική της αναπαράσταση.
Ασφαλής χρωματική παλέτα RGB
Ωστόσο, κάποια στιγμή παρουσιάστηκε ένα πρόβλημα με την εμφάνιση χρωμάτων σε διαφορετικά προγράμματα περιήγησης και για την επίλυσή του, καταρτίστηκε η λεγόμενη «ασφαλής» παλέτα χρωμάτων RGB, τα οποία προέκυψαν με μαθηματικούς υπολογισμούς.
Όταν το πρόγραμμα περιήγησης δεν μπορεί να εμφανίσει σωστά ένα χρώμα, θα προσπαθήσει να βρει κάτι κοντά σε αυτό αναμειγνύοντας διπλανά χρώματα και πιθανότατα το αποτέλεσμα θα είναι εντελώς απαράδεκτο:
Χρησιμοποιώντας κωδικούς χρωμάτων RGB από αυτήν την παλέτα, ένας προγραμματιστής ιστού μπορεί να έχει το κεφάλι του ήσυχο σχετικά με την εμφάνιση των χρωμάτων στις σελίδες του ιστότοπού του όταν τα προβάλλονται χρησιμοποιώντας διαφορετικά προγράμματα περιήγησης, πλατφόρμες και οθόνες. Αν και αυτή τη στιγμή ο πίνακας των ασφαλών χρωμάτων χάνει τη σημασία του ( Η τεχνολογική πρόοδος εξακολουθεί να μην έχει σταματήσει), όταν το χρησιμοποιείτε μπορείτε, όπως λένε, να κοιμάστε ήσυχοι.
Χρυσό χρώμα σε μοντέλο RGB
Η λέξη "χρυσός" χρησιμοποιήθηκε για πρώτη φορά στις αρχές του 14ου αιώνα για να περιγράψει το χρώμα ενός χημικού στοιχείου που ονομάζεται Aurum - χρυσός. Στο μοντέλο RGB, το χρυσό χρώμα αντιπροσωπεύεται από τις ακόλουθες αριθμητικές τιμές:
- RGB (255, 215, 0) – δεκαδικό σύστημα.
- HEX #FFD700 – δεκαεξαδικό σύστημα.
Μπεζ χρώμα σε μοντέλο RGB
Το μπεζ χρώμα καταλαμβάνει μια αρκετά σημαντική θέση στην ιστορία, ακόμα κι αν δεν είναι το πιο εκφραστικό. Πολλά πολιτιστικά μνημεία, ειδικά αρχαία γλυπτά, κατασκευάστηκαν από σαπωνόλιθο και σαπωνόπετρα, που έχουν μπεζ απόχρωση. Στο μοντέλο RGB, το μπεζ χρώμα έχει τις ακόλουθες αριθμητικές αναπαραστάσεις.
Οι χρωματικοί κώδικες στο CSS χρησιμοποιούνται για τον καθορισμό χρωμάτων. Συνήθως, οι χρωματικοί κώδικες ή οι τιμές χρώματος χρησιμοποιούνται για να ορίσετε το χρώμα είτε για το χρώμα προσκηνίου ενός στοιχείου (π.χ. χρώμα κειμένου, χρώμα συνδέσμου) είτε για το χρώμα φόντου ενός στοιχείου (χρώμα φόντου, χρώμα μπλοκ). Μπορούν επίσης να χρησιμοποιηθούν για την αλλαγή του χρώματος ενός κουμπιού, περιγράμματος, δείκτη, αιώρησης και άλλων διακοσμητικών εφέ.
Μπορείτε να καθορίσετε τις τιμές των χρωμάτων σας σε διάφορες μορφές. Ο παρακάτω πίνακας παραθέτει όλες τις πιθανές μορφές:
Οι αναφερόμενες μορφές περιγράφονται λεπτομερέστερα παρακάτω.
Χρώματα CSS - Hex Codes
Δεκαεξαδικός χρωματικός κώδικαςείναι μια εξαψήφια αναπαράσταση του χρώματος. Τα δύο πρώτα ψηφία (RR) αντιπροσωπεύουν την κόκκινη τιμή, τα επόμενα δύο αντιπροσωπεύουν την πράσινη τιμή (GG) και τα δύο τελευταία αντιπροσωπεύουν την μπλε τιμή (BB).
CSS Colors - Short Hex Codes
Σύντομος εξαγωνικός χρωματικός κώδικαςείναι μια συντομότερη μορφή σημειογραφίας έξι χαρακτήρων. Σε αυτή τη μορφή, κάθε ψηφίο επαναλαμβάνεται για να παραχθεί μια ισοδύναμη εξαψήφια τιμή χρώματος. Για παράδειγμα: το #0F0 γίνεται #00FF00.
Η δεκαεξαδική τιμή μπορεί να ληφθεί από οποιοδήποτε λογισμικό γραφικών όπως το Adobe Photoshop, το Core Draw κ.λπ.
Κάθε δεκαεξαδικός χρωματικός κώδικας στο CSS θα έχει ένα σύμβολο κατακερματισμού "#". Ακολουθούν παραδείγματα χρήσης δεκαεξαδικών συμβολισμών.
Χρώματα CSS - Τιμές RGB
Τιμή RGBείναι ένας χρωματικός κώδικας που ορίζεται χρησιμοποιώντας την ιδιότητα rgb(). Αυτή η ιδιότητα παίρνει τρεις τιμές: μία για το κόκκινο, το πράσινο και το μπλε. Η τιμή μπορεί να είναι ένας ακέραιος αριθμός, από το 0 έως το 255, ή ένα ποσοστό.
Σημείωση:Δεν υποστηρίζουν όλα τα προγράμματα περιήγησης την ιδιότητα χρώματος rgb(), επομένως δεν συνιστάται η χρήση της.
Παρακάτω είναι ένα παράδειγμα που δείχνει πολλά χρώματα χρησιμοποιώντας τιμές RGB.
Γεννήτρια κωδικών χρώματος
Μπορείτε να δημιουργήσετε εκατομμύρια χρωματικούς κωδικούς χρησιμοποιώντας την υπηρεσία μας.
Ασφαλή χρώματα προγράμματος περιήγησης
Παρακάτω είναι ένας πίνακας με 216 χρώματα που είναι τα πιο ασφαλή και ανεξάρτητα από τον υπολογιστή. Αυτά τα χρώματα στο CSS κυμαίνονται από 000000 έως δεκαεξαδικό κώδικα FFFFFF. Είναι ασφαλείς στη χρήση, επειδή διασφαλίζουν ότι όλοι οι υπολογιστές εμφανίζουν σωστά το χρώμα όταν εργάζεστε με την παλέτα χρωμάτων 256.
Πίνακας "ασφαλών" χρωμάτων σε CSS | |||||
#000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
#003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
#006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
#009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
#00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
#00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
#330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
#333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
#336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
#339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
#33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
#33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
#660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
#663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
#666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
#669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
#66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
#66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
#990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
#993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
#996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
#999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
#99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
#99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
#CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
#CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
#CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
#CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
#CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
#CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
#FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
#FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
#FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
#FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
#FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
#FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
>>Διαχείριση χρωμάτων
Δεκαεξαδικές τιμές χρώματος 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 |
Καθορισμός χρώματος με χρήση συμβολοσειρών
Για ευκολία στη χρήση, σε ορισμένα χρώματα και στους συνδυασμούς τους εκχωρήθηκαν ονόματα που αναγνωρίζονται από όλα τα προγράμματα περιήγησης και κατέστη δυνατό να οριστούν πολλά από αυτά ονομαστικά. Ο παρακάτω πίνακας δείχνει μερικά από τα ονόματα των χρωμάτων:
θέα | Ονομα | θέα | Ονομα | θέα | Ονομα | θέα | Ονομα |
άσπρο | το κόκκινο | Πορτοκάλι | Κίτρινος | ||||
Πράσινος | Μπλε | Μωβ | Μαύρος | ||||
Aliceblue | Αντικελευκό | Aqua | Ακουαμαρίνης | ||||
Γαλανός | Μπεζ | Είδος πυκνής σούπας | Blanchedalmond | ||||
Μπλε βιολετί | καφέ | Burlywood | Cadetblue | ||||
Κιτρινοπράσινος | Σοκολάτα | Κοράλλι | Αραβοσίτου | ||||
Μετάξι καλαμποκιού | βυσσινί | κυανό | Σκούρο μπλε | ||||
Σκοτεινός | Darkgoldenrod | Σκούρο γκρίζο | Σκούρο πράσινο | ||||
Darkkhaki | Darkmagenta | Darkolivegreen | Σκούρο πορτοκαλί | ||||
Darkorchid | Σκούρο κόκκινο | Darksalmon | Σκοτεινό πράσινο | ||||
Σκούρο μπλε | Darkslategray | Σκούρο τιρκουάζ | Σκούρο βιολετί | ||||
Βαθύ ροζ | Deepskyblue | Dimgray | Dodgeblue | ||||
Πυρίμαχο τούβλο | Λουλουδάσπρη | Πράσινο του δάσους | Φούσκια | ||||
Gainsboro | Ghostwhite | Χρυσός | Goldenrod | ||||
Γκρί | Πράσινο κίτρινο | Μελίτωμα | Καυτό ροζ | ||||
Ινδιάνος | Ινδικό | Ελεφαντόδοντο | Χακί | ||||
Λεβάντα | Κόκκινο λεβάντας | Λεμονσιφόν | Γαλάζιο | ||||
Lightcoral | Lightcyan | Ανοιχτόχρωμο κίτρινο | Ανοιχτό πράσινο | ||||
Ανοιχτό γκρι | Ανοιχτό ροζ | Ελαφρός σολομός | Lightseagreen | ||||
Ανοιχτό μπλε | Lightslategray | Lightsteelblue | Ανοιχτό κίτρινο | ||||
Ασβεστος | Ασβεστοπράσινο | ΛΕΥΚΑ ΕΙΔΗ | Πορφύρα βαφή | ||||
Μαρόν | Mediumaquamarine | Μεσαίο μπλε | Mediumorchid | ||||
Μεσαίο μωβ | Mediumseagreen | mediumslateblue | Mediumspringgreen | ||||
Μεσαίο τιρκουάζ | Μεσαίο βιολετί | Midnightblue | Κρέμα μέντας | ||||
Mistyrose | Ναβάχολευκο | ΠΟΛΕΜΙΚΟ ΝΑΥΤΙΚΟ | Oldlace | ||||
Ελιά | Ολιβεράμπ | Πορτοκαλοκόκκινο | Ορχιδέα | ||||
Palegoldenrod | Απαλό πράσινο | Παλετατουρκουάζ | Παλαιοιώδες | ||||
Papayawhip | Peachpuff | Περού | Ροζ | ||||
Δαμάσκηνο | Μπλε σκόνη | Rosybrown | Μπλε ρουά | ||||
Καφέ σέλα | Πράσινη θάλασσα | Κοχύλι | Χώμα σιένης | ||||
Ασήμι | Skyblue | Slateblue | Slategray | ||||
Χιόνι | Springgreen | Steelblue | Βυρσοδέψω | ||||
Βάσκας | Γαϊδουράγκαθο | Ντομάτα | Τουρκουάζ | ||||
Βιολέτα | Σιτάρι | Λευκός καπνός | Κίτρινο πράσινο |
Χρησιμοποιώντας μια ασφαλή χρωματική παλέτα
Δυστυχώς, σε διαφορετικές πλατφόρμες, με διαφορετικές ρυθμίσεις συστήματος, η σωστή αναπαραγωγή χρωμάτων είναι ένα πρόβλημα. Το θέμα είναι ότι το πρόγραμμα περιήγησης προσπαθεί πάντα να προσαρμόσει την παλέτα χρωμάτων του εγγράφου στις ρυθμίσεις συστήματος και τις δυνατότητες παρακολούθησης, αναμειγνύοντας ανεξάρτητα χρώματα και αντικαθιστώντας τα. Ως αποτέλεσμα, μερικές φορές ο χρήστης δεν βλέπει ακριβώς αυτό που ήθελε να του δείξει ο 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 με το όνομά του
Ορισμένα χρώματα μπορούν να καθοριστούν με το όνομά τους, χρησιμοποιώντας το όνομα χρώματος στα Αγγλικά ως τιμή. Οι πιο συνηθισμένες λέξεις-κλειδιά: μαύρο, λευκό, κόκκινο, πράσινο, μπλε κ.λπ.:
Χρώμα κειμένου - κόκκινο
Τα πιο δημοφιλή χρώματα του προτύπου World Wide Web Consortium (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 άλλων, κοντά σε αυτό, χρωμάτων που μιμούνται το δεδομένο. Για να διασφαλιστεί ότι το χρώμα παραμένει το ίδιο σε διαφορετικά προγράμματα περιήγησης, εισήχθη μια παλέτα με τα λεγόμενα χρώματα ιστού. Τα χρώματα Ιστού είναι εκείνα τα χρώματα για τα οποία κάθε στοιχείο - κόκκινο, πράσινο και μπλε - έχει οριστεί σε μία από τις έξι τιμές - 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 της ετικέτας
και το χρώμα του κειμένου μέσω του χαρακτηριστικού κειμένου. Για ποικιλία, το χαρακτηριστικό text ορίζεται σε δεκαεξαδικό αριθμό και το χαρακτηριστικό bgcolor ορίζεται στη δεσμευμένη λέξη-κλειδί teal .