Εξαγωγέας Παλέτας Χρωμάτων
Εξάγετε τα κυρίαρχα χρώματα από οποιαδήποτε εικόνα.
Αφήστε μια εικόνα εδώ ή κάντε κλικ (μόνο ένα αρχείο)
ή επικολλήστε εικόνα από το πρόχειρο (Ctrl+V / ⌘V)
Κατανομή Χρωμάτων
Copied!
Σας φάνηκε χρήσιμο αυτό το εργαλείο;
Θέλετε να μας πείτε περισσότερα;
0/500
Θέλετε να επικοινωνήσουμε μαζί σας;
Διαφήμιση
Σχετικά με αυτό το εργαλείο
Ο Εξαγωγέας Παλέτας Χρωμάτων αναλύει οποιαδήποτε μεταφορτωμένη εικόνα για να εντοπίσει και να εξαγάγει τα πιο οπτικά σημαντικά χρώματα της. Χρησιμοποιεί τον αλγόριθμο κβαντοποίησης χρώματος median cut (Heckbert, 1982), μια καθιερωμένη τεχνική από την έρευνα ψηφιακής επεξεργασίας εικόνας που έχει υιοθετηθεί ευρέως σε λογισμικό γραφικών, συστήματα εκτύπωσης και εργαλεία ανάπτυξης ιστού. Σε αντίθεση με την απλή δειγματοληψία pixel, που επιλέγει αυθαίρετα σημεία σε μια εικόνα, ο αλγόριθμος median cut εξετάζει κάθε pixel στα δεδομένα εικόνας και διαιρεί αναδρομικά ολόκληρο τον χρωματικό χώρο σε διακριτές περιοχές. Αυτή η προσέγγιση εξασφαλίζει ότι η προκύπτουσα παλέτα αντιπροσωπεύει με ακρίβεια την πραγματική κατανομή χρωμάτων της εικόνας. Το εργαλείο παράγει χρώματα σε τρεις βιομηχανικά τυποποιημένες μορφές. Οι κωδικοί HEX είναι το web standard που χρησιμοποιείται σε CSS και HTML. Οι τιμές RGB (Κόκκινο, Πράσινο, Μπλε) είναι η μορφή που χρησιμοποιείται από τα περισσότερα λογισμικά σχεδιασμού. Οι τιμές HSL (Απόχρωση, Κορεσμός, Φωτεινότητα) παρέχουν ένα διαισθητικό μοντέλο χρώματος ιδιαίτερα χρήσιμο για συστηματικές ρυθμίσεις. Πρόσθετα χαρακτηριστικά περιλαμβάνουν δημιουργία αρμονιών χρωμάτων, έλεγχο αντίθεσης WCAG για προσβασιμότητα και προσομοίωση αχρωματοψίας. Μπορείτε να ταξινομήσετε τα εξαχθέντα χρώματα κατά κυριαρχία, φωτεινότητα, απόχρωση ή κορεσμό. Οι επιλογές εξαγωγής περιλαμβάνουν CSS custom properties, Tailwind CSS, δεδομένα JSON και εικόνες PNG. Το εργαλείο χρησιμοποιεί το HTML Canvas API (W3C) για ανάλυση σε επίπεδο pixel και όλη η επεξεργασία γίνεται εξ ολόκληρου στο πρόγραμμα περιήγησης σας. Οι εικόνες σας δεν ανεβαίνουν ποτέ σε κανένα διακομιστή.
Πώς να Χρησιμοποιήσετε
- Ανεβάστε μια εικόνα σύροντας ή κάνοντας κλικ. Λειτουργεί με φωτογραφίες, λογότυπα ή screenshots.
- Επιλέξτε πόσα χρώματα (5-15) και τη μορφή σας (HEX, RGB ή HSL).
- Κάντε κλικ σε οποιοδήποτε δείγμα για αντιγραφή. Εξαγωγή ως CSS, JSON ή PNG.
Η Επιστήμη της Εξαγωγής Χρώματος
Η εξαγωγή χρώματος από ψηφιακές εικόνες έχει τις ρίζες της στον τομέα της κβαντοποίησης χρώματος, έναν κλάδο της ψηφιακής επεξεργασίας εικόνας που εμφανίστηκε στις αρχές της δεκαετίας του 1980 όταν οι οθόνες υπολογιστών περιορίζονταν σε λίγα ταυτόχρονα χρώματα. Το άρθρο του Paul Heckbert το 1982 εισήγαγε τον αλγόριθμο median cut ως αποτελεσματική μέθοδο για μείωση εκατομμυρίων μοναδικών χρωμάτων pixel σε μια αντιπροσωπευτική παλέτα. Το ανθρώπινο μάτι μπορεί να διακρίνει περίπου 10 εκατομμύρια χρώματα, αλλά οι περισσότερες εικόνες περιέχουν μόνο μερικές εκατοντάδες έως χιλιάδες αντιληπτικά διακριτά χρώματα. Οι αλγόριθμοι κβαντοποίησης χρώματος εκμεταλλεύονται αυτό ομαδοποιώντας οπτικά παρόμοια χρώματα. Η προσέγγιση median cut λειτουργεί στον τρισδιάστατο χρωματικό χώρο RGB. Οι σύγχρονες εφαρμογές της εξαγωγής χρώματος εκτείνονται πολύ πέρα από τη βελτιστοποίηση οθόνης. Στο web design, οι εξαχθείσες παλέτες βοηθούν τους σχεδιαστές να δημιουργούν συνεκτικά οπτικά συστήματα. Στην οπτικοποίηση δεδομένων, η εξαγωγή χρώματος εντοπίζει βέλτιστες επιλογές παλέτας. Οι σχεδιαστές brand χρησιμοποιούν την εξαγωγή για να αποκτήσουν ψηφιακές προδιαγραφές χρώματος από φυσικά υλικά. Αρχές θεωρίας χρώματος όπως συμπληρωματικές, ανάλογες και τριαδικές αρμονίες μπορούν να εφαρμοστούν στα εξαχθέντα χρώματα. Αυτές οι αρμονίες βασίζονται σε μαθηματικές σχέσεις στον χρωματικό τροχό HSL: τα συμπληρωματικά χρώματα απέχουν 180 μοίρες, τα ανάλογα βρίσκονται εντός 30 μοιρών και τα τριαδικά σχηματίζουν ισόπλευρο τρίγωνο σε διαστήματα 120 μοιρών.
Μεθοδολογία
Αυτό το εργαλείο προσφέρει δυο αλγορίθμους εξαγωγής χρώματος. Η ομαδοποίηση k-means ομαδοποιεί παρόμοια pixel προσαρμόζοντας επαναληπτικά τα κέντρα ομάδων μέχρι να συγκλίνουν, παράγοντας παλέτες σταθμισμένες προς τα οπτικά κυρίαρχα χρώματα. Ο αλγόριθμος median cut (Heckbert, 1982) χωρίζει αναδρομικά τον χρωματικό χώρο κατά μήκος της ευρύτερης διάστασης καναλιού στο σημείο διαμέσου, δημιουργώντας πιο ομοιόμορφα κατανεμημένες παλέτες. Και οι δυο αλγόριθμοι λειτουργούν σε μια σμικρυνμένη αντιγραφή της εικόνας σας (μέγιστο 200×200 pixel) για αποδοτική επεξεργασία. Τα διαφανή pixel εξαιρούνται από την ανάλυση. Το φιλτράρισμα διάθεσης χρώματος προελέγχει τα pixel κατά ιδιότητες HSL πριν την ομαδοποίηση, και η γεννήτρια συστήματος σχεδιασμού εφαρμόζει ανάθεση ρόλων βασισμένη στη φωτεινότητα στην τελική παλέτα.
Πηγές: Median Cut Algorithm · K-Means Clustering
Κατανόηση των Αποτελεσμάτων σας
Η εξαχθείσα παλέτα αντιπροσωπεύει τα πιο οπτικά σημαντικά χρώματα στην εικόνα σας, ταξινομημένα κατά κυριαρχία. Το πρώτο χρώμα καλύπτει τη μεγαλύτερη περιοχή pixel και είναι τυπικά το φόντο ή το κύριο χρώμα του θέματος. Τα επόμενα χρώματα αντιπροσωπεύουν προοδευτικά μικρότερα τμήματα της εικόνας. Επιλέξτε το μέγεθος παλέτας με βάση τους σχεδιαστικούς σας στόχους. Μια παλέτα 3-5 χρωμάτων είναι ιδανική για συνεκτικές εταιρικές ταυτότητες και σχεδιασμό UI. Μια παλέτα 6-8 χρωμάτων καταγράφει ενδιάμεσους τόνους για εικονογραφήσεις. Μια παλέτα 9-10 χρωμάτων αποκαλύπτει λεπτές διαβαθμίσεις, ιδανική για ανάλυση έργων τέχνης. Χρησιμοποιήστε τις επιλογές ταξινόμησης για διαφορετικές ροές εργασίας. Ταξινόμηση κατά κυριαρχία για οπτικό βάρος, κατά απόχρωση για ανάλυση αρμονίας, κατά φωτεινότητα για έλεγχο αντίθεσης και κατά κορεσμό για ζωντανά έναντι αποσβεσμένα χρώματα. Ο ελεγκτής αντίθεσης WCAG βοηθά να επιβεβαιώσετε ότι η παλέτα σας πληροί τα πρότυπα προσβασιμότητας. Αναλογία αντίθεσης τουλάχιστον 4,5:1 απαιτείται για κανονικό κείμενο (επίπεδο AA), ενώ 3:1 αρκεί για μεγάλο κείμενο. Η προεπισκόπηση αχρωματοψίας διασφαλίζει ότι η παλέτα σας παραμένει διακριτή.
Πρακτικά Παραδείγματα
Παράδειγμα 1 - Εταιρική Ταυτότητα: Ανεβάστε το λογότυπο της εταιρείας σας για να εξαγάγετε τα ακριβή χρώματα του, στη συνέχεια χρησιμοποιήστε την εξαγωγή CSS για να δημιουργήσετε ένα συνεπές θέμα ιστοσελίδας. Παράδειγμα 2 - Moodboard Φωτογραφίας: Εξαγάγετε 8-10 χρώματα από μια φωτογραφία τοπίου για να καταγράψετε όλο το εύρος φυσικών τόνων, από τα μπλε του ουρανού έως τα πράσινα του φυλλώματος. Εξαγωγή ως PNG δείγμα. Παράδειγμα 3 - Σχεδιασμός UI από Έμπνευση: Βρείτε μια φωτογραφία που αποτυπώνει τη διάθεση που θέλετε για την εφαρμογή σας. Εξαγάγετε 5 χρώματα και χρησιμοποιήστε τον δημιουργό αρμονιών για συμπληρωματικές και ανάλογες παραλλαγές. Παράδειγμα 4 - Έλεγχος Προσβασιμότητας: Εξαγάγετε την παλέτα χρωμάτων του υπάρχοντος ιστοτόπου σας από ένα screenshot, χρησιμοποιήστε τον ελεγκτή αντίθεσης WCAG για να εντοπίσετε ζεύγη χρωμάτων που δεν πληρούν τις απαιτήσεις προσβασιμότητας.
Συμβουλές για Καλύτερη Εξαγωγή
1. Χρησιμοποιείτε εικόνες υψηλής ανάλυσης όταν είναι δυνατόν. Υψηλότερη ανάλυση παρέχει περισσότερα δεδομένα pixel για ανάλυση, παράγοντας ακριβέστερες παλέτες. 2. Περικόψτε την εικόνα σας πριν το ανέβασμα αν θέλετε να εστιάσετε σε μια συγκεκριμένη περιοχή. Η εξαγωγή από ολόκληρη τη σκηνή θα περιλάβει χρώματα φόντου που μπορεί να μην είναι σχετικά. 3. Ρυθμίστε το μέγεθος παλέτας ανάλογα με τον σκοπό σας. Ξεκινήστε με 5 χρώματα για μια καθαρή παλέτα. Αυξήστε σε 8-10 αν χρειάζεστε λεπτές παραλλαγές. 4. Χρησιμοποιήστε την ταξινόμηση HSL για να εντοπίσετε γρήγορα σχέσεις μεταξύ εξαχθέντων χρωμάτων. Χρώματα κοντά σε απόχρωση αλλά με διαφορετικό κορεσμό δημιουργούν αρμονικούς συνδυασμούς. 5. Πάντα ελέγχετε τις αναλογίες αντίθεσης με τον ενσωματωμένο ελεγκτή WCAG πριν χρησιμοποιήσετε χρώματα για κείμενο και φόντα. Μια όμορφη παλέτα είναι αποτελεσματική μόνο αν παραμένει αναγνώσιμη. 6. Εξαγάγετε ως CSS custom properties για web projects ώστε να διατηρήστε μια ενιαία πηγή αλήθειας για τις τιμές χρωμάτων σας.
Πηγές
Όλοι οι υπολογισμοί γίνονται τοπικά στο πρόγραμμα περιήγησής σας. Δεν αποστέλλονται δεδομένα σε κανέναν διακομιστή.
Ενσωμάτωση εργαλείου
Συχνές ερωτήσεις
Πώς λειτουργεί η εξαγωγή;
Αλγόριθμοι κβαντοποίησης αναλύουν pixels και ομαδοποιούν παρόμοια χρώματα.
Τι μορφές χρώματος παρέχονται;
HEX για web/CSS, RGB για λογισμικό σχεδίασης, HSL για θεωρία χρώματος.
Πώς εξάγω την παλέτα;
Ως CSS variables, JSON δεδομένα, ή PNG εικόνα.
Ποιες είναι καλές χρήσεις;
Δημιουργία παλετών brand, αντιστοίχιση χρωμάτων UI, εύρεση συμπληρωματικών χρωμάτων.
Ανεβαίνει η εικόνα μου σε server για επεξεργασία;
Όχι. Όλη η εξαγωγή χρωμάτων γίνεται εξ ολοκλήρου στον browser σας χρησιμοποιώντας το HTML5 Canvas API. Η εικόνα σας φορτώνεται σε ένα τοπικό στοιχείο canvas για ανάλυση pixel και δεν φεύγει ποτέ από τη συσκευή σας. Δεν γίνονται αιτήματα δικτύου κατά τη διαδικασία εξαγωγής, εξασφαλίζοντας πλήρη ιδιωτικότητα.
Ποιες μορφές εικόνας μπορώ να ανεβάσω;
Μπορείτε να ανεβάσετε οποιαδήποτε μορφή εικόνας που υποστηρίζει ο browser σας, συμπεριλαμβανομένων JPEG, PNG, WebP, GIF, BMP και SVG. Για την πιο ακριβή εξαγωγή παλέτας, οι φωτογραφίες υψηλής ανάλυσης και εικόνες με ποικίλο χρωματικό περιεχόμενο δίνουν τα καλύτερα αποτελέσματα. Πολύ μικρές εικόνες ή εικόνες με λίγα χρώματα μπορεί να παράγουν λιγότερο ποικίλες παλέτες.
Ποια είναι η διαφορά μεταξύ k-means και median cut;
Η ομαδοποίηση k-means ομαδοποιεί τα pixel βελτιστοποιώντας επαναληπτικά τα κέντρα ομάδων για ελαχιστοποίηση της χρωματικής απόστασης. Τείνει να παράγει παλέτες σταθμισμένες προς τα πιο οπτικά κυρίαρχα χρώματα.
Ο αλγόριθμος median cut χωρίζει τον χρωματικό χώρο κατά μήκος της ευρύτερης διάστασης στο σημείο διαμέσου, δημιουργώντας ομάδες ίσου μεγέθους. Γενικά αποτυπώνει ένα ευρύτερο φάσμα χρωμάτων, συμπεριλαμβανομένων των λιγότερο κυρίαρχων. Και οι δύο αλγόριθμοι εκτελούνται εξ ολοκλήρου στον browser σας.
Τι είναι οι λειτουργίες διάθεσης χρωμάτων;
Οι λειτουργίες διάθεσης χρωμάτων φιλτράρουν την εξαχθείσα παλέτα ανάλογα με την οπτική αίσθηση. Ζωηρό δείχνει πολύ κορεσμένα χρώματα μέτριας φωτεινότητας. Απαλό εστιάζει σε αποκορεσμένους τόνους. Σκοτεινό εξάγει βαθιά, σκοτεινά χρώματα. Ανοιχτό αναδεικνύει ανοιχτές, φωτεινές αποχρώσεις. Φυσικό δείχνει όλα τα χρώματα χωρίς φίλτρο. Είναι χρήσιμο όταν θέλετε μια συγκεκριμένη ατμόσφαιρα από την εικόνα σας.
Πώς λειτουργεί η γεννήτρια συστήματος σχεδιασμού;
Η γεννήτρια συστήματος σχεδιασμού αναθέτει αυτόματα σημασιολογικούς ρόλους στα εξαγόμενα χρώματά σας βάσει ανάλυσης φωτεινότητας και κορεσμού. Εντοπίζει τους καλύτερους υποψήφιους για κύριο (πιο κορεσμένο), δευτερεύον, έμφαση, φόντο (πιο ανοιχτό), κείμενο (υψηλότερη αντίθεση με το φόντο) και χρώματα περιγράμματος. Μπορείτε να αντιγράψετε το αποτέλεσμα ως έτοιμες CSS custom properties.
Μπορώ να επιλέξω συγκεκριμένα χρώματα από την εικόνα;
Ναι. Κάντε κλικ στο κουμπί σταγονόμετρου για να ενεργοποιήσετε τη λειτουργία επιλογής χρώματος. Περάστε τον κέρσορα πάνω από την εικόνα για να δείτε μια μεγεθυμένη προεπισκόπηση της περιοχής. Κάντε κλικ για να προσθέσετε αυτό το ακριβές χρώμα pixel στην παλέτα σας. Μπορείτε επίσης να κάνετε διπλό κλικ σε οποιοδήποτε δείγμα για να επεξεργαστείτε χειροκίνητα την τιμή χρώματος και να κλειδώσετε χρώματα για να τα διατηρήσετε κατά την επανεξαγωγή.
Τι είναι η μορφή εξαγωγής ASE;
Το ASE (Adobe Swatch Exchange) είναι μια δυαδική μορφή αρχείου που χρησιμοποιείται από τις εφαρμογές Adobe Creative Suite, συμπεριλαμβανομένων των Photoshop, Illustrator και InDesign. Η εξαγωγή της παλέτας σας ως αρχείο ASE σας επιτρέπει να την εισάγετε απευθείας σε αυτά τα εργαλεία σχεδιασμού. Το αρχείο περιέχει τις τιμές RGB και το όνομα κάθε χρώματος.