Κώδικας μωβ χρώματος στο Photoshop. Το χρώμα στα στυλ μπορεί να καθοριστεί με διάφορους τρόπους: με δεκαεξαδική τιμή, με όνομα, σε μορφή RGB, RGBA, HSL, HSLA
Οι χρωματικοί κώδικες στο 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 |
Δυστυχώς, δεν είναι ακόμη δυνατή η εμφάνιση γευστικών αισθήσεων στον ιστότοπο. Αλλά αυτό μπορεί να αντισταθμιστεί πλήρως με τη βοήθεια των χρωμάτων. Εξάλλου, τα χρώματα html σάς επιτρέπουν να εμφανίζετε οποιαδήποτε από τις εκατομμύρια αποχρώσεις. Ετσι " χρωματιστά μολύβιαΥπάρχουν πολλά περισσότερα από επτά στο σετ του.
Χρωματικός συνδυασμός σε html
Στο html, το χρώμα μπορεί να καθοριστεί σε διάφορες μορφές:
1. Ως δεκαεξαδική τιμή – χρησιμοποιείται ο κωδικός που καθορίζεται στο σύστημα δεκαεξαδικών αριθμών. Τέτοιοι χρωματικοί κώδικες στο html αποτελούνται από τρία ζεύγη δεκαεξαδικών αριθμών. Κάθε ζευγάρι είναι υπεύθυνο για τον κορεσμό της απόχρωσης με το κύριο χρώμα του:
- Το πρώτο αριθμητικό ζεύγος είναι υπεύθυνο για το κόκκινο χρώμα.
- Το δεύτερο ζεύγος είναι για το περιεχόμενο πράσινου χρώματος.
- Το τελευταίο είναι για το μπλε περιεχόμενό του.
Ένα σημάδι κατακερματισμού τοποθετείται στην αρχή του κωδικού (πριν από τους αριθμούς). Αυτός είναι ο δεκαεξαδικός χρωματικός κώδικας. Εκτός από τους αριθμούς από το 1 έως το 9, αυτό το σύστημα αριθμών χρησιμοποιεί γράμματα του λατινικού αλφαβήτου (A, B, C, D, E, F).
Για παράδειγμα, ο κώδικας λευκού χρώματος στο html θα μοιάζει με #FFFFFF:
2. Λέξη-κλειδί – Η HTML υποστηρίζει αυτήν τη στιγμή περίπου 147 λέξεις-κλειδιά. Αλλά δεν είναι όλες αυτές οι λέξεις μοναδικές. Κάποια από αυτά αναφέρονται στην ίδια χρωματική απόχρωση.
Το γκρι χρώμα αντιπροσωπεύεται από δύο λέξεις-κλειδιά: γκρι και γκρι . Ο δεκαεξαδικός κωδικός τους (HEX) δίνεται με την ίδια τιμή #808080.
Παράδειγμα:
#808080
3. Σε μορφή RGB - αυτή η χρωματική κωδικοποίηση σε html βασίζεται στη χρήση τριών τιμών, που ορίζονται στην περιοχή από 0 έως 255. Καθεμία από αυτές καθορίζει τον κορεσμό της απόχρωσης με ένα από τα κύρια χρώματα:
- R – κόκκινο (κόκκινο);
- G – πράσινο (πράσινο).
- Β – μπλε (μπλε).
Ο αριθμός χρώματος σε μορφή RGB γράφεται με την ακόλουθη μορφή: rgb(0, 210, 100).
φόντο-χρώμα:rgb(100,186,43)
4. Στη μορφή RGBA - είναι μια βελτιωμένη μορφή RGB, όπου η τέταρτη τιμή καθορίζει τη διαφάνεια του χρώματος ως δεκαδικό κλάσμα από το 0 έως το 1.
Παράδειγμα χρήσης:
φόντο-χρώμα:rgba(100,86,143,0.2)
φόντο-χρώμα:rgba(100,86,143,0.5)
φόντο-χρώμα:rgba(100,86,143,0.8)
φόντο-χρώμα:rgba(100,86,143,1)
Πίνακες χρωμάτων HTML και γεννήτριες χρωμάτων
Με τόσο μεγάλη γκάμα μορφών ρύθμισης χρώματος, είναι εύκολο να μπερδευτείτε. Ως εκ τούτου, εφευρέθηκε ένας ειδικός πίνακας χρωμάτων. Παρέχει 147 βασικά ονόματα αποχρώσεων χρώματος με κωδικούς συμμόρφωσης σε όλα τα βασικά πρότυπα χρώματος. Επιπλέον, κάθε πεδίο είναι εξοπλισμένο με μια γραμμή για οπτική επιλογή χρώματος. Ένας από αυτούς τους πίνακες παρουσιάζεται στον ιστότοπο colorscheme.ru:
Αλλά ακόμα και με αυτή τη δομή ταιριάσματος, η επιλογή της σωστής απόχρωσης μπορεί να είναι δύσκολη. Και δεν είναι γεγονός ότι ο πίνακας με τους χρωματικούς κωδικούς θα περιέχει αυτόν που χρειάζεστε.
Για να ξεπεράσετε αυτό το εμπόδιο και να κάνετε την επιλογή της σωστής απόχρωσης όσο το δυνατόν πιο εύκολη, έχουν αναπτυχθεί διαδραστικές υπηρεσίες web. Η διεπαφή χρήστη τους μπορεί να διαφέρει ελαφρώς μεταξύ τους.
Στον ιστότοπο html-color-codes.info η γεννήτρια χρωμάτων μοιάζει με αυτό:
Και στην υπηρεσία color-picker.appsmaster.co, αυτό το εργαλείο εφαρμόζεται λίγο διαφορετικά:
Ο κορεσμός κάθε χρώματος στη γεννήτρια ρυθμίζεται χρησιμοποιώντας ειδικά ρυθμιστικά. Οπτικά, η απόχρωση εμφανίζεται από το χρώμα του πλαισίου και του ορθογωνίου στην αριστερή πλευρά. Στο κάτω μέρος, 3 πεδία εμφανίζουν τον κωδικό χρώματος σε βασικές μορφές.
Αλλά η γεννήτρια χρωμάτων είναι διαθέσιμη όχι μόνο σε εξειδικευμένους ιστότοπους. Σχεδόν όλοι οι επεξεργαστές γραφικών είναι εξοπλισμένοι με ένα παρόμοιο εργαλείο. Για παράδειγμα, Photoshop:
Προφυλάξεις ασφαλείας κατά την εργασία με χρώμα
Και αυτό ήταν πολύ καιρό πριν, πίσω στην εποχή των καρτών βίντεο που υποστήριζαν μόνο 256 χρώματα. Σε αυτούς τους μακρινούς χρόνους, τα λειτουργικά συστήματα μπορούσαν να εμφανίσουν μόνο έναν ορισμένο αριθμό αποχρώσεων οκτώ bit χωρίς παραμόρφωση.
Στη συνέχεια αναπτύχθηκε ένας υπέροχος πίνακας ασφαλών χρωμάτων. Προσδιόρισε 216 αποχρώσεις που μπορούσαν να εμφανιστούν χωρίς παραμόρφωση σε κανένα από τα προγράμματα περιήγησης εκείνης της εποχής. Και μέχρι σήμερα αυτό» σπουδαίο χειρόγραφο» είναι ακόμα διαθέσιμο σε ορισμένους πόρους:
Στις μέρες μας όλα έχουν αλλάξει. Επομένως, όλοι οι κανόνες ασφαλείας κατά την εργασία με χρώμα σε html ακυρώνονται εντελώς. Εξάλλου, το σύγχρονο υλικό υπολογιστών υποστηρίζει περισσότερες από 16 εκατομμύρια διαφορετικές αποχρώσεις. Και 216 ασφαλή χρώματα έχουν βυθιστεί στη λήθη.
Οι δεκαεξαδικοί αριθμοί χρησιμοποιούνται για τον καθορισμό των χρωμάτων. Το δεκαεξαδικό σύστημα, σε αντίθεση με το δεκαδικό σύστημα, βασίζεται, όπως υποδηλώνει το όνομά του, στον αριθμό 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. Χρώματα στην ιστοσελίδα
26/02/15 8,9ΚΌπως γνωρίζετε, το χρώμα μπορεί να επηρεάσει την κατάσταση ενός ατόμου: τόσο ψυχική όσο και σωματική. Καθημερινά, κατά την περιήγηση σε ιστότοπους στο Διαδίκτυο, τα μάτια αξιολογούν εκατομμύρια χρώματα και αποχρώσεις. Ένας σχεδιαστής ιστοσελίδων που είναι εξοικειωμένος με την ψυχολογία του χρώματος μπορεί να χειραγωγήσει τη διάθεση του επισκέπτη για να πετύχει συγκεκριμένους στόχους.
Αυτό οφείλεται στο γεγονός ότι ορισμένες αποχρώσεις ηρεμούν και μερικές, αντίθετα, ενθουσιάζουν. Στη συνέχεια θα μιλήσουμε για το πώς συντίθεται και εμφανίζεται το χρώμα χρησιμοποιώντας τεχνολογία υπολογιστών.
Το 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, το μπεζ χρώμα έχει τις ακόλουθες αριθμητικές αναπαραστάσεις.
>>Διαχείριση χρωμάτων
Δεκαεξαδικές τιμές χρώματος 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 | Απαλό πράσινο | Παλετατουρκουάζ | Παλαιοιώδες | ||||
| Παπάγια | 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 | ||||||
| 9999CC | 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 |
