Εξαγωγέας Χρωματικής Παλέτας

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

Πώς λειτουργεί το Εξαγωγέας χρωματικής παλέτας

Το Color Palette Extractor αναλύει την εικόνα σας και εντοπίζει τα πιο οπτικά κυρίαρχα χρώματα χρησιμοποιώντας έναν αλγόριθμο ομαδοποίησης k-means που τρέχει πάνω στα δεδομένα εικονοστοιχείων σε ένα Canvas. Το αποτέλεσμα είναι ένα σύνολο δειγμάτων χρώματος με τις τιμές HEX τους που μπορείτε να αντιγράψετε μεμονωμένα. Κανένα byte εικόνας δεν φεύγει από το πρόγραμμα περιήγησής σας, η δειγματοληψία εικονοστοιχείων τρέχει τοπικά σε έναν Web Worker ώστε το κύριο νήμα να παραμένει ανταποκρινόμενο.

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

Συγγραφή από Bastien Sulyan

Εξαγωγέας χρωματικής παλέτας: οδηγός βήμα προς βήμα

Ρίξτε την εικόνα σας στην περιοχή μεταφόρτωσης ή κάντε κλικ για αναζήτηση.
Ορίστε τον αριθμό των χρωμάτων που θέλετε να εξαγάγετε (συνήθως 5 έως 12).
Κάντε κλικ στο Extract. Η ομαδοποίηση εικονοστοιχείων τρέχει τοπικά σε έναν Web Worker.
Δείτε τα προκύπτοντα δείγματα χρώματος και τις τιμές HEX τους.
Κάντε κλικ σε οποιοδήποτε δείγμα για να αντιγράψετε τον κωδικό HEX του στο πρόχειρο.

Συνήθεις περιπτώσεις χρήσης

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

Συχνές ερωτήσεις

Πώς λειτουργεί ο αλγόριθμος εξαγωγής χρωμάτων;

Το εργαλείο διαβάζει όλες τις τιμές εικονοστοιχείων από την εικόνα μέσω Canvas.getImageData(), τις υποδειγματοληπτεί για ταχύτητα, και στη συνέχεια τρέχει ομαδοποίηση k-means. Κάθε κεντροειδές συστάδας γίνεται ένα από τα χρώματα εξόδου. Το k-means ομαδοποιεί τα εικονοστοιχεία κατά εγγύτητα χρώματος ώστε οι κυρίαρχοι οπτικοί τόνοι να αναδύονται ως τα χρώματα των κεντροειδών.

Απαιτεί η εξαγωγή χρωμάτων το ανέβασμα της εικόνας;

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

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

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

Μπορώ να εξαγάγω παλέτες από φωτογραφίες με διαφάνεια;

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

Σε ποια μορφή είναι οι κωδικοί χρώματος;

Το εργαλείο εξάγει κωδικούς HEX (όπως #3A7BD5). Αν χρειάζεσαι RGB, HSL ή άλλες μορφές, αντίγραψε την τιμή HEX στο εργαλείο Color Converter, που δέχεται HEX και μετατρέπει σε όλα τα κοινά χρωματικά μοντέλα.

Σχετικά εργαλεία

Κρατήστε τα πάντα τοπικά, εξερευνήστε συμπληρωματικά εργαλεία.

Όλα τα εργαλεία εικόνας