Πώς να προσδιορίσετε συγκεκριμένο χρώμα σε μια εφαρμογή ή ιστότοπο

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

1. Χρήση των Εργαλείων προγραμματιστή στο πρόγραμμα περιήγησης Ιστού Chrome

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

• Ανοίξτε τον ιστότοπο στον οποίο θέλετε να προσδιορίσετε ένα χρώμα στο πρόγραμμα περιήγησης ιστού Chrome
• Κάντε κλικ στο εικονίδιο με τις τρεις κουκκίδες επάνω δεξιά στο Chrome. Θα εμφανιστεί ένα αναδυόμενο παράθυρο με πολλές επιλογές.
• Κάντε κλικ στο «Περισσότερα εργαλεία» και, στη συνέχεια, επιλέξτε «Εργαλεία προγραμματιστή» από το αναδυόμενο παράθυρο που προκύπτει.
• Χρησιμοποιήστε Ctrl + Shift + I εάν θέλετε να παραλείψετε τα παραπάνω βήματα
• Τώρα, το παράθυρο χωρίζεται σε δύο οθόνες – τον ​​ιστότοπο στα αριστερά και τον κώδικα του ιστότοπου στα δεξιά
• Πληκτρολογήστε Ctrl + Shift + C στο πληκτρολόγιό σας. Αυτό σας δείχνει όλες τις λεπτομέρειες ενός συγκεκριμένου στοιχείου στον ιστότοπο όταν τοποθετούμε τον κέρσορα του ποντικιού στα στοιχεία.
• Μπορείτε να βρείτε τον χρωματικό κωδικό του στοιχείου μαζί με άλλες χρήσιμες πληροφορίες.

Παράδειγμα

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

Μπορείτε να επιλέξετε τα εργαλεία προγραμματιστή κάνοντας κλικ στις τρεις τελείες στη γωνία της οθόνης σας. Στο αναπτυσσόμενο μενού, επιλέξτε Περισσότερα εργαλεία και μετά Εργαλεία προγραμματιστή.

Η οθόνη θα χωριστεί οπτικά σε δύο σελίδες. Θα δείτε τον ιστότοπο στα αριστερά και τον κωδικό του ιστότοπου στα δεξιά.

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

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

Μπορείτε να βρείτε το χρώμα του ταμπλό μαζί με άλλες χρήσιμες λεπτομέρειες. Χρώμα: #333333, Χρώμα φόντου: #5D4A8E. Αν και μπορεί να φαίνεται λίγο τρομακτικό στην αρχή, το πρόγραμμα γίνεται πολύ πιο εύκολο στη χρήση με λίγη εξάσκηση.

2. Οφθαλμικό σταγονόμετρο Chrome Extension

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

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

• Ανοίξτε οποιονδήποτε ιστότοπο ή εφαρμογή στο πρόγραμμα περιήγησης Ιστού Chrome
• Κάντε κλικ στο εικονίδιο επέκτασης Eye Dropper
• Επιλέξτε "Επιλογή χρώματος από την ιστοσελίδα" και τοποθετήστε το δείκτη του ποντικιού σας σε διαφορετικά στοιχεία στην εφαρμογή ή τον ιστότοπο.

Μπορείτε να βρείτε τον χρωματικό κώδικα των στοιχείων που αναφέρονται κάτω δεξιά στην ιστοσελίδα.

Παράδειγμα

Εντάξει, ας χρησιμοποιήσουμε το εργαλείο επέκτασης σταγονόμετρου σε ένα πραγματικό παράδειγμα. Θα ξεκινήσουμε ανοίγοντας έναν ιστότοπο και πατώντας το εικονίδιο επέκτασης Eye Dropper

Όταν τοποθετείτε το δείκτη του ποντικιού σας σε διάφορα στοιχεία του ιστότοπου, μπορείτε να δείτε τους χρωματικούς κωδικούς να εμφανίζονται σε μια ενότητα κάτω δεξιά στην οθόνη.

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