Κίτρινο εξάγωνο χρώμα. Εκμάθηση HTML. Χρώματα RGB. Ασφαλή χρώματα παλέτας

χρησιμοποιώντας το χαρακτηριστικό 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.

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

Και εδώ είναι μια εικόνα με το αποτέλεσμα από την ενότητα "Ρύθμιση χρωμάτων με χρήση 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.

Οι δεκαεξαδικοί αριθμοί χρησιμοποιούνται για τον καθορισμό των χρωμάτων. Το δεκαεξαδικό σύστημα, σε αντίθεση με το δεκαδικό σύστημα, βασίζεται, όπως υποδηλώνει το όνομά του, στον αριθμό 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 και την περιγραφή.

Τραπέζι 1. Ονόματα χρωμάτων

Ονομα	Χρώμα	Κώδικας	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. Χρώματα στην ιστοσελίδα

Βλαντ Μέρζεβιτς

Στην 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 δείχνει τα ονόματα των δημοφιλών ονομάτων χρωμάτων.

Τραπέζι 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 .

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