Μεταλλικό χρώμα rgb. Το χρώμα στα στυλ μπορεί να καθοριστεί με διάφορους τρόπους: με δεκαεξαδική τιμή, με όνομα, σε μορφή RGB, RGBA, HSL, HSLA
>>Διαχείριση χρωμάτων
Δεκαεξαδικές τιμές χρώματος 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 | ||||
Κιτρινοπράσινος | Σοκολάτα | Κοράλλι | Αραβοσίτου | ||||
Μετάξι καλαμποκιού | βυσσινί | κυανό | Σκούρο μπλε | ||||
Σκοτεινός | Darkgoldenrod | Σκούρο γκρίζο | Σκούρο πράσινο | ||||
Darkkhaki | Darkmagenta | σκούρο πράσινο | Σκούρο πορτοκαλί | ||||
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 | ||||||
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 |
HEX/HTML
Το χρώμα HEX δεν είναι παρά μια δεκαεξαδική αναπαράσταση του RGB.
Τα χρώματα αντιπροσωπεύονται ως τρεις ομάδες δεκαεξαδικών ψηφίων, όπου κάθε ομάδα είναι υπεύθυνη για το δικό της χρώμα: #112233, όπου 11 είναι κόκκινο, 22 είναι πράσινο, 33 είναι μπλε. Όλες οι τιμές πρέπει να είναι μεταξύ 00 και FF.
Πολλές εφαρμογές επιτρέπουν μια συντομευμένη μορφή δεκαεξαδικού χρωματικού συμβολισμού. Εάν κάθε μία από τις τρεις ομάδες περιέχει τους ίδιους χαρακτήρες, για παράδειγμα #112233, τότε μπορούν να γραφτούν ως #123.
- h1 ( χρώμα: #ff0000; ) /* κόκκινο */
- h2 ( χρώμα: #00ff00; ) /* πράσινο */
- h3 ( χρώμα: #0000ff; ) /* μπλε */
- h4 ( χρώμα: #00f; ) /* ίδιο μπλε, συντομογραφία */
RGB
Ο χρωματικός χώρος RGB (Κόκκινο, Πράσινο, Μπλε) αποτελείται από όλα τα πιθανά χρώματα που μπορούν να δημιουργηθούν με ανάμειξη κόκκινου, πράσινου και μπλε. Αυτό το μοντέλο είναι δημοφιλές στη φωτογραφία, την τηλεόραση και τα γραφικά υπολογιστών.
Οι τιμές RGB καθορίζονται ως ακέραιος αριθμός από το 0 έως το 255. Για παράδειγμα, το rgb(0,0,255) εμφανίζεται ως μπλε επειδή η μπλε παράμετρος έχει οριστεί στην υψηλότερη τιμή (255) και οι υπόλοιπες έχουν οριστεί στο 0.
Ορισμένες εφαρμογές (ιδιαίτερα τα προγράμματα περιήγησης ιστού) υποστηρίζουν ποσοστιαία εγγραφή τιμών RGB (από 0% έως 100%).
- h1 ( χρώμα: rgb(255, 0, 0); ) /* κόκκινο */
- h2 ( χρώμα: rgb(0, 255, 0); ) /* πράσινο */
- h3 ( χρώμα: rgb(0, 0, 255); ) /* μπλε */
- h4 ( χρώμα: rgb(0%, 0%, 100%); ) /* ίδιο μπλε, ποσοστιαία καταχώριση */
Οι τιμές χρώματος RGB υποστηρίζονται σε όλα τα μεγάλα προγράμματα περιήγησης.
RGBA
Πρόσφατα, τα σύγχρονα προγράμματα περιήγησης έμαθαν να λειτουργούν με το χρωματικό μοντέλο RGBA - μια επέκταση του RGB με υποστήριξη για ένα κανάλι άλφα, το οποίο καθορίζει την αδιαφάνεια ενός αντικειμένου.
Η τιμή χρώματος RGBA καθορίζεται ως: rgba(κόκκινο, πράσινο, μπλε, άλφα). Η παράμετρος άλφα είναι ένας αριθμός που κυμαίνεται από 0,0 (πλήρως διαφανές) έως 1,0 (πλήρως αδιαφανές).
- h1 ( χρώμα: rgb(0, 0, 255); ) /* μπλε σε κανονικό RGB */
- h2 ( χρώμα: rgba(0, 0, 255, 1); ) /* το ίδιο μπλε στο RGBA, επειδή η αδιαφάνεια: 100% */
- h3 ( χρώμα: rgba(0, 0, 255, 0.5); ) /* αδιαφάνεια: 50% */
- h4 ( χρώμα: rgba(0, 0, 255, .155); ) /* αδιαφάνεια: 15,5% */
- h5 ( χρώμα: rgba(0, 0, 255, 0); ) /* εντελώς διαφανές */
Το RGBA υποστηρίζεται σε IE9+, Firefox 3+, Chrome, Safari και Opera 10+.
HSL
Το χρωματικό μοντέλο HSL είναι μια αναπαράσταση του μοντέλου RGB σε ένα κυλινδρικό σύστημα συντεταγμένων. Το HSL αναπαριστά τα χρώματα με πιο διαισθητικό και ευανάγνωστο από τον άνθρωπο τρόπο από το τυπικό RGB. Το μοντέλο χρησιμοποιείται συχνά σε εφαρμογές γραφικών, παλέτες χρωμάτων και ανάλυση εικόνων.
Το HSL σημαίνει Hue (χρώμα/απόχρωση), Saturation (κορεσμός), Lightness/Luminance (ελαφρότητα/ελαφρότητα/φωτεινότητα, που δεν πρέπει να συγχέεται με τη φωτεινότητα).
Το Hue καθορίζει τη θέση του χρώματος στον τροχό χρώματος (από 0 έως 360). Κορεσμός είναι η ποσοστιαία τιμή του κορεσμού (από 0% έως 100%). Η ελαφρότητα είναι ένα ποσοστό ελαφρότητας (από 0% έως 100%).
- h1 ( χρώμα: hsl(120, 100%, 50%); ) /* πράσινο */
- h2 ( χρώμα: hsl(120, 100%, 75%); ) /* ανοιχτό πράσινο */
- h3 ( χρώμα: hsl(120, 100%, 25%); ) /* σκούρο πράσινο */
- h4 ( χρώμα: hsl(120, 60%, 70%); ) /* παστέλ πράσινο */
Το HSL υποστηρίζεται σε IE9+, Firefox, Chrome, Safari και Opera 10+.
HSLA
Παρόμοια με το RGB/RGBA, το HSL έχει μια λειτουργία HSLA που υποστηρίζει ένα κανάλι άλφα για να υποδείξει την αδιαφάνεια ενός αντικειμένου.
Η τιμή χρώματος HSLA καθορίζεται ως: hsla (απόχρωση, κορεσμός, ελαφρότητα, άλφα). Η παράμετρος άλφα είναι ένας αριθμός που κυμαίνεται από 0,0 (πλήρως διαφανές) έως 1,0 (πλήρως αδιαφανές).
- h1 ( χρώμα: hsl(120, 100%, 50%); ) /* πράσινο σε κανονικό HSL */
- h2 ( χρώμα: hsla(120, 100%, 50%, 1); ) /* το ίδιο πράσινο στο HSLA, επειδή η αδιαφάνεια: 100% */
- h3 ( χρώμα: hsla(120, 100%, 50%, 0,5); ) /* αδιαφάνεια: 50% */
- h4 ( χρώμα: hsla(120, 100%, 50%, 0,155); ) /* αδιαφάνεια: 15,5% */
- h5 ( χρώμα: hsla(120, 100%, 50%, 0); ) /* εντελώς διαφανές */
CMYK
Το χρωματικό μοντέλο CMYK συνδέεται συχνά με την έγχρωμη εκτύπωση και εκτύπωση. Το CMYK (σε αντίθεση με το RGB) είναι ένα αφαιρετικό μοντέλο, που σημαίνει ότι οι υψηλότερες τιμές συνδέονται με πιο σκούρα χρώματα.
Τα χρώματα καθορίζονται από την αναλογία κυανό (κυανό), ματζέντα (ματζέντα), κίτρινο (κίτρινο), με την προσθήκη μαύρου (Κλειδί/μαύρο Κ).
Καθένας από τους αριθμούς που ορίζουν ένα χρώμα στο CMYK αντιπροσωπεύει το ποσοστό του μελανιού ενός δεδομένου χρώματος που συνθέτει τον συνδυασμό χρωμάτων, ή ακριβέστερα, το μέγεθος της κουκκίδας οθόνης που εξάγεται στη μηχανή φωτοστοιχειοθέτησης σε φιλμ αυτού του χρώματος (ή απευθείας στην τυπογραφική πλάκα στην περίπτωση CTP).
Για παράδειγμα, για να αποκτήσετε το χρώμα PANTONE 7526, θα αναμίξετε 9 μέρη κυανό, 83 μέρη ματζέντα, 100 μέρη κίτρινο και 46 μέρη μαύρο. Αυτό μπορεί να χαρακτηριστεί ως εξής: (9,83,100,46). Μερικές φορές χρησιμοποιούνται οι ακόλουθες ονομασίες: C9M83Y100K46, ή (9%, 83%, 100%, 46%) ή (0,09/0,83/1,0/0,46).
HSB/HSV
Το HSB (επίσης γνωστό ως HSV) είναι παρόμοιο με το HSL, αλλά είναι δύο διαφορετικά χρωματικά μοντέλα. Και οι δύο βασίζονται στην κυλινδρική γεωμετρία, αλλά το HSB/HSV βασίζεται στο μοντέλο "hexcone", ενώ το HSL βασίζεται στο μοντέλο "bi-hexcone". Οι καλλιτέχνες συχνά προτιμούν να χρησιμοποιούν αυτό το μοντέλο, είναι γενικά αποδεκτό ότι η συσκευή HSB/HSV είναι πιο κοντά στη φυσική αντίληψη των χρωμάτων. Συγκεκριμένα, το χρωματικό μοντέλο HSB χρησιμοποιείται στο Adobe Photoshop.
Το HSB/HSV σημαίνει Hue (χρώμα/απόχρωση), Saturation (κορεσμός), Brightness/Value (φωτεινότητα/τιμή).
Το Hue καθορίζει τη θέση του χρώματος στον τροχό χρώματος (από 0 έως 360). Κορεσμός είναι η ποσοστιαία τιμή του κορεσμού (από 0% έως 100%). Η φωτεινότητα είναι ένα ποσοστό φωτεινότητας (από 0% έως 100%).
XYZ
Το χρωματικό μοντέλο XYZ (CIE 1931 XYZ) είναι ένας καθαρά μαθηματικός χώρος. Σε αντίθεση με τα RGB, CMYK και άλλα μοντέλα, στο XYZ τα κύρια στοιχεία είναι «φανταστικά», που σημαίνει ότι δεν μπορείτε να συσχετίσετε τα X, Y και Z με οποιοδήποτε σύνολο χρωμάτων για ανάμειξη. Το XYZ είναι το κύριο μοντέλο για σχεδόν όλα τα άλλα χρωματικά μοντέλα που χρησιμοποιούνται σε τεχνικούς τομείς.
ΕΡΓΑΣΤΗΡΙΟ
Το χρωματικό μοντέλο LAB (CIELAB, “CIE 1976 L*a*b*”) υπολογίζεται από το χώρο CIE XYZ. Ο σχεδιαστικός στόχος του Lab ήταν να δημιουργήσει έναν χρωματικό χώρο στον οποίο οι χρωματικές αλλαγές θα ήταν πιο γραμμικές όσον αφορά την ανθρώπινη αντίληψη (σε σύγκριση με το XYZ), δηλαδή, έτσι ώστε η ίδια αλλαγή στις τιμές των συντεταγμένων χρώματος σε διαφορετικές περιοχές του χρωματικού χώρου να παράγουν την ίδια αίσθηση αλλαγής χρώματος.
Οι δεκαεξαδικοί αριθμοί χρησιμοποιούνται για τον καθορισμό των χρωμάτων. Το δεκαεξαδικό σύστημα, σε αντίθεση με το δεκαδικό σύστημα, βασίζεται, όπως υποδηλώνει το όνομά του, στον αριθμό 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. Χρώματα στην ιστοσελίδα