Γεια σας, αγαπητοί αναγνώστες του ιστότοπου του ιστολογίου. Συνεχίζω να δημοσιεύω άρθρα στην ενότητα "". Σήμερα θέλω να μιλήσω για τα χρώματα σε κώδικα HTML και CSS, να εξηγήσω σε όσους δεν ξέρουν ακόμη πώς μπορείτε να τα ορίσετε, πώς σχηματίζονται, πώς να χρησιμοποιήσετε προγράμματα ειδικά σχεδιασμένα για να αναζητήσετε ή να καταγράψετε το επιθυμητό χρώμα και πολλά περισσότερο.

Το ζήτημα της ρύθμισης της επιθυμητής απόχρωσης μπορεί να είναι ιδιαίτερα σημαντικό για αρχάριους webmasters, όταν οι κωδικοί τους που δίνονται στο έγγραφο web δεν είναι απολύτως σαφείς (για παράδειγμα, #f3af6c) και δεν είναι σαφές πώς και από πού μπορούν να ληφθούν αυτές οι πληροφορίες (πού για να βρείτε τους πίνακες χρωμάτων Html και CSS) και πώς να τους χρησιμοποιήσετε για να σχεδιάσετε ένα κείμενο ή οποιοδήποτε άλλο μπλοκ ενός εγγράφου Ιστού.

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

Κωδικοί και πίνακας βασικών χρωμάτων RGB

Είναι πολύ λογικό στη γλώσσα σήμανσης υπερκειμένου και στα επικαλυπτόμενα φύλλα στυλ να υπάρχει η δυνατότητα χρωματισμού εγγράφων, γιατί διαφορετικά οι ιστότοποι θα ήταν πολύ βαρετοί και του ίδιου τύπου. Για αυτό, χρησιμοποιείται συνήθως ένα μοντέλο που ονομάζεται RGB (μια συντομογραφία που προέρχεται από τρεις αγγλικές λέξεις για το κόκκινο, το πράσινο και το μπλε).

Στο μοντέλο RGBΧρησιμοποιούνται μόνο τρία χρώματα (είναι σαφές ότι αυτά είναι κόκκινο, πράσινο και μπλε), καθένα από τα οποία μπορεί να αναπαρασταθεί με διαφορετικά επίπεδαφωτεινότητα λάμψης. Για καθένα από τα κανάλια (κόκκινο, πράσινο και μπλε) θα μπορείτε να επιλέξετε μία από τις 256 πιθανές διαβαθμίσεις φωτεινότητας. Ο αριθμός 256 λαμβάνεται για το λόγο ότι τόσες πολλές τιμές απόχρωσης μπορούν να κωδικοποιηθούν σε ένα byte πληροφοριών.

Αντίστοιχα, για το διαδικτυακό μας έγγραφο, μπορούμε να επιλέξουμε οποιαδήποτε απόχρωση τεράστιο ποσόδυνατό (256*256*256). Για παράδειγμα, για να γίνει μαύρο, πρέπει να έχετε και τα τρία κανάλια του συνδυασμού χρωμάτων μηδενική τιμήφωτεινότητα, και για να αποκτήσετε λευκό - κόκκινο, πράσινο και μπλε χρώματα πρέπει να είναι στη μέγιστη φωτεινότητα.

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

Μάλιστα, εκεί δύο βασικούς τρόπους:

1. ρύθμιση καταγράφοντας τη φωτεινότητα για καθένα από τα κανάλια (κόκκινο, πράσινο και μπλε) σε δεκαεξαδικό συμβολισμό
2. πληκτρολογώντας το όνομα του χρώματος στον κωδικό του εγγράφου web

Ας ξεκινήσουμε με το σύνθετο και ας προσπαθήσουμε να καταλάβουμε πώς να γράψουμε τα χρώματα σε έναν δεκαεξαδικό κώδικα. Αν θέλαμε, για παράδειγμα, να σημειώσουμε τον κωδικό για το λευκό στο δεκαδικό σύστημα, τότε θα παίρναμε τον κωδικό 256 256 256, και για το μαύρο - 0 0 0. Όλα είναι μάλλον ξεκάθαρα εδώ.

Αλλά στο δεκαεξαδικό σύστημα αριθμών, εκτός από τους αραβικούς αριθμούς, χρησιμοποιούνται επίσης τα πρώτα έξι γράμματα του λατινικού αλφαβήτου, καλά, υπάρχει μια ιδιαιτερότητα στον σχηματισμό αριθμών. Νομίζω ότι δεν αξίζει να ασχοληθώ με αυτό, αλλά για παράδειγμα θα πω ότι το λευκό για το Html μπορεί να οριστεί ως εξής: #ffffff και το μαύρο ως εξής: #000000. Εκείνοι. Το 00 αντιστοιχεί στο 0 στο δεκαδικό και το ff αντιστοιχεί στο 256.

Εκείνοι. Υπάρχουν δύο δεκαεξαδικά ψηφία για κάθε κανάλι χρώματος RGB στον κώδικα CSS, επομένως οι καταχωρίσεις τιμών χρώματος αποτελούνται από έξι ψηφία (ή γράμματα που ισοδυναμούν με δεκαεξαδικούς αριθμούς) πριν από το σύμβολο της λίρας "#". Όλα είναι αρκετά απλά.

Για παράδειγμα, στον παραπάνω πίνακα για τις απλούστερες αποχρώσεις, οι δεκαεξαδικές καταχωρήσεις τους θα μοιάζουν με αυτό:

Φυσικά, δεν είστε υποχρεωμένοι να εφεύρετε και να συγκρίνετε δεκαεξαδικούς κωδικούς σκιάς με αυτούς που θέλετε να δείτε στο έργο σας στο Διαδίκτυο. Μπορείτε να επιλέξετε ένα χρώμα για τον ιστότοπο σε οποιοδήποτε πρόγραμμα επεξεργασίας γραφικών (ακόμη και σε), όπου σίγουρα θα εμφανιστεί μια εγγραφή αυτής της απόχρωσης σε Μορφή RGB, ή βρείτε πίνακα htmlχρώματα και αντιγράψτε τον κωδικό που χρειάζεστε από εκεί.

Χρώματα Yandex - επιλογή παλετών χρωμάτων RGB στα αποτελέσματα αναζήτησης Yandex

Δεν θέλετε να χρησιμοποιήσετε για αυτό το σκοπό επεξεργαστής γραφικώνή να ψάξω για πίνακα με κωδικούς; Κανένα πρόβλημα. Κάντε κύλιση προς τα κάτω σε αυτήν τη σελίδα και θα βρείτε πολλά συγκεκριμένα και ευκρινισμένα προγράμματα ειδικά για εργασία με χρώμα σε κώδικα Html ή CSS.

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

Ως αποτέλεσμα, στην κορυφή Αποτελέσματα αναζήτησης, θα δείτε έναν πολύ βολικό πίνακα παλέτας Yandex.Colors για την επιλογή χρωμάτων για τον ιστότοπό σας. Στην κάτω δεξιά γωνία αυτής της παλέτας, μπορείτε να αντιγράψετε τον δεκαεξαδικό κωδικό της απόχρωσης που χρειάζεστε (υπάρχει ένα πλέγμα μπροστά του), το οποίο στη συνέχεια μένει μόνο να εισαχθεί σε Σωστό μέροςτο έγγραφο ιστού σας.

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

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

Στην πραγματικότητα, αυτό το εργαλείο μπορεί να είναι χρήσιμο και απλούς χρήστεςτο Διαδίκτυο, για παράδειγμα, για να καταλάβετε πώς θα φαίνονται τα έπιπλα σε απόχρωση γκρι-γκρίζα-βατόμουρο. Μπορείτε επίσης να παρακολουθήσετε ένα βίντεο σχετικά με τη χρήση αυτού του οδηγού Yandex:

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

Λοιπόν, πρώτον, είναι πιθανώς σαφές ότι και τα 16 εκατομμύρια είναι δυνατά Μοτίβο RGBδεν θα μπορείτε να φανταστείτε αποχρώσεις με τη βοήθεια των λέξεων σε κανένα τραπέζι (θα βαρεθείτε να το κυλιέσετε).

Δεύτερον, στο πρόγραμμα επικύρωσης W3C για την Προδιαγραφή Hypertext Markup Language Specification 4.01 (υποστηρίζεται πλήρως από όλους πιθανά προγράμματα περιήγησηςεπί του παρόντος) ορίζονται μόνο 16 χρώματα, τα οποία μπορούν να καθοριστούν σε κώδικα Html ή CSS με τις λέξεις:

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

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

Χρήση κωδικών χρωμάτων και ονομάτων στο Webmastering

Επί αυτή τη στιγμήΟλα εξωτερικός σχεδιασμός ιστοσελίδεςαφήνεται στο CSS (διαδοχικά φύλλα στυλ) και ο καθορισμός του κώδικα χρώματος απευθείας σε Html είναι εξαιρετικά σπάνιος, αλλά εξακολουθεί να συμβαίνει. Επιπλέον, υπάρχουν περιπτώσεις όπου είναι αδύνατο για έναν ή τον άλλο λόγο να χρησιμοποιηθούν εξωτερικοί πίνακες. στυλ css(για παράδειγμα, στην περίπτωση δημιουργίας μιας κυκλοφορίας).

Επομένως, θα συνεχίσω να δώσω ένα παράδειγμα ρύθμισης χρωμάτων σε Html, αν και σε αυτήν την περίπτωση θα χρησιμοποιούνται ήδη ετικέτες που δεν συνιστώνται από το πρόγραμμα επικύρωσης του W3C. Για παράδειγμα, πριν οριστεί το χρώμα για το φόντο στην ετικέτα "BODY" μέσω του χαρακτηριστικού "bgcolor" και το κείμενο χρωματίστηκε αμέσως σε ολόκληρη την ιστοσελίδα χρησιμοποιώντας το χαρακτηριστικό "text".

Η ρύθμιση των επιθυμητών αποχρώσεων σε αυτήν την περίπτωση θα μπορούσε να μοιάζει, για παράδειγμα, ως εξής:

Περιεχόμενο εγγράφου

Ως αποτέλεσμα, θα έχετε μια ιστοσελίδα με μπεζ φόντο και σκούρο μπλε γραμματοσειρά. Πριν από την έναρξη χρήσης του CSS, για την αλλαγή του χρώματος της γραμματοσειράς μιας συγκεκριμένης ενότητας κειμένου, χρησιμοποιήθηκε συνήθως η ετικέτα "FONT", η οποία δεν συνιστάται πλέον από το πρόγραμμα επικύρωσης του W3C, η οποία περιλάμβανε το χαρακτηριστικό "color" με το ίδιο όνομα σε ορίστε το χρώμα:

τμήμα κειμένου που έπρεπε να χρωματιστεί μπλε

Για να δείτε το αποτέλεσμα του γραπτού κώδικα στην οθόνη, πρέπει να αποθηκεύσετε αυτό το αρχείο με την επέκταση html και, στη συνέχεια, να το ανοίξετε σε οποιοδήποτε πρόγραμμα περιήγησης που σας βολεύει.

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

Όπως μπορείτε να δείτε, μερικές φορές δεν χρησιμοποιούνται έξι χαρακτήρες για τη συντόμευση της εγγραφής απόχρωσης, αλλά μόνο τρεις, εάν ταιριάζουν για κάθε κανάλι - "# 6c0" αντί για "# 66cc00".

Επιλογή χρώματος από την παλέτα ενός ειδικού προγράμματος ή λήψη του από την οθόνη

Όπως έγραψα ακριβώς παραπάνω, ο συνδυασμός χρωμάτων RGB (κόκκινο, πράσινο, μπλε) χρησιμοποιείται ευρέως. Για καθένα από τα τρία κύρια χρώματα, παρέχονται 256 διαβαθμίσεις - από 0 έως 255 (αν μεταφράσουμε αυτές τις τιμές σε δεκαεξαδικό σύστημα αριθμών, παίρνουμε - από 00 έως FF).

Επειδή έχουμε τρία κύρια χρώματα, από τον συνδυασμό των οποίων σχηματίζονται όλες οι άλλες αποχρώσεις, τότε η δεκαεξαδική καταχώρηση θα μοιάζει κάπως έτσι: 99FF66 (μια απόχρωση του πράσινου). Προσθέτοντας # μπροστά από αυτό θα λάβετε τον κωδικό #99FF66, ο οποίος μπορεί να χρησιμοποιηθεί τόσο σε αρχεία Html όσο και σε αρχεία στυλ. Είναι αυτονόητο ότι εσείς οι ίδιοι δεν χρειάζεται να υπολογίζετε και να θυμάστε όλες αυτές τις ανοησίες.

Για αυτό μπορείτε να χρησιμοποιήσετε ειδικό πρόγραμμα, το οποίο σας επιτρέπει να επιλέξετε την επιθυμητή απόχρωση στην παλέτα (ή τραβήξτε το από την οθόνηεργαλείο πιπέτας) και λάβετε αμέσως τον κωδικό του. Μπορεί να μην έχετε πρόγραμμα, αλλά μεταβείτε στο Yandex και πληκτρολογήστε το όνομα οποιουδήποτε χρώματος στη συμβολοσειρά ερωτήματος (έγραψα για αυτό λίγο πιο πάνω).

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

Καλή σου τύχη! Τα λέμε σύντομα στον ιστότοπο των σελίδων του ιστολογίου

Μπορεί να σας ενδιαφέρει

Λίστες σε κώδικα Html - ετικέτες UL, OL, LI και DL
Πώς να επικολλήσετε Σύνδεσμος HTMLκαι μια εικόνα (φωτογραφία) - ετικέτες IMG και A
Πώς να δημιουργήσετε μια υπερ-σύνδεση (A, Href, Target Blank), πώς να την ανοίξετε σε νέο παράθυρο στον ιστότοπο και επίσης να κάνετε μια εικόνα σύνδεσμο σε κώδικα Html
Η γραμματοσειρά (πρόσωπο, μέγεθος και χρώμα), το Blockquote και οι προετικέτες είναι μορφοποίηση κειμένου παλαιού τύπου σε καθαρό HTML (χωρίς Χρήση CSS)
Πίνακες σε Html - Ετικέτες Table, Tr και Td, καθώς και Colspan, Cellpadding, Cellspacing και Rowspan για τη δημιουργία τους
Έντυπα HTMLγια τον ιστότοπο - ετικέτες Form, Input and Select, Option, Textarea, Label και άλλα για τη δημιουργία στοιχείων φόρμας ιστού Επιλέξτε, Option, Textarea, Label, Fieldset, Legend - Ετικέτες Html της φόρμας αναπτυσσόμενης λίστας και πεδίο κειμένου
img- ετικέτα htmlγια την εισαγωγή μιας εικόνας (Src), τη στοίχιση και την αναδίπλωση της με κείμενο (στοίχιση), καθώς και τη ρύθμιση φόντου (φόντο)
Οδηγίες σχολίων και Doctype σε κώδικα Html, καθώς και η έννοια του μπλοκ και των ενσωματωμένων στοιχείων (ετικέτες)
Τι είναι η γλώσσα σήμανσης υπερκειμένου Html και πώς να καταχωρίσετε όλες τις ετικέτες στο πρόγραμμα επικύρωσης του W3C
Χαρακτήρες κενού διαστήματος και η μορφοποίηση του κώδικα σε Html, καθώς και ειδικοί χαρακτήρες χωρίς διαστήματα και άλλα μνημονικά

Κατά τη δημιουργία του Yandex, οι προγραμματιστές φρόντισαν να είναι εύκολο και κατανοητό στη χρήση του.

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

Κάθε έκδοση του προγράμματος περιήγησης Yandex έχει σχεδιαστεί όμορφα, οι καλύτεροι ειδικοί ασχολούνται με το σχεδιασμό. Υπάρχουν όμως κάποιοι χρήστες που δεν τους αρέσει η μονοτονία. Ακόμα και τα περισσότερα ομορφη ΘΕΑθα βαρεθούν γρήγορα, θα θέλουν να «αλλάξουν την κατάσταση», «να αναπνεύσουν» για να εργαστούν με ένα πρόγραμμα περιήγησης ιστού.

Δεν υπάρχει τίποτα κακό με αυτό, διαφορετικά γιατί οι προγραμματιστές εισήγαγαν τη λειτουργία αλλαγής διεπαφής; Για να μπορεί όποιος δεν του αρέσει το φόντο που ορίζει το πρότυπο ή βαριέται τη μονοτονία να αλλάξει την εμφάνιση της εφαρμογής του.

Για να αλλάξει κάτι εμφάνισητου προγράμματος περιήγησής σας Yandex, χρειάζεται μόνο να αποσπαστείτε για μερικά λεπτά:

• Ενεργοποιήστε το πρόγραμμα περιήγησής σας.
• Άνοιξε νέα καρτέλα(μπορείτε να το κάνετε αυτό στις ρυθμίσεις δίπλα στη γραμμή σελιδοδεικτών).
• Το Express Panel θα εμφανιστεί μπροστά σας. Πρέπει να κατεβείτε στο κάτω μέρος της οθόνης και να κάνετε κλικ στο εικονίδιο "Αλλαγή φόντου".
• Στη συνέχεια θα ανοίξει μια λίστα με μια ποικιλία σχεδίων προγράμματος περιήγησης, μεταξύ των οποίων πρέπει να επιλέξετε αυτό που σας αρέσει περισσότερο. Αφού επιλέξετε την κατάλληλη εικόνα, κάντε κλικ στο κουμπί "Τέλος".

Δεν χρειάζεται να ανησυχείτε για την αλλαγή του φόντου κάθε φορά - δεν χρειάζεται να το κάνετε. Τώρα κάθε φορά που μπαίνετε στο "Express Panel" (ακόμα κι αν κλείσατε και ανοίξατε ξανά το Yandex), θα απολαύσετε μια ευχάριστη εικόνα. Και το να δουλεύεις με ανεβασμένη διάθεση είναι πολύ πιο ενδιαφέρον και πιο εύκολο!

Είναι δυνατόν να βάλετε κάτι «δικό σας» στο παρασκήνιο;

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

Τέτοιες περιπτώσεις παρέχονται από τους δημιουργούς του Yandex Browser: μπορείτε να κάνετε λήψη προσωπικών εικόνων που είναι διαθέσιμες στον υπολογιστή σας. Δίνει πλήρη διέξοδο στη φαντασία. Τι θα ήταν, για παράδειγμα, ωραίο αν κάθε φορά που μπαίνεις στο «Πάνελ Εξπρές» βλέπεις ένα ζωντανό κομμάτι της ζωής σου ή μια φωτογραφία ενός μικρού παιδιού;

Για να ορίσετε μια εικόνα από τη συσκευή σας ως φόντο, πρέπει:

• ενεργοποιήστε το Yandex.
• Άνοιξε ένα νέο υποπαράθυρο.
• βρείτε τη λειτουργία "Αλλαγή φόντου" και κάντε κλικ σε αυτήν.
• υπάρχει ένα σύμβολο "+" πίσω από την τελευταία εικόνα, πρέπει να κάνετε κλικ σε αυτό.
• επιλέξτε τη φωτογραφία που θέλετε να δείτε στο πρόγραμμα περιήγησης και πατήστε enter (Enter).

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

www.livemaster.ru

Κωδικοί και πίνακας βασικών χρωμάτων RGB

Είναι πολύ λογικό στη γλώσσα σήμανσης υπερκειμένου και στα επικαλυπτόμενα φύλλα στυλ να υπάρχει η δυνατότητα χρωματισμού εγγράφων, γιατί διαφορετικά οι ιστότοποι θα ήταν πολύ βαρετοί και του ίδιου τύπου. Για αυτό, χρησιμοποιείται συνήθως ένα μοντέλο που ονομάζεται RGB (μια συντομογραφία που προέρχεται από τρεις αγγλικές λέξεις για το κόκκινο, το πράσινο και το μπλε).

Στο μοντέλο RGBΧρησιμοποιούνται μόνο τρία χρώματα (είναι σαφές ότι αυτά είναι κόκκινο, πράσινο και μπλε), καθένα από τα οποία μπορεί να αναπαρασταθεί με διαφορετικό επίπεδο φωτεινότητας της λάμψης. Για καθένα από τα κανάλια (κόκκινο, πράσινο και μπλε) θα μπορείτε να επιλέξετε μία από τις 256 πιθανές διαβαθμίσεις φωτεινότητας. Ο αριθμός 256 λαμβάνεται για το λόγο ότι τόσες πολλές τιμές απόχρωσης μπορούν να κωδικοποιηθούν σε ένα byte πληροφοριών.

Αντίστοιχα, για το διαδικτυακό μας έγγραφο, μπορούμε να επιλέξουμε οποιαδήποτε απόχρωση από έναν τεράστιο αριθμό πιθανών (256 * 256 * 256). Για παράδειγμα, για να αποκτήσετε μαύρο, και τα τρία κανάλια του συνδυασμού χρωμάτων πρέπει να έχουν τιμή φωτεινότητας μηδέν και για να αποκτήσετε το λευκό, το κόκκινο, το πράσινο και το μπλε πρέπει να έχουν μέγιστη φωτεινότητα.

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

Μάλιστα, εκεί δύο βασικούς τρόπους:

1. ρύθμιση καταγράφοντας τη φωτεινότητα για καθένα από τα κανάλια (κόκκινο, πράσινο και μπλε) σε δεκαεξαδικό συμβολισμό
2. πληκτρολογώντας το όνομα του χρώματος στον κωδικό του εγγράφου web

Ας ξεκινήσουμε με το σύνθετο και ας προσπαθήσουμε να καταλάβουμε πώς να γράψουμε τα χρώματα σε έναν δεκαεξαδικό κώδικα. Αν θέλαμε, για παράδειγμα, να σημειώσουμε τον κωδικό για το λευκό στο δεκαδικό σύστημα, τότε θα παίρναμε τον κωδικό 256 256 256, και για το μαύρο - 0 0 0. Όλα είναι μάλλον ξεκάθαρα εδώ.

Αλλά στο δεκαεξαδικό σύστημα αριθμών, εκτός από τους αραβικούς αριθμούς, χρησιμοποιούνται επίσης τα πρώτα έξι γράμματα του λατινικού αλφαβήτου, καλά, υπάρχει μια ιδιαιτερότητα στον σχηματισμό αριθμών. Νομίζω ότι δεν αξίζει να ασχοληθώ με αυτό, αλλά για παράδειγμα θα πω ότι το λευκό για το Html μπορεί να οριστεί ως εξής: #ffffff και το μαύρο ως εξής: #000000. Εκείνοι. Το 00 αντιστοιχεί στο 0 στο δεκαδικό και το ff αντιστοιχεί στο 256.

Εκείνοι. Υπάρχουν δύο δεκαεξαδικά ψηφία για κάθε κανάλι χρώματος RGB στον κώδικα CSS, επομένως οι καταχωρίσεις τιμών χρώματος αποτελούνται από έξι ψηφία (ή γράμματα που ισοδυναμούν με δεκαεξαδικούς αριθμούς) πριν από το σύμβολο της λίρας "#". Όλα είναι αρκετά απλά.

Για παράδειγμα, στον παραπάνω πίνακα για τις απλούστερες αποχρώσεις, οι δεκαεξαδικές καταχωρήσεις τους θα μοιάζουν με αυτό:

Φυσικά, δεν είστε υποχρεωμένοι να εφεύρετε και να συγκρίνετε δεκαεξαδικούς κωδικούς σκιάς με αυτούς που θέλετε να δείτε στο έργο σας στο Διαδίκτυο. Μπορείτε να επιλέξετε ένα χρώμα για τον ιστότοπο σε οποιοδήποτε πρόγραμμα επεξεργασίας γραφικών (ακόμη και στο δωρεάν διαδικτυακό πρόγραμμα επεξεργασίας Pixlr), όπου σίγουρα θα εμφανιστεί μια εγγραφή αυτής της απόχρωσης σε μορφή RGB ή να βρείτε έναν πίνακα χρωμάτων Html και να αντιγράψετε τον κώδικα που χρειάζεστε από εκεί.

Χρώματα Yandex - επιλογή παλετών χρωμάτων RGB στα αποτελέσματα αναζήτησης Yandex

Δεν θέλετε να χρησιμοποιήσετε ένα πρόγραμμα επεξεργασίας γραφικών για αυτόν τον σκοπό ή να αναζητήσετε έναν πίνακα με κωδικούς; Κανένα πρόβλημα. Κάντε κύλιση προς τα κάτω σε αυτήν τη σελίδα και θα βρείτε πολλά συγκεκριμένα και ευκρινισμένα προγράμματα ειδικά για εργασία με χρώμα σε κώδικα Html ή CSS.

Εάν αυτό δεν σας ταιριάζει, τότε απλά ανοίξτε το Yandex και πληκτρολογήστε το πλαίσιο αναζήτησης αίτημα με το όνομα αυτής της απόχρωσης, που σας ενδιαφέρει (αν και, μπορείτε απλά να εισάγετε: γκρι-καφέ βυσσινί).

Ως αποτέλεσμα, στην κορυφή των αποτελεσμάτων αναζήτησης, θα δείτε έναν πολύ βολικό πίνακα παλέτας Yandex.Colors για την επιλογή χρωμάτων για τον ιστότοπό σας. Στην κάτω δεξιά γωνία αυτής της παλέτας, μπορείτε να αντιγράψετε τον δεκαεξαδικό κώδικα της απόχρωσης που χρειάζεστε (υπάρχει ένας κατακερματισμός μπροστά του), ο οποίος στη συνέχεια θα πρέπει μόνο να εισαχθεί στη σωστή θέση στο έγγραφο ιστού σας.

Όλα αυτά υλοποιούνται χάρη στον λεγόμενο «μάγο» Yandex, ο οποίος έχει σχεδιαστεί για να βοηθά τους σχεδιαστές και τους σχεδιαστές διάταξης.

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

Στην πραγματικότητα, αυτό το εργαλείο μπορεί επίσης να φανεί χρήσιμο για τους απλούς χρήστες του Διαδικτύου, για παράδειγμα, για να καταλάβουν πώς θα μοιάζουν τα έπιπλα σε απόχρωση γκρι-γκρίζα-βατόμουρο. Μπορείτε επίσης να παρακολουθήσετε ένα βίντεο σχετικά με τη χρήση αυτού του οδηγού Yandex:

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

Λοιπόν, πρώτον, είναι πιθανώς σαφές ότι δεν θα μπορείτε να αναπαραστήσετε και τις 16 εκατομμύρια αποχρώσεις που είναι δυνατές στο σχήμα RGB με τη βοήθεια λέξεων σε οποιονδήποτε πίνακα (θα κουραστείτε να τον περιηγηθείτε).

Δεύτερον, στο πρόγραμμα επικύρωσης W3C για την προδιαγραφή της γλώσσας σήμανσης υπερκειμένου 4.01 (υποστηρίζεται πλήρως από όλα τα πιθανά προγράμματα περιήγησης αυτή τη στιγμή), ορίζονται μόνο 16 χρώματα, τα οποία μπορούν να καθοριστούν σε κώδικα Html ή CSS με λέξεις:

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

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

Χρήση κωδικών χρωμάτων και ονομάτων στο Webmastering

Αυτή τη στιγμή, όλος ο εξωτερικός σχεδιασμός των ιστοσελίδων βρίσκεται στο έλεος του CSS (cascading style sheets) και ο καθορισμός του χρωματικού κώδικα απευθείας σε Html είναι εξαιρετικά σπάνιος, αλλά εξακολουθεί να συμβαίνει. Επιπλέον, υπάρχουν περιπτώσεις όπου είναι αδύνατο για τον ένα ή τον άλλο λόγο να χρησιμοποιηθούν εξωτερικά φύλλα στυλ CSS (για παράδειγμα, στην περίπτωση δημιουργίας μιας έκδοσης λίσταΕγγραφείτε).

Επομένως, θα συνεχίσω να δώσω ένα παράδειγμα ρύθμισης χρωμάτων σε Html, αν και σε αυτήν την περίπτωση θα χρησιμοποιούνται ήδη ετικέτες που δεν συνιστώνται από το πρόγραμμα επικύρωσης του W3C. Για παράδειγμα, πριν οριστεί το χρώμα για το φόντο στην ετικέτα "BODY" μέσω του χαρακτηριστικού "bgcolor" και το κείμενο χρωματίστηκε αμέσως σε ολόκληρη την ιστοσελίδα χρησιμοποιώντας το χαρακτηριστικό "text".

Η ρύθμιση των επιθυμητών αποχρώσεων σε αυτήν την περίπτωση θα μπορούσε να μοιάζει, για παράδειγμα, ως εξής:

Περιεχόμενο εγγράφου

Ως αποτέλεσμα, θα έχετε μια ιστοσελίδα με μπεζ φόντο και σκούρο μπλε γραμματοσειρά. Πριν από την έναρξη χρήσης του CSS, για την αλλαγή του χρώματος της γραμματοσειράς μιας συγκεκριμένης ενότητας κειμένου, χρησιμοποιήθηκε συνήθως η ετικέτα "FONT", η οποία δεν συνιστάται πλέον από το πρόγραμμα επικύρωσης του W3C, η οποία περιλάμβανε το χαρακτηριστικό "color" με το ίδιο όνομα σε ορίστε το χρώμα:

τμήμα κειμένου που έπρεπε να χρωματιστεί μπλε

Για να δείτε το αποτέλεσμα του γραπτού κώδικα στην οθόνη, πρέπει να αποθηκεύσετε αυτό το αρχείο με την επέκταση html και, στη συνέχεια, να το ανοίξετε σε οποιοδήποτε πρόγραμμα περιήγησης που σας βολεύει.

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

Όπως μπορείτε να δείτε, μερικές φορές δεν χρησιμοποιούνται έξι χαρακτήρες για τη συντόμευση της εγγραφής απόχρωσης, αλλά μόνο τρεις, εάν ταιριάζουν για κάθε κανάλι - "# 6c0" αντί για "# 66cc00".

ktonanovenkogo.ru

Παλέτα χρωμάτων RGB, πώς να ορίσετε σωστά τα χρώματα σε CSS και Html.

Όπως γνωρίζετε, για την επίλυση προβλημάτων σχετικά με τη χρωματική σχεδίαση του κειμένου, χρησιμοποιείται η γενικά αποδεκτή κατασκευή. RGB(αυτό είναι, το κόκκινο- Το κόκκινο, Πράσινος- Πράσινο, και ανάλογα Μπλε- Μπλε)

Παλέτα χρωμάτων RGBσυνεπάγεται τη χρήση μόνο τριών χρωμάτων, καθένα από τα οποία μπορεί κάλλιστα να αναπαρασταθεί με διαφορετικό επίπεδο φωτεινότητας. Σε κώδικα CSS και Html, για κάθε χρώμα της παλέτας, μπορεί να οριστεί μία από τις 256 πιθανές διαβαθμίσεις χρώματος.

Έτσι, για να σχεδιάσετε ένα έγγραφο, μπορείτε να εφαρμόσετε έναν αρκετά μεγάλο αριθμό χρωμάτων - 256-256-256. Για παράδειγμα, για να γίνει μαύρο ως αποτέλεσμα, και τα τρία χρώματα RGBείναι απαραίτητο να ρυθμίσετε την ένδειξη φωτεινότητας στο μηδέν και αντίστροφα, εάν απαιτείται λευκό χρώμα, τότε, κατά συνέπεια, για όλα τα χρώματα είναι απαραίτητο να ρυθμίσετε τη μέγιστη φωτεινότητα.

Ας ρίξουμε μια πιο προσεκτική ματιά στον τρόπο ρύθμισης της φωτεινότητας ενός χρώματος σε Html. Υπάρχουν δύο τρόποι ρύθμισης της φωτεινότητας:

1. Ορίζοντας τον χρωματικό κώδικα της παλέτας για τη σελίδα στον κώδικα Html, ορίζοντας τη φωτεινότητα Χρώματα RGBχρησιμοποιώντας το δεκαεξαδικό σύστημα
2. Ορίζοντας χρώματα σε CSS σε δεκαεξαδικό σύστημα αριθμών.

Ας ασχοληθούμε με τη σύνταξη κώδικα στο δεκαεξαδικό σύστημα και τη σήμανση υπερκειμένου. Για αρχή, ας θυμηθούμε μετρικό σύστημαλογισμός - για παράδειγμα, εάν χρειαζόμαστε ένα λευκό χρώμα, τότε ο κωδικός του θα μοιάζει με: 256 256 256, στην περίπτωση του μαύρου: 0 0 0.

Διαφορετικός δεκαδικός κωδικός, όπου υπάρχουν μόνο αριθμοί, η δεκαεξαδική παλέτα περιέχει και γράμματα του λατινικού αλφαβήτου. Δηλαδή, σε αυτή την περίπτωση, το δικό του συγκεκριμένο σύστημα αναπαράστασης αριθμών βρίσκει τη θέση του. Για παράδειγμα, το λευκό ορίζεται σε HTML ως: #ffffff και το μαύρο ως #000000. Είναι εύκολο να δούμε ότι εδώ το 00 αντιστοιχεί στο 0 και το ff αντιστοιχεί στο 256 (όταν μετατρέπεται σε δεκαδικό).

Έτσι, η χρωματική παλέτα RGB του Html, CSS χωρίζεται σε κανάλια, σε καθένα από τα οποία εκχωρούνται δύο δεκαεξαδικοί χαρακτήρες. Γι' αυτό όλα τα χρώματα στον κώδικα Html είναι κατασκευασμένα από έξι γράμματα (που ισοδυναμούν με αριθμούς) και τους ίδιους τους αριθμούς. Θα πρέπει να σημειωθεί ότι το σύμβολο "#" τοποθετείται πριν από τον κωδικό.

Φυσικά, δεν υπάρχει ανάγκη για χειροκίνητη επιλογή του κωδικού χρώματος - απλά πρέπει να εκκινήσετε οποιοδήποτε πρόγραμμα επεξεργασίας γραφικών, να βρείτε το σωστό χρώμα και να δείτε τον κωδικό χρώματος στις λεπτομερείς πληροφορίες. Σύστημα RGB. Υπάρχει μια άλλη, απλούστερη επιλογή - μια παλέτα Χρώματα htmlμε κωδικούς. Βρείτε το και αντιγράψτε το στον εαυτό σας.

Χρώματα Yandex - επιλογή του χρωματικού κώδικα Html στην παλέτα RGB στα αποτελέσματα του Yandex.

Μεταξύ άλλων, μπορείτε να επιλέξετε ένα συνδυασμό χρωμάτων για τον ιστότοπό σας χρησιμοποιώντας το Yandex. Για να το κάνετε αυτό, απλώς εισαγάγετε τη λέξη "χρώμα" ή το όνομα του χρώματος που χρειάζεστε στο πλαίσιο αναζήτησης. Ως αποτέλεσμα του αιτήματος, η παλέτα θα εμφανιστεί στην έξοδο Yandex.Colors.με το οποίο μπορείτε να επιλέξετε το χρώμα. Στη δεξιά γωνία, μπορείτε να δείτε τον χρωματικό κώδικα σε RGB και δεκαεξαδικό σύστημα, που χρησιμοποιείται κατά τη δημιουργία ενός εγγράφου web.

Αυτή η επιλογή από το Yandex διευκολύνει σημαντικά τη διαδικασία εργασίας. Όλα είναι πολύ απλά - πληκτρολογήστε το όνομα του χρώματος και λάβετε τον απαραίτητο κωδικό.

Θα πρέπει να σημειωθεί ότι ορισμένα από τα χρώματα στη σήμανση υπερκειμένου μπορούν να συνδυαστούν αρκετά με μια λέξη, για παράδειγμα: "γκρι" - γκρι, "λευκό" - λευκό, "μαύρο" - μαύρο κ.λπ. Φυσικά, η ρύθμιση ενός χρώματος σε Html με αυτόν τον τρόπο είναι δυνατή μόνο για μια όχι πολύ μεγάλη ποικιλία χρωμάτων. Πράγματι, 16 εκατομμύρια χρώματα RGB με τη βοήθεια λέξεων δεν μπορούν να βρεθούν σε κανένα βιβλίο αναφοράς ή πίνακα.

Το W3C 4.01 Validator (Hypertext Markup) παρέχει μια παλέτα 16 βασικών αποχρώσεων που δημιουργεί έναν πίνακα χρωμάτων CSS και Html για να δείξει ποια χρώματα μπορούν να καθοριστούν με λέξεις.

Τα υπόλοιπα χρώματα πρέπει να καθοριστούν χρησιμοποιώντας δεκαεξαδικό κωδικό.

Το όνομα των χρωμάτων της παλέτας RGB σε ιστοσελίδες, καθώς και η αντικατάσταση του χρώματος του ίδιου του κειμένου χρησιμοποιώντας το χαρακτηριστικό χρώματος, παραδείγματα και μεθόδους για τη χρήση χρωματικών κωδίκων σε CSS και Html.

Τώρα, εξωτερικός σχεδιασμόςΟι σελίδες διαμορφώνονται με χρήση CSS (cascading style sheets), αλλά, ωστόσο, είναι αρκετά συνηθισμένο να βρίσκουμε περιπτώσεις όπου το χρώμα καθορίζεται στο HTML.

Επομένως, παρακάτω είναι ένα παράδειγμα καθορισμού χρωμάτων σε HTML.

σελίδα του ιστότοπού σας

Το τελικό αποτέλεσμα είναι μια σελίδα με ματζέντα γραμματοσειρά σε χρυσό φόντο.

Προηγουμένως, στο CSS, για να καθορίσετε το χρώμα του κειμένου σε μία ενότητα, ήταν απαραίτητο να γραφτεί η ετικέτα FONT (δεν συνιστάται από το W3C) και για να ορίσετε το χρώμα, συμπεριλήφθηκε το χαρακτηριστικό "color" σε αυτό:

το κείμενο να χρωματιστεί κόκκινο

Για να χρωματίσετε κάποιο στοιχείο κειμένου στο χρώμα που χρειάζεστε, πρέπει να χρησιμοποιήσετε την ετικέτα FONT για να γράψετε κώδικα HTML που θα μοιάζει με αυτό:

Το κείμενο του οποίου το χρώμα γραμματοσειράς θέλετε να αντικαταστήσετε

Προς το παρόν, για να λάβετε μια έγκυρη διάταξη ιστότοπου, συνιστώ τη χρήση CSS κατά τον ορισμό του κωδικού χρώματος. Σε γενικές γραμμές, οι κανόνες για την εισαγωγή κωδικών χρώματος στο CSS δεν διαφέρουν από αυτούς που συζητήθηκαν παραπάνω.

www.bestseoblog.ru

Ένας νέος αλγόριθμος για την επιλογή χρωμάτων για κάρτες προώθησης εφαρμογών στο Yandex Launcher.

Διάφορες υπηρεσίες Yandex λειτουργούν με χρώμα για την επίλυση εργασιών διεπαφής: επισήμανση μπλοκ πληροφοριών και αποκρίσεων αντικειμένων, διαχείριση της προσοχής και δημιουργία οπτικής ιεραρχίας.

Παραδείγματα χρήσης αλγορίθμων αντιστοίχισης χρωμάτων στην αναζήτηση και στο Yandex.Music

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

Έχουμε κάρτες προώθησης για εφαρμογές στο Yandex Launcher: βαθμολογία, περιγραφή και το κουμπί "Εγκατάσταση". Αυτές είναι συστάσεις με βάση τα συμφραζόμενα - ανοίγουν στην κορυφή της λίστας εφαρμογών ή σε έναν φάκελο στην επιφάνεια εργασίας.

Αρχική υλοποίηση

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

• Λανθασμένος ορισμός χρώματος.
• "βρώμικα" χρώματα λόγω του μέσου όρου.
• βαρετά κουμπιά, βαρετές κάρτες.

Παραδείγματα προβληματικών καρτών

Τι ήθελες πραγματικά

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

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

Το Σάββατο, ξεσκόνισα το πρόγραμμα επεξεργασίας κώδικα, αποκάλυψα την HTML5 και τον Καμβά και άρχισα να εφευρίσκω. Τη Δευτέρα ήρθε στην ομάδα με προσφορά.

Νέος αλγόριθμος ανίχνευσης χρώματος

Βήμα 1.Παίρνουμε το εικονίδιο. Πετάμε άσπρα, μαύρα και διάφανα pixel.

Εικονίδιο πηγής → Τετράγωνο φιλτραρισμένων pixel

Βήμα 2Μειώνουμε την εικόνα που προκύπτει σε μέγεθος 2 × 2 pixel (με απενεργοποιημένο anti-aliasing). Ως αποτέλεσμα, παίρνουμε τέσσερα χρώματα του εικονιδίου. Εάν η αρχική εικόνα είναι ομοιογενής, μπορούν να επαναληφθούν - δεν πειράζει.

Αποτέλεσμα μετά το δεύτερο βήμα. Εικονίδιο πηγής → Χρώματα

Έχουμε απενεργοποιήσει το anti-aliasing για να μην αναμειγνύονται τα χρώματα, να μην «λερώνουν».

Στην πραγματικότητα, αποδεικνύεται ως εξής: το τετράγωνο χωρίζεται σε τέσσερα μέρη, παίρνουμε το μέσο εικονοστοιχείο από επάνω σειράκάθε τρίμηνο. Στην υλοποίηση, όλα είναι απλά: δεν χρειαζόμαστε καν μια πραγματική εικόνα κάτω δείγματος και γενικά εργαζόμαστε με γραφικά. Pixel με επιθυμητή θέσηπαίρνουμε από τον μονοδιάστατο πίνακα που λαμβάνεται μετά το πρώτο βήμα.

Βήμα 3Σχεδόν όλα είναι έτοιμα. Παραμένει αρκετά: παίρνουμε τα χρώματα που προκύπτουν, μεταφράζονται σε HSL, ταξινομούνται κατά ελαφρότητα (L). Ζωγραφίζουμε την κάρτα.

Σχέδιο φωτός:

• φόντο - το πιο ανοιχτό χρώμα.
• κουμπί - πιο κοντά στο φως.
• το κείμενο είναι το πιο σκοτεινό.

Σκούρο σχέδιο (εάν δύο ή περισσότερα χρώματα είναι σκούρα):

• φόντο είναι το πιο σκοτεινό χρώμα;
• κουμπί - πιο κοντά στο σκοτάδι.
• το κείμενο είναι το πιο ελαφρύ.

Εφαρμόζοντας χρώματα, ελέγξτε την αντίθεση: Διαφορά ελαφρότητας μεταξύ φόντου και κουμπιού ≥ 20; μεταξύ φόντου και κειμένου ≥ 60. Αν δεν ταιριάζει, το διορθώνουμε.

Λήφθηκαν κάρτες. Εικονίδιο πηγής → Χρώματα → Κάρτα

Και μερικά ακόμη παραδείγματα καρτών:

Αποτέλεσμα

Πήραμε πολύχρωμες κάρτες, από τα πραγματικά χρώματα του εικονιδίου, χωρίς «βρώμικες» ακαθαρσίες. Λόγω της χρήσης πολλών χρωμάτων, η κάρτα φαίνεται πολύ πιο ζωντανή. Είναι ιδιαίτερα ευχάριστο ότι με ένα ομοιόμορφο φόντο του εικονιδίου, η κάρτα γίνεται η άμεση συνέχισή της: το όριο μεταξύ τους δεν είναι καθόλου αισθητό.

Και το πιο σημαντικό: δύο ημέρες μετά την πρόταση του νέου αλγορίθμου, η πρώτη υλοποίηση ήταν ήδη διαθέσιμη στο build dev. Το δοκιμάσαμε εντός της ομάδας, ορίσαμε κατώφλια για το φίλτρο στο πρώτο βήμα και παρέχουμε ειδικές περιπτώσεις:

• εικονίδιο ενός χρώματος - κάντε το φόντο λίγο πιο σκούρο για να μην συγχωνεύεται.
• εικονίδιο με φόντο - κοιτάξτε τα pixel γύρω από τις άκρες. αν όλα είναι ίδια, ορίστε το ίδιο φόντο κάρτας.

Ο τροποποιημένος αλγόριθμος περιλαμβάνεται στην επόμενη έκδοση. Ιδιαίτερες ευχαριστίες στον Dima Ovcharov, επικεφαλής της ομάδας ανάπτυξης του Yandex Launcher, για το ενδιαφέρον, την επιθυμία και την υπομονή του. Τέλος, περισσότερα παραδείγματα.