Τι χρώμα φφφφφ. Εκμάθηση HTML. Χρώματα RGB. Ασφαλή χρώματα παλέτας

HEX/HTML

Το χρώμα HEX δεν είναι παρά μια δεκαεξαδική αναπαράσταση του RGB.

Τα χρώματα αντιπροσωπεύονται ως τρεις ομάδες δεκαεξαδικών ψηφίων, όπου κάθε ομάδα είναι υπεύθυνη για το δικό της χρώμα: #112233, όπου 11 είναι κόκκινο, 22 είναι πράσινο, 33 είναι μπλε. Όλες οι τιμές πρέπει να είναι μεταξύ 00 και FF.

Πολλές εφαρμογές επιτρέπουν μια συντομευμένη μορφή δεκαεξαδικού χρωματικού συμβολισμού. Εάν κάθε μία από τις τρεις ομάδες περιέχει τους ίδιους χαρακτήρες, για παράδειγμα #112233, τότε μπορούν να γραφτούν ως #123.

1. h1 ( χρώμα: #ff0000; ) /* κόκκινο */
2. h2 ( χρώμα: #00ff00; ) /* πράσινο */
3. h3 ( χρώμα: #0000ff; ) /* μπλε */
4. h4 ( χρώμα: #00f; ) /* ίδιο μπλε, συντομογραφία */

RGB

Ο χρωματικός χώρος RGB (Κόκκινο, Πράσινο, Μπλε) αποτελείται από όλα τα πιθανά χρώματα που μπορούν να δημιουργηθούν με ανάμειξη κόκκινου, πράσινου και μπλε. Αυτό το μοντέλο είναι δημοφιλές στη φωτογραφία, την τηλεόραση και τα γραφικά υπολογιστών.

Οι τιμές RGB καθορίζονται ως ακέραιος αριθμός από το 0 έως το 255. Για παράδειγμα, το rgb(0,0,255) εμφανίζεται ως μπλε επειδή η μπλε παράμετρος έχει οριστεί στην υψηλότερη τιμή (255) και οι υπόλοιπες στο 0.

Ορισμένες εφαρμογές (ιδιαίτερα τα προγράμματα περιήγησης ιστού) υποστηρίζουν ποσοστιαία εγγραφή τιμών RGB (από 0% έως 100%).

1. h1 ( χρώμα: rgb(255, 0, 0); ) /* κόκκινο */
2. h2 ( χρώμα: rgb(0, 255, 0); ) /* πράσινο */
3. h3 ( χρώμα: rgb(0, 0, 255); ) /* μπλε */
4. h4 ( χρώμα: rgb(0%, 0%, 100%); ) /* ίδιο μπλε, ποσοστιαία καταχώριση */

Οι τιμές χρώματος RGB υποστηρίζονται σε όλα τα μεγάλα προγράμματα περιήγησης.

RGBA

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

Η τιμή χρώματος RGBA καθορίζεται ως: rgba(κόκκινο, πράσινο, μπλε, άλφα). Η παράμετρος άλφα είναι ένας αριθμός που κυμαίνεται από 0,0 (πλήρως διαφανές) έως 1,0 (πλήρως αδιαφανές).

1. h1 ( χρώμα: rgb(0, 0, 255); ) /* μπλε σε κανονικό RGB */
2. h2 ( χρώμα: rgba(0, 0, 255, 1); ) /* το ίδιο μπλε στο RGBA, επειδή η αδιαφάνεια: 100% */
3. h3 ( χρώμα: rgba(0, 0, 255, 0,5); ) /* αδιαφάνεια: 50% */
4. h4 ( χρώμα: rgba(0, 0, 255, .155); ) /* αδιαφάνεια: 15,5% */
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%).

1. h1 ( χρώμα: hsl(120, 100%, 50%); ) /* πράσινο */
2. h2 ( χρώμα: hsl(120, 100%, 75%); ) /* ανοιχτό πράσινο */
3. h3 ( χρώμα: hsl(120, 100%, 25%); ) /* σκούρο πράσινο */
4. h4 ( χρώμα: hsl(120, 60%, 70%); ) /* παστέλ πράσινο */

Το HSL υποστηρίζεται σε IE9+, Firefox, Chrome, Safari και Opera 10+.

HSLA

Παρόμοια με το RGB/RGBA, το HSL διαθέτει λειτουργία HSLA με υποστήριξη καναλιού άλφα για να υποδεικνύει την αδιαφάνεια ενός αντικειμένου.

Η τιμή χρώματος HSLA καθορίζεται ως: hsla (απόχρωση, κορεσμός, ελαφρότητα, άλφα). Η παράμετρος άλφα είναι ένας αριθμός που κυμαίνεται από 0,0 (πλήρως διαφανές) έως 1,0 (πλήρως αδιαφανές).

1. h1 ( χρώμα: hsl(120, 100%, 50%); ) /* πράσινο σε κανονικό HSL */
2. h2 ( χρώμα: hsla(120, 100%, 50%, 1); ) /* το ίδιο πράσινο στο HSLA, επειδή η αδιαφάνεια: 100% */
3. h3 ( χρώμα: hsla(120, 100%, 50%, 0,5); ) /* αδιαφάνεια: 50% */
4. h4 ( χρώμα: hsla(120, 100%, 50%, 0,155); ) /* αδιαφάνεια: 15,5% */
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 (saturation), Brightness/Value (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.

Από όνομα

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

Χρήση RGB

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

RGBA

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

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

HSL

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

Ρύζι. 1. Τροχός χρώματος

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

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

HSLA

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

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

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

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

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

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

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

Οι χρωματικοί κώδικες στο 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.

Κοιτάξτε προσεκτικά το σχέδιο. Το φόντο του αναπτυσσόμενου παραθύρου γίνεται ημιδιαφανές. Αυτή είναι μια αρκετά κοινή τεχνική σχεδίασης. Ας σκεφτούμε πώς μπορεί να εφαρμοστεί αυτό.

Εργο

Κάντε το έγχρωμο cross-browser ημιδιαφανές.

Λύση

Η πρώτη σκέψη σε αυτήν την περίπτωση είναι να χρησιμοποιήσετε μια εικόνα png24 με προκαθορισμένη ημιδιαφάνεια για το φόντο. Αλλά αυτή η εικόνα είναι εντελώς περιττή. Μπορείτε να κάνετε μια χαρά χωρίς αυτό (και επομένως χωρίς επιπλέον αίτημα στον διακομιστή). Ας προσπαθήσουμε ακόμα να βρούμε τη βέλτιστη λύση.

Η δεύτερη σκέψη είναι να χρησιμοποιήσετε . Αλλά σε αυτή την περίπτωση δεν είναι πολύ βολικό. Μετά από όλα, τότε όχι μόνο το φόντο, αλλά και οι επιγραφές θα γίνουν ημιδιαφανείς. Ναι, στην πραγματικότητα, ολόκληρο το παράθυρο ταυτόχρονα.

Φυσικά, μπορείτε να προσπαθήσετε να προσθέσετε ένα επιπλέον κοντέινερ και να εφαρμόσετε αδιαφάνεια μόνο σε αυτό, αλλά αυτό το στοιχείο HTML θα προορίζεται μόνο για διακόσμηση και προφανώς θα είναι περιττό. Είναι δυνατόν να γίνει χωρίς αυτό;

Φυσικά μπορείτε να! Εάν χρησιμοποιείτε RGBA.

Μορφή περιγραφής χρώματος RGBA

Το CSS3 σάς επιτρέπει να καθορίσετε χρώμα χρησιμοποιώντας λειτουργίες RGB και RGBA. Σε αυτήν την περίπτωση, πρέπει να υποδείξουμε το μερίδιο κάθε στοιχείου χρώματος, για το οποίο εκχωρείται ένα byte (από 0 έως 255, σε περίπτωση που κάποιος δεν γνωρίζει).

Η σύνταξη για αυτήν την περίπτωση είναι πολύ απλή:

Φόντο: rgb(0, 255, 0); /* καθαρό πράσινο */

Για το RGBA, προστίθεται μια τέταρτη παράμετρος - διαφάνεια άλφα (από 0 έως 1).

Υπόβαθρο: rgba(255, 0, 0, 0,5); /* καθαρό κόκκινο με 50% διαφάνεια */

Εδώ είναι η λύση στο πρόβλημά μας. Απλώς ρυθμίστε το χρώμα φόντου χρησιμοποιώντας το rgba και όλα θα φαίνονται όπως θέλουμε. Χωρίς περιττές εικόνες και στοιχεία!

Πού μπορώ να βρω αυτούς τους αριθμούς;

Μπορείτε να δείτε τα συστατικά του χρώματος χρησιμοποιώντας το εργαλείο σταγονόμετρου του Photoshop.

Σχετικά με τη συμβατότητα μεταξύ προγραμμάτων περιήγησης

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

SomeBlock ( φόντο: rgb(255, 0, 0); φόντο: rgba (255, 0, 0, 0.5); )

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

Θα πρέπει να φροντίσετε το IE ξεχωριστά. Τα γαϊδουράκια δεν καταλαβαίνουν το RGBA μέχρι την έκδοση 8 που περιλαμβάνει.

Όπως πάντα: γη για τους αγρότες, εργοστάσια για τους εργάτες, και τα γαϊδούρια ένα δεκανίκι! Οπως και .

Φυσικά, σε συνθήκες μάχης βάζουμε αυτόν τον κανόνα σε ξεχωριστό CSS, το οποίο συνδέουμε.

SomeBlock ( background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); ζουμ: 1; )

Το κόλπο είναι να καθορίσετε τα χρώματα έναρξης και λήξης ως ίδια (ff0000 - κόκκινο) και να επωφεληθείτε από το γεγονός ότι μπορείτε να ορίσετε το κανάλι άλφα για τη διαβάθμιση σε αυτό το φίλτρο (στο παράδειγμα, η τιμή είναι 80).

Για αναφορά: το φίλτρο χρησιμοποιεί το δεκαεξαδικό σύστημα και ο κωδικός για ένα εντελώς αδιαφανές χρώμα είναι FF (σε δεκαδικό αυτό είναι 255). Συνεπώς, το δεκαεξαδικό 80 είναι δεκαδικό 128, δηλαδή 50% διαφάνεια.

Δοκιμασμένο σε:

• IE 6-9
• Firefox 3+
• Opera 10+
• Σαφάρι 4
• Χρώμιο

Το χρώμα στο CSS μπορεί να ρυθμιστεί με διάφορους τρόπους:

• από όνομα,
• κατά δεκαεξαδική τιμή,
• σε μορφές RGB και RGBA,
• σε μορφές HSL και HSLA.

Ορίστε το χρώμα με το όνομα

Τα προγράμματα περιήγησης υποστηρίζουν τον καθορισμό ορισμένων χρωμάτων για στοιχεία με όνομα. Αυτός ο πίνακας περιέχει ορισμένες λέξεις-κλειδιά (αγγλικά ονόματα χρωμάτων) που χρησιμοποιούνται για τον καθορισμό των ιδιοτήτων χρώματος, του κώδικα RGB, του δεκαεξαδικού κώδικα (HEX) και του κώδικα HSL.

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

Δείτε πώς λειτουργεί αυτός ο κώδικας:

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

Το RGB είναι ένα πρόσθετο χρωματικό μοντέλο. Στα Αγγλικά πρόσθεση- πρόσθεση. Το RGB είναι συντομογραφία των αγγλικών λέξεων: Red, Green, Blue - red, green, blue). Από αυτό είναι σαφές ότι στο μοντέλο RGB, τα χρώματα συντίθενται με την προσθήκη τριών χρωμάτων (κόκκινο, πράσινο, μπλε) σε διαφορετικές ποσότητες.

Με την ανάμειξη κόκκινου, πράσινου και μπλε χρώματος, μπορείτε να αποκτήσετε πολλά εκατομμύρια αποχρώσεις. Όλοι οι πιθανοί συνδυασμοί αποθηκεύονται στη μνήμη του υπολογιστή.

Φτανω στο σημειο.

Για να ορίσετε ιδιότητες σε αυτήν τη μορφή, χρησιμοποιήστε τη σημείωση rgb(r, g, b) , όπου r, g, b είναι τα τρία κανάλια για κάθε χρώμα (κόκκινο, πράσινο, μπλε). Οι τιμές για κάθε κανάλι ορίζονται στην περιοχή από 0 έως 255.

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

Για να γίνουν όλα ξεκάθαρα, εδώ είναι ένα παράδειγμα κώδικα:

Έτσι πρέπει να λειτουργεί αυτό το παράδειγμα:

Εξηγήσεις για παράδειγμα.

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

εμφανίστηκαν στο απαιτούμενο μέγεθος: 240px επί 40px. Εκχωρούμε στην ιδιότητα line-height μια τιμή 40 px, δηλαδή ίση με το ύψος του μπλοκ, αυτό θα σας επιτρέψει να εμφανίσετε κείμενο στο μπλοκ

στο κατακόρυφο κέντρο. Κεντράρουμε το κείμενο οριζόντια χρησιμοποιώντας τον κανόνα ( text-align : κέντρο ;).

Στη συνέχεια, στον κώδικα ορίζουμε το χρώμα φόντου του μπλοκ

χρησιμοποιώντας το χαρακτηριστικό style, χρησιμοποιώντας την ιδιότητα φόντου και εκχωρώντας τιμές σε rgb(255, 0, 0) , rgb(0, 255, 0) και rgb(0, 0, 255). Δηλαδή, κάνουμε εναλλάξ ένα κανάλι όσο το δυνατόν πιο κορεσμένο και τα υπόλοιπα κανάλια δεν χρησιμοποιούνται για σύνθεση, αφού η τιμή τους είναι μηδέν.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#FF0000

#00FF00

#0000FF

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

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

Εικ.1. Χρώματα σε RGB.

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

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

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

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

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

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

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

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

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

Εικόνα 2. Χρωματικός τροχός HSL.

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

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

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

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

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

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

Somebloсk (χρώμα φόντου: rgb(255,50,50); χρώμα φόντου: rgba(255,50,50,0,85)

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