Εξαγωγέας Παλέτας Χρωμάτων
Εξάγετε τα κυρίαρχα χρώματα από οποιαδήποτε εικόνα.
Αφήστε μια εικόνα εδώ ή κάντε κλικ (μόνο ένα αρχείο)
ή επικολλήστε εικόνα από το πρόχειρο (Ctrl+V / ⌘V)
Κατανομή Χρωμάτων
Copied!
Διαφήμιση
Σχετικά με αυτό το εργαλείο
Ο Εξαγωγεας Παλετας Χρωματων αναλυει οποιαδηποτε μεταφορτωμενη εικόνα για να εντοπισει και να εξαγαγει τα πιο οπτικα σημαντικα χρώματα της. Χρησιμοποιει τον αλγοριθμο κβαντοποιησης χρώματος 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 μοιρων.
Πώς να Χρησιμοποιήσετε
- Ανεβάστε μια εικόνα σύροντας ή κάνοντας κλικ. Λειτουργεί με φωτογραφίες, λογότυπα ή screenshots.
- Επιλέξτε πόσα χρώματα (5-15) και τη μορφή σας (HEX, RGB ή HSL).
- Κάντε κλικ σε οποιοδήποτε δείγμα για αντιγραφή. Εξαγωγή ως CSS, JSON ή PNG.
Μεθοδολογία
Αυτο το εργαλείο προσφέρει δυο αλγοριθμους εξαγωγής χρώματος. Η ομαδοποιηση 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 ωστε να διατηρηστε μια ενιαια πηγη αληθειας για τις τιμές χρώματων σας.
Πηγές
Όλοι οι υπολογισμοί γίνονται τοπικά στο πρόγραμμα περιήγησής σας. Δεν αποστέλλονται δεδομένα σε κανέναν διακομιστή.
Ενσωμάτωση εργαλείου
Σας φάνηκε χρήσιμο αυτό το εργαλείο;
Θέλετε να μας πείτε περισσότερα;
0/500
Θέλετε να επικοινωνήσουμε μαζί σας;
Συχνές ερωτήσεις
Πώς λειτουργεί η εξαγωγή;
Αλγόριθμοι κβαντοποίησης αναλύουν 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 και το όνομα κάθε χρώματος.