Μετάβαση στο κύριο περιεχόμενο
LibraTool logoLibraTool

Εξαγωγέας Χρωματικής Παλέτας Εικόνας δωρεάν

Εξαγάγετε τα κυρίαρχα χρώματα από οποιαδήποτε εικόνα χρησιμοποιώντας κβαντισμό χρωμάτων k-means. Λάβετε κωδικούς hex για τα κορυφαία 2-16 χρώματα της φωτογραφίας ή λογοτύπου σας.

Λειτουργεί εκτός σύνδεσης μόλις φορτωθεί

Αφήστε ένα αρχείο εδώ ή κάντε κλικ για αναζήτηση

JPG, PNG, WebP, GIF, HEIC, HEIF · επεξεργάζεται στη συσκευή σας

ή πατήστε Ctrl+V για επικόλληση από το πρόχειρο

Αναζήτηση αρχείων

Συμβουλή: μπορείτε να επικολλήσετε στιγμιότυπο οθόνης με Ctrl+V

Τα αρχεία σας δεν εγκαταλείπουν ποτέ τη συσκευή σας. Όλη η επεξεργασία γίνεται τοπικά στο πρόγραμμα περιήγησής σας.

Συνηθισμένες χρήσεις

  • Εξαγάγετε χρώματα μάρκας από ένα λογότυποΛάβετε τους ακριβείς κωδικούς hex για τα κυρίαρχα χρώματα σε οποιοδήποτε λογότυπο ή εικόνα μάρκας.
  • Δημιουργήστε χρωματικές παλέτες ιστού από φωτογραφίεςΔημιουργήστε χρωματικές παλέτες ιστοσελίδας που ταιριάζουν με φωτογραφίες ήρωα ή εικόνες φόντου.
  • Εξαγάγετε χρώματα από φωτογραφίες έμπνευσηςΕξαγάγετε χρωματικές παλέτες από εσωτερικές ή μοδάτες φωτογραφίες για χρήση στα δικά σας έργα.
  • Αναλύστε ζωγραφίες και παλέτες τέχνηςΜελετήστε τις χρωματικές παλέτες διάσημων ζωγραφιών ή το δικό σας έργο εξάγοντας τα κυρίαρχα χρώματα.
  • Θέμα CSS από εικόνεςΔημιουργήστε CSS θέματα μεταβλητών από εικόνες — χρήσιμο για δυναμικά θέματα ή αυτόματα παραγόμενα χρωματικά σχήματα.

Πώς λειτουργεί

Η εξαγωγή χρωμάτων εκτελείται εξ ολοκλήρου στον browser σας με χειρόγραφο αλγόριθμο ομαδοποίησης k-means++ πάνω σε ακατέργαστα δεδομένα pixels από το Canvas API — χωρίς διακομιστή ή βιβλιοθήκη τρίτων. Η ίδια εικόνα και οι ίδιες ρυθμίσεις πλήθους χρωμάτων δίνουν πάντα την ίδια παλέτα, επειδή ο αλγόριθμος χρησιμοποιεί ντετερμινιστική γεννήτρια ψευδοτυχαίων αριθμών (mulberry32) αντί για Math.random.

  1. 1
    Το Canvas διαβάζει τα δεδομένα pixels
    Η εικόνα σχεδιάζεται σε στοιχείο HTML Canvas εκτός οθόνης και σμικρύνεται σε έως 200px στη μεγαλύτερη πλευρά. Το getImageData() του Canvas API επιστρέφει κάθε pixel ως ακατέργαστα bytes RGBA και τα πλήρως διαφανή pixels (alpha < 128) απορρίπτονται πριν ξεκινήσει η ομαδοποίηση.
  2. 2
    Το k-means++ ομαδοποιεί τα pixels
    Ένας αρχικοποιητής k-means++ ορίζει ντετερμινιστικά τα κέντρα και έπειτα ο αλγόριθμος επαναλαμβάνεται έως 20 φορές: κάθε pixel αντιστοιχίζεται στο πλησιέστερο κέντρο στον χώρο RGB και τα κέντρα υπολογίζονται ξανά ως ο μέσος όρος των pixels τους. Οι ομάδες που καταλήγουν στην ίδια τιμή hex συγχωνεύονται, ώστε κάθε δείγμα του αποτελέσματος να είναι μοναδικό.
  3. 3
    Υπολογισμός μεταδεδομένων ανά χρώμα
    Κάθε κέντρο μετατρέπεται σε HEX, HSL και στο ποσοστό του επί του συνόλου των pixels. Η σχετική φωτεινότητα WCAG υπολογίζεται με τον τυπικό τύπο και οι λόγοι αντίθεσης έναντι μαύρου και λευκού εμφανίζονται δίπλα σε κάθε δείγμα.
  4. 4
    Εξαγωγή και έξοδος σταγονόμετρου
    Η παλέτα μπορεί να αντιγραφεί ως CSS custom properties, μεταβλητές SCSS, απόσπασμα ρυθμίσεων Tailwind ή JSON. Ένα σταγονόμετρο με κλικ αντιστοιχίζει το κλικ σας στην προεπισκόπηση στις ακριβείς συντεταγμένες του pixel πηγής σε canvas πλήρους ανάλυσης, προσθέτοντας το χρώμα του σε ξεχωριστή λίστα επιλεγμένων χρωμάτων. Μια λωρίδα παλέτας PNG μπορεί να ληφθεί μέσω Canvas toBlob().

Η εικόνα σας δεν μεταφορτώνεται ποτέ — αποκωδικοποιείται και επεξεργάζεται εξ ολοκλήρου στη μνήμη του browser σας, και μόνο το μέγεθος του αρχείου (σε KB) αναφέρεται στα analytics.

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

🎨

Γεννήτρια τυχαίων χρωμάτων

Δημιουργήστε τυχαία χρώματα ένα-ένα ή ως παλέτα πέντε χρωμάτων, κλειδώστε όσα σας αρέσουν, αντιγράψτε τιμές HEX, RGB ή HSL και εξαγάγετε την παλέτα ως PNG ή CSS.

Δοκιμάστε το
🎨

Γεννήτρια Χρωματικής Παλέτας

Δημιουργήστε συμπληρωματικές, ανάλογες, τριαδικές και μονοχρωματικές χρωματικές παλέτες από οποιοδήποτε βασικό χρώμα. Αντιγράψτε κωδικούς hex με ένα κλικ.

Δοκιμάστε το
🎨

Επιλογέας χρωμάτων και γεννήτρια παλέτας

Επιλέξτε χρώματα, μετατρέψτε μεταξύ HEX/RGB/HSL και δημιουργήστε αρμονικές παλέτες.

Δοκιμάστε το

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