Το Color Picker παρέχει εργαλείο eyedropper με ακρίβεια pixel για επιλογή χρωμάτων από οποιοδήποτε στοιχείο σε ιστοσελίδα — κείμενο, φόντα, εικόνες, gradients ή οποιοδήποτε ορατό pixel. Λάβετε την ακριβή τιμή χρώματος ταυτόχρονα σε μορφές HEX, RGB και HSL, με μεγεθυμένη προεπισκόπηση pixel για ακριβή στόχευση. Τα προηγουμένως επιλεγμένα χρώματα αποθηκεύονται σε ταινία ιστορικού για γρήγορη επαναπρόσβαση.
Η εξαγωγή ακριβών τιμών χρώματος από ιστοσελίδα είναι συνηθισμένη εργασία — αντιστοίχιση brand color, αναφορά σε σχεδιασμό ή έλεγχος απόχρωσης που χρησιμοποιείται σε ιστότοπο ανταγωνιστή. Το DevTools εμφανίζει χρώματα στον πίνακα Styles, αλλά μόνο για στοιχεία με ρητές ιδιότητες CSS χρώματος — όχι για εικόνες, gradients ή κληρονομημένα χρώματα. Το eyedropper του Color Picker λειτουργεί σε επίπεδο pixel — διαβάζει το πραγματικό αποδοσμένο χρώμα οποιουδήποτε pixel βρίσκεται κάτω από τον δρομέα σας. Κάντε κλικ στον μπλε ουρανό μιας hero εικόνας, σε ένα μεσαίο σημείο gradient ή σε ημιδιαφανή επικάλυψη, και λάβετε την ακριβή σύνθετη τιμή χρώματος. Ο μεγεθυμένος κύκλος προεπισκόπησης εμφανίζει μεγεθυμένη προβολή γύρω pixels ώστε να μπορείτε να στοχεύσετε το ακριβές pixel. Και οι τρεις έξοδοι μορφής (HEX, RGB, HSL) εμφανίζονται ταυτόχρονα — κάντε κλικ σε οποιαδήποτε μορφή για αντιγραφή. Οι τελευταίες επιλογές σας αποθηκεύονται σε ταινία ιστορικού χρωμάτων στο κάτω μέρος.
A magnified circular preview shows zoomed-in pixels around your cursor, with crosshair targeting for exact pixel selection. Pick colors from text, backgrounds, images, gradients, SVGs, or any visible pixel on the page.
Κάθε επιλεγμένο χρώμα εμφανίζεται και στις τρεις μορφές ταυτόχρονα: HEX (#7c3aed), RGB (rgb(124, 58, 237)) και HSL (hsl(262, 83%, 58%)). Χωρίς εναλλαγή ή μετατροπή — όλες οι μορφές είναι αμέσως διαθέσιμες.
Κάντε κλικ σε οποιαδήποτε γραμμή μορφής (HEX, RGB ή HSL) για άμεση αντιγραφή αυτής της συγκεκριμένης τιμής στο πρόχειρό σας. Σύντομη κινούμενη εικόνα επιβεβαιώνει την ενέργεια. Επικολλήστε απευθείας στο CSS, εργαλείο σχεδιασμού ή προδιαγραφή χρώματος.
Τα πρόσφατα επιλεγμένα χρώματά σας αποθηκεύονται σε οπτική ταινία ιστορικού που εμφανίζει color swatches. Κάντε κλικ σε οποιοδήποτε swatch για επαναεπιλογή αυτού του χρώματος και προβολή των τιμών του ξανά. Το ιστορικό παραμένει κατά τη διάρκεια της συνεδρίας σας.
Το επιλεγμένο χρώμα εμφανίζεται ως μεγάλο swatch πάνω από τις τιμές μορφής, κάνοντας εύκολη την εποπτεία και επαλήθευση του χρώματος. Το swatch είναι αρκετά μεγάλο για να εμφανίσει λεπτές αποχρώσεις που μπορεί να φαίνονται πανομοιότυπες σε μικρότερα μεγέθη.
Επιλέγει χρώματα από οποιοδήποτε ορατό pixel: CSS χρώματα, CSS gradients, εικόνες (PNG, JPG, SVG), canvas στοιχεία, καρέ βίντεο, ημιδιαφανείς επικαλύψεις (επιλέγοντας το σύνθετο χρώμα) και ακόμα iframes. Αν μπορείτε να το δείτε, μπορείτε να το επιλέξετε.
Επιλέξτε το ακριβές brand color από τον ιστότοπο μιας εταιρείας για να διασφαλίσετε ότι ο σχεδιασμός ή το περιεχόμενό σας χρησιμοποιεί τη σωστή απόχρωση. Λάβετε την ακριβή τιμή HEX αντί να την εκτιμάτε με το μάτι ή να ψάχνετε μέσα από brand guidelines.
Επιλέξτε χρώματα απευθείας από hero images, φωτογραφίες προϊόντων ή εικονογραφήσεις. Εξάγετε ένα κυρίαρχο χρώμα από φωτογραφία για χρήση ως συμπληρωματικό φόντο στον σχεδιασμό σας.
Η προδιαγραφή σχεδιασμού λέει ότι το κουμπί πρέπει να είναι #7c3aed. Επιλέξτε το χρώμα από το υλοποιημένο κουμπί για να επαληθεύσετε ότι ταιριάζει. Εντοπίζει λεπτές διαφορές χρώματος αόρατες με γυμνό μάτι.
Περιηγηθείτε σε ιστότοπους έμπνευσης σχεδιασμού και επιλέξτε χρώματα που τραβούν την προσοχή σας. Η ταινία ιστορικού χτίζει μια παλέτα χρωμάτων που επιλέξατε κατά τη διάρκεια της συνεδρίας — χρησιμοποιήστε τη ως αφετηρία για το δικό σας χρωματολόγιο.
Επιλέξτε χρώματα σε διαφορετικά σημεία κατά μήκος ενός CSS gradient για να δείτε το ακριβές χρώμα σε κάθε θέση. Χρήσιμο για αναπαραγωγή gradients ή κατανόηση του τρόπου ανάμιξης gradient stops.
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο Color Picker. Ο δρομέας αλλάζει σε eyedropper με μεγεθυμένο κύκλο προεπισκόπησης.
Μετακινήστε τον δρομέα σας πάνω από τη σελίδα. Η μεγεθυμένη προεπισκόπηση εμφανίζει μεγεθυμένη προβολή των pixels γύρω από τον δρομέα σας, με crosshair που υποδεικνύει το ακριβές pixel-στόχο.
Κάντε κλικ οπουδήποτε στη σελίδα για να επιλέξετε το χρώμα σε αυτό το pixel. Το color swatch, HEX, RGB και HSL ενημερώνονται αμέσως.
Κάντε κλικ στη γραμμή HEX, RGB ή HSL για να αντιγράψετε αυτή την τιμή στο πρόχειρό σας. Εμφανίζεται σύντομη επιβεβαίωση αντιγραφής.
Συνεχίστε να κάνετε κλικ για να επιλέξετε περισσότερα χρώματα. Κάθε επιλογή προστίθεται στην ταινία ιστορικού. Κάντε κλικ σε οποιοδήποτε swatch ιστορικού για ανάκληση αυτού του χρώματος.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
