Color Picker

Διαλέξτε χρώματα και δουλέψτε χωρίς περιττά βήματα

Φτιάξαμε το Color Picker το 2025 γιατί κουραστήκαμε από βαριές εφαρμογές και περίπλοκα εργαλεία χρωμάτων. Ως frontend developers και εικονογράφοι, χρειαζόμασταν κάτι για να «αρπάξουμε» ένα χρώμα, να το φέρουμε στα μέτρα μας και να συνεχίσουμε. Ξεκίνησε ως εσωτερικό εργαλείο, έγινε αγαπητό στους συναδέλφους, και το γυαλίσαμε για να το διαθέσουμε στο διαδίκτυο. Χωρίς λογαριασμούς, χωρίς καμπύλη εκμάθησης — απλώς ανοίξτε τη σελίδα, επιλέξτε απόχρωση και αντιγράψτε κωδικούς HEX, RGB, HSL ή HSV.

Γιατί αρέσει ο Color Picker;

Αν έχετε κοιτάξει ποτέ έναν σχεδιασμό και αναρωτηθήκατε πώς θα πετύχετε την ακριβή απόχρωση, θα εκτιμήσετε την απλότητα του Color Picker. Κρατήσαμε εσκεμμένα το περιβάλλον ελάχιστο:

• Κλικ και έχεις το χρώμα – αγγίξτε οπουδήποτε στην παλέτα και το εργαλείο εμφανίζει αμέσως τις τιμές που χρειάζεστε. Θέλετε δείγμα από φωτογραφία ή στιγμιότυπο; Σύρετέ το στη σελίδα και χρησιμοποιήστε το σταγονόμετρο.
• Οι διαβαθμίσεις έγιναν εύκολες – δημιουργήστε μεταξένιες μεταβάσεις προσθέτοντας και μετακινώντας σημεία στη μπάρα. Εναλλάξτε γραμμικό/ακτινικό, ρυθμίστε γωνία και διαφάνεια και αντιγράψτε το CSS.
• Χωρίς περιορισμούς, χωρίς κόστος – ο Color Picker τρέχει σε κάθε σύγχρονο browser σε desktop, tablet ή κινητό. Τίποτα για εγκατάσταση και χωρίς χρέωση.
• Επεκτάσεις όταν χρειάζονται – οι προαιρετικές επεκτάσεις για Chrome και Edge φέρνουν το σταγονόμετρο απευθείας στον browser, ώστε να παίρνετε χρώματα από κάθε σελίδα και να κρατάτε το ιστορικό σας.

Σε τι χρησιμεύει

Οι άνθρωποι χρησιμοποιούν το Color Picker με πολλούς τρόπους:

• Σχεδιαστές και ομάδες προϊόντων το χρησιμοποιούν όταν σκιτσάρουν διεπαφές ή παλέτες brand. Είναι γρήγορο να εξερευνάς συνδυασμούς και να αντιγράφεις το απαιτούμενο CSS για διαβαθμίσεις.
• Εικονογράφοι και καλλιτέχνες χρησιμοποιούν το σταγονόμετρο για έμπνευση από φωτογραφίες και πίνακες. Το εργαλείο διαβαθμίσεων βοηθά στον σχεδιασμό απαλής σκίασης και μεταβάσεων.
• Frontend προγραμματιστές βασίζονται σε αυτό για συνεπείς τιμές χρώματος σε πολλά έργα. Η επέκταση κάνει το sampling από υπάρχοντες ιστότοπους πανεύκολο.
• Όσοι ελέγχουν προσβασιμότητα μπορούν να προβάλλουν τα χρώματα σε διαφορετικά μοντέλα και να ρυθμίζουν τη διαφάνεια μέχρι να ικανοποιούνται οι οδηγίες αντίθεσης.

Ξεκινώντας

Δεν χρειάζεστε εγχειρίδιο, αλλά ιδού μια σύντομη επισκόπηση:

• Επιλέξτε χρώμα – κάντε κλικ οπουδήποτε στην παλέτα. Θα δείτε άμεσα τιμές HEX, RGB και HSV. Ρυθμίστε απόχρωση, κορεσμό, φωτεινότητα και διαφάνεια με τα sliders.
• Δείγμα από εικόνα – σύρετε ένα αρχείο εικόνας στη σελίδα ή επιλέξτε ένα. Κάντε κλικ στο επιθυμητό pixel και θα εμφανιστούν οι κωδικοί.
• Φτιάξτε διαβάθμιση – κάντε κλικ στη μπάρα διαβάθμισης για να προσθέσετε σημεία και μετακινήστε τα· εναλλάξτε μεταξύ γραμμικού και ακτινικού στυλ. Ρυθμίστε γωνία και διαφάνεια μέχρι να πετύχετε το αποτέλεσμα.
• Αντιγραφή και επαναχρησιμοποίηση – τα χρώματα και οι διαβαθμίσεις σας αποθηκεύονται αυτόματα. Αντιγράψτε κωδικούς ή CSS και επικολλήστε τα στο έργο σας ή μοιραστείτε τα με την ομάδα.