Γιατί προσθέσαμε αυτόματη εξαγωγή παλέτας στο color picker

Το color picker μας σάς επέτρεπε πάντα να ανεβάσετε μια εικόνα και να κάνετε κλικ σε οποιοδήποτε pixel για την ακριβή του τιμή HEX, RGB και HSL. Αυτό απαντά στο «τι χρώμα έχει αυτό το συγκεκριμένο σημείο;» — χρήσιμο, αλλά όχι η ερώτηση που έχουν συνήθως οι περισσότεροι όταν ανεβάζουν μια φωτογραφία. Συνήθως είναι «ποιο είναι το συνολικό χρωματικό σχήμα αυτής της εικόνας;» — να τραβήξουν μια παλέτα brand από ένα λογότυπο, ή να ταιριάξουν τη διάθεση μιας φωτογραφίας αναφοράς με το χρωματικό σχήμα ενός ιστότοπου.

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

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

Δεν εμπλέκεται κανένα μοντέλο AI και δεν ανεβαίνει τίποτα πουθενά — είναι ένας απλός αλγόριθμος καταμέτρησης συχνοτήτων που τρέχει σε λίγα χιλιοστά του δευτερολέπτου:

1. Η εικόνα υποδειγματοληπτείται σε έναν καμβά 80×80. Η πλήρης ανάλυση δεν χρειάζεται για χρωματικά στατιστικά, και η υποδειγματοληψία κρατά τη διαδικασία ακαριαία ακόμη και για μεγάλες φωτογραφίες.
2. Κάθε pixel τοποθετείται σε «κάδο» με βάση μια χονδροποιημένη εκδοχή του χρώματός του — τα 5 πιο σημαντικά bits κάθε καναλιού RGB, ώστε pixels που είναι οπτικά σχεδόν πανομοιότυπα να καταλήγουν στον ίδιο κάδο αντί να μετράει το καθένα ως μοναδικό χρώμα.
3. Οι κάδοι ταξινομούνται με βάση το πόσα pixels έπεσαν σε καθέναν, και οι οκτώ μεγαλύτεροι γίνονται η παλέτα, με τον καθένα να εμφανίζεται ως το μέσο χρώμα όλων όσων περιέχει.

Αυτό είναι όλο. Χωρίς machine learning, χωρίς εξωτερική υπηρεσία — απλώς υποδειγματοληψία και καταμέτρηση, γι’ αυτό είναι ακαριαίο και δεν φεύγει ποτέ από τον browser σας.

Κλικ σε ένα δείγμα, πάρτε τον κωδικό

Κάθε δείγμα της παλέτας είναι κλικαμπλ: κάντε κλικ σε ένα και γίνεται το ενεργό χρώμα του εργαλείου, με τα HEX, RGB και HSL να συμπληρώνονται αυτόματα και το hex να αντιγράφεται στο πρόχειρο με το ίδιο κλικ. Υπάρχει και κουμπί «copy all» αν θέλετε ολόκληρη την παλέτα ως λίστα χωρισμένη με κόμματα, χρήσιμο για επικόλληση απευθείας σε ένα εργαλείο σχεδίασης ή σε ένα μπλοκ CSS custom properties.

Δοκιμάστε το

Ανεβάστε οποιαδήποτε εικόνα — ένα στιγμιότυπο οθόνης, ένα λογότυπο, μια φωτογραφία — στη σελίδα του color picker και η παλέτα εμφανίζεται αυτόματα από κάτω.