CodeKitHubΤι είναι αυτό το εργαλείο;
Ένας επιλογέας χρώματος μετατρέπει μια οπτική επιλογή — αυτή η απόχρωση του μπλε, εκείνο το ακριβές pixel σε ένα λογότυπο — σε αριθμητικούς κωδικούς που κατανοεί το λογισμικό. Το ίδιο χρώμα έχει αρκετές ισοδύναμες σημειογραφίες: το HEX (#3b82f6) κυριαρχεί στο CSS και τις παραδόσεις σχεδίασης, το RGB (59, 130, 246) ταιριάζει με τον τρόπο που οι οθόνες και ο κώδικας αναπαριστούν το χρώμα, και το HSL (217°, 91%, 60%) περιγράφει απόχρωση, κορεσμό και φωτεινότητα με τρόπο που μπορεί να συλλογιστεί ο άνθρωπος.
Το δεύτερο μισό του εργαλείου είναι ένα σταλαγματόμετρο εικόνας. Ανεβάστε ένα στιγμιότυπο οθόνης, λογότυπο ή φωτογραφία και κάντε κλικ σε οποιοδήποτε σημείο για να δειγματίσετε το χρώμα κάτω από τον δρομέα — ο τυπικός τρόπος να απαντήσετε στο "ποιο ακριβώς χρώμα είναι αυτό;". Όπου ο περιηγητής υποστηρίζει το EyeDropper API χρησιμοποιείται ο εγγενής μεγεθυντικός φακός· σε άλλους περιηγητές το εργαλείο διαβάζει την τιμή του pixel από ένα αντίγραφο canvas της εικόνας. Και στις δύο περιπτώσεις η επεξεργασία είναι τοπική: η εικόνα δεν ανεβαίνει ποτέ.
Γιατί να το χρησιμοποιήσετε;
- Τρεις μορφές ταυτόχρονα: κάθε επιλεγμένο χρώμα εμφανίζεται ως HEX, RGB και HSL ταυτόχρονα, καθεμία με κουμπί αντιγραφής ενός κλικ — χωρίς ξεχωριστό βήμα μετατροπής.
- Επιλογή από εικόνα: ανεβάστε οποιαδήποτε φωτογραφία και κάντε κλικ για να δειγματίσετε το ακριβές χρώμα του pixel — ιδανικό για εξαγωγή χρωμάτων επωνυμίας από λογότυπο ή αντιστοίχιση χρώματος που είδατε σε στιγμιότυπο οθόνης.
- Χρησιμοποιεί τον εγγενή EyeDropper του περιηγητή με μεγεθυντικό φακό όταν είναι διαθέσιμος, και επιστρέφει σε ακριβή ανάγνωση pixel canvas παντού αλλού.
- Ένα δείγμα ζωντανής προεπισκόπησης δείχνει το τρέχον χρώμα με μια ματιά, ώστε να επαληθεύσετε την επιλογή πριν αντιγράψετε.
- Δωρεάν, άμεσο και πλήρως τοπικό: τα χρώματα υπολογίζονται και οι εικόνες διαβάζονται στον περιηγητή σας — τίποτα δεν ανεβαίνει, αποθηκεύεται ή καταγράφεται.
Πώς χρησιμοποιείται
- Επιλέξτε ένα χρώμα με το πεδίο χρώματος, ή επικολλήστε/επεξεργαστείτε μια τιμή απευθείας.
- Για δειγματοληψία από εικόνα, ανεβάστε μια εικόνα και κάντε κλικ στο σημείο του οποίου το χρώμα θέλετε.
- Διαβάστε τις τιμές HEX, RGB και HSL, που εμφανίζονται μαζί με ένα δείγμα ζωντανής προεπισκόπησης.
- Κάντε κλικ στο κουμπί αντιγραφής δίπλα στη μορφή που χρειάζεστε — HEX για CSS, RGB ή HSL για κώδικα.
Παράδειγμα
Είσοδος
Κλικ στην μπλε περιοχή ενός ανεβασμένου λογότυπουΈξοδος
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Και οι τρεις γραμμές περιγράφουν το ίδιο ακριβώς χρώμα. Χρησιμοποιήστε HEX σε φύλλα στυλ και εργαλεία σχεδίασης, RGB όπου ο κώδικας περιμένει τιμές καναλιών, και HSL όταν θέλετε να παράγετε πιο ανοιχτόχρωμες ή πιο σκούρες παραλλαγές αλλάζοντας μόνο τον τελευταίο αριθμό.
Ποια μορφή χρώματος για ποια δουλειά
Το σύγχρονο CSS δέχεται και τα τρία παντού όπου επιτρέπεται ένα χρώμα, οπότε η επιλογή αφορά τη ροή εργασίας, όχι τη συμβατότητα. Οι ομάδες συνήθως τυποποιούν σε HEX για tokens σχεδίασης, και μετά χρησιμοποιούν HSL κατά την εξερεύνηση παραλλαγών — αλλάξτε τη φωτεινότητα κατά 10–15 μονάδες για μια χρησιμοποιήσιμη κατάσταση hover χωρίς να μετατοπίσετε την απόχρωση.
| Μορφή | Παράδειγμα | Καλύτερη για |
|---|---|---|
| HEX | #3b82f6 | CSS, εργαλεία σχεδίασης, μοίρασμα χρωμάτων σε συνομιλίες και προδιαγραφές |
| RGB | rgb(59, 130, 246) | Κώδικας που χειρίζεται κανάλια, σχέδιο canvas, διαφάνεια rgba() |
| HSL | hsl(217, 91%, 60%) | Δημιουργία πιο ανοιχτών/πιο σκούρων/hover παραλλαγών, χτίσιμο παλετών |
Από επιλεγμένο χρώμα σε έτοιμο CSS
Η δειγματοληψία ενός χρώματος είναι συνήθως το πρώτο βήμα μιας εργασίας στυλ. Αν χρειάζεστε το ίδιο χρώμα σε άλλες σημειογραφίες — CMYK για εκτύπωση ή τιμή OKLCH για CSS ευρέος φάσματος — ο Μετατροπέας Χρωμάτων συνεχίζει από εκεί που σταματάει αυτός ο επιλογέας.
Το επιλεγμένο χρώμα συχνά πηγαίνει κατευθείαν σε ένα οπτικό εφέ: η Γεννήτρια Box Shadow παίρνει μια τιμή HEX για ρεαλιστικές σκιές, και στρογγυλεμένες κάρτες χτισμένες με τη Γεννήτρια Border Radius ολοκληρώνουν την εμφάνιση.
→ Μετατροπέας Χρωμάτων · Δημιουργός Box Shadow · Δημιουργός Border Radius
Συχνές ερωτήσεις
Ποια είναι η διαφορά μεταξύ HEX, RGB και HSL;
Είναι τρεις σημειογραφίες για το ίδιο μοντέλο χρώματος. Το HEX συσκευάζει τα κανάλια κόκκινο, πράσινο και μπλε σε έξι δεκαεξαδικά ψηφία (#3b82f6) και είναι η πιο συνηθισμένη μορφή σε CSS και εργαλεία σχεδίασης. Το RGB απαριθμεί τα ίδια τρία κανάλια ως δεκαδικούς αριθμούς από 0 έως 255. Το HSL επανεκφράζει το χρώμα ως απόχρωση (0–360°), κορεσμό και φωτεινότητα — πολύ πιο διαισθητικό όταν θέλετε "το ίδιο χρώμα, απλώς πιο ανοιχτό". Η μετατροπή μεταξύ τους δεν αλλάζει ποτέ το χρώμα.
Πώς λειτουργεί η επιλογή χρώματος από εικόνα;
Η ανεβασμένη εικόνα σχεδιάζεται σε αόρατο canvas στον περιηγητή σας. Όταν κάνετε κλικ, το εργαλείο διαβάζει τις τιμές κόκκινο, πράσινο και μπλε του pixel σε αυτή την ακριβή θέση και τις μετατρέπει σε HEX, RGB και HSL. Σε περιηγητές που υποστηρίζουν το EyeDropper API (Chrome και Edge σε desktop), ανοίγει αντ' αυτού ένας εγγενής μεγεθυντικός φακός ώστε να επιλέξετε με ακρίβεια pixel οπουδήποτε στην οθόνη.
Ανεβαίνει η εικόνα μου κάπου;
Όχι. Η εικόνα ανοίγει απευθείας από τον περιηγητή σας και διαβάζεται τοπικά από canvas· κανένα αρχείο και κανένα δεδομένο χρώματος δεν μεταδίδεται ή αποθηκεύεται ποτέ. Μπορείτε να φορτώσετε τη σελίδα, να αποσυνδεθείτε από το ίντερνετ, και τόσο ο επιλογέας όσο και το σταλαγματόμετρο εικόνας συνεχίζουν να λειτουργούν — κάτι που το κάνει ασφαλές για αδημοσίευτα σχέδια και εσωτερικά στιγμιότυπα οθόνης.
Γιατί το επιλεγμένο χρώμα δεν ταιριάζει ακριβώς με αυτό που βλέπω στην οθόνη;
Δύο συνήθεις λόγοι. Anti-aliasing: τα pixel στις άκρες κειμένου και σχημάτων αναμειγνύονται με το φόντο, οπότε κάνοντας κλικ ένα pixel πιο πέρα δίνει ένα ενδιάμεσο χρώμα — δειγματίστε από το συμπαγές κέντρο μιας περιοχής αντ' αυτού. Διαχείριση χρώματος: αρχεία JPG/PNG με ασυνήθιστα προφίλ χρώματος μπορεί να αποδίδονται ελαφρώς διαφορετικά σε διαφορετικές οθόνες· το εργαλείο αναφέρει την τιμή του pixel όπως είναι αποθηκευμένη στο αρχείο, που είναι η τιμή που θέλετε για σχεδιαστική εργασία.
Ποια μορφή πρέπει να αντιγράψω για CSS;
Το HEX είναι η ασφαλέστερη προεπιλογή — κάθε περιηγητής και εργαλείο το δέχεται. Χρησιμοποιήστε HSL όταν σχεδιάζετε να δημιουργήσετε παραλλαγές hover ή σκοτεινού θέματος, επειδή η προσαρμογή μόνο του συστατικού φωτεινότητας διατηρεί την απόχρωση και τον κορεσμό σταθερά. Το RGB είναι κυρίως χρήσιμο όταν ο κώδικας χτίζει χρώματα από αριθμητικά κανάλια, ή όταν προσθέτετε διαφάνεια, όπου το rgba(59, 130, 246, 0.5) διαβάζεται πιο καθαρά από ένα οκταψήφιο HEX.