Επιλογέας χρώματος
Επιλέξτε οποιοδήποτε χρώμα από μια εικόνα και δείτε άμεσα κωδικούς HEX, RGB, HSL, HSV και CMYK.
Ανεβάστε μια εικόνα για να επιλέξετε χρώμα
Σύρετε & αφήστε, επικολλήστε ή αναζητήστε — PNG, JPG, WEBP ή GIF
Συμβουλή: μπορείτε επίσης να επικολλήσετε μια εικόνα με Ctrl/Cmd + V
Κωδικοί χρωμάτων
Πλησιέστερο όνομα χρώματος: Royal Blue
Αρμονίες χρωμάτων
Έλεγχος αντίθεσης (WCAG)
Δείγμα κειμένου
Αποθηκευμένα χρώματα
Δεν υπάρχουν αποθηκευμένα χρώματα ακόμη — επιλέξτε ένα και πατήστε «Αποθήκευση χρώματος».
Ένας επιλογέας χρώματος (color picker) είναι ένα εργαλείο που σας επιτρέπει να «τραβήξετε» το ακριβές χρώμα από οποιοδήποτε σημείο μιας εικόνας και να πάρετε αμέσως τον αντίστοιχο κωδικό του. Είναι απαραίτητο για σχεδιαστές ιστοσελίδων που θέλουν να αντιγράψουν μια απόχρωση από ένα λογότυπο ή φωτογραφία, για προγραμματιστές front-end που χρειάζονται σωστές τιμές HEX ή RGB για το CSS τους, για επαγγελματίες εκτύπωσης και branding που δουλεύουν με CMYK, καθώς και για όποιον θέλει να ελέγξει αν ένα χρωματικό ζευγάρι πληροί τα κριτήρια προσβασιμότητας.
Το εργαλείο είναι εντελώς δωρεάν και τρέχει τοπικά μέσα στο πρόγραμμα περιήγησής σας — καμία εικόνα δεν ανεβαίνει σε server, οπότε τα δεδομένα σας παραμένουν ιδιωτικά. Ανεβάστε μια φωτογραφία ή ένα στιγμιότυπο οθόνης και δείτε ταυτόχρονα τους κωδικούς HEX, RGB, HSL, HSV και CMYK, εξαγάγετε μια πλήρη παλέτα χρωμάτων από την εικόνα, δημιουργήστε αρμονικούς συνδυασμούς χρωμάτων και ελέγξτε την αντίθεση κατά WCAG πριν χρησιμοποιήσετε τα χρώματα σε ένα πραγματικό project.
Πώς να επιλέξετε ένα χρώμα από μια εικόνα
- 1
Ανεβάστε ή σύρετε μια εικόνα
Σύρετε ένα αρχείο PNG, JPG, WEBP ή GIF μέσα στην περιοχή φόρτωσης, επικολλήστε το με Ctrl/Cmd + V ή επικολλήστε μια διεύθυνση URL εικόνας.
- 2
Κάντε κλικ με το σταγονόμετρο σε ένα εικονοστοιχείο
Μόλις φορτωθεί η εικόνα, μετακινήστε τον δείκτη πάνω από το επιθυμητό σημείο και κάντε κλικ για να δειγματοληπτήσετε ακριβώς εκείνο το pixel.
- 3
Διαβάστε και αντιγράψτε τους κωδικούς χρώματος
Στο πλαίσιο αποτελεσμάτων εμφανίζονται αμέσως οι τιμές HEX, RGB, HSL, HSV και CMYK — πατήστε «Αντιγραφή» δίπλα σε όποια χρειάζεστε.
- 4
Εξαγάγετε μια παλέτα από την εικόνα
Χρησιμοποιήστε την εξαγωγή παλέτας για να πάρετε αυτόματα τα κυρίαρχα χρώματα της εικόνας ως έτοιμα δείγματα προς χρήση.
- 5
Δημιουργήστε αρμονίες χρωμάτων
Από το επιλεγμένο χρώμα, δείτε προτεινόμενους συνδυασμούς — συμπληρωματικά, ανάλογα, τριαδικά, τετραδικά ή μονοχρωματικά.
- 6
Ελέγξτε την αντίθεση WCAG και αποθηκεύστε την παλέτα
Συγκρίνετε κείμενο και φόντο στον ελεγκτή αντίθεσης για να επιβεβαιώσετε συμμόρφωση με τα πρότυπα προσβασιμότητας, έπειτα αποθηκεύστε ή εξαγάγετε την παλέτα σας ως CSS, JSON ή PNG.
HEX, RGB, HSL, HSV και CMYK επεξηγούνται
Το ίδιο ακριβώς χρώμα μπορεί να γραφτεί με πέντε διαφορετικούς τρόπους, ανάλογα με το πού πρόκειται να χρησιμοποιηθεί — ιστοσελίδα, οθόνη σχεδίασης ή εκτύπωση.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Ιστοσελίδες και κώδικα CSS |
| RGB | rgb(59, 130, 246) | Οθόνες και ψηφιακή απεικόνιση |
| HSL | hsl(217, 91%, 60%) | Διαισθητική προσαρμογή απόχρωσης, κορεσμού και φωτεινότητας |
| HSV | hsv(217, 76%, 96%) | Εργαλεία σχεδίασης και επιλογείς χρώματος |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Επαγγελματική εκτύπωση |
Σχεδίαση ιστού και διεπαφών (UI)
Πάρτε την ακριβή απόχρωση από ένα mockup, ένα screenshot ή μια φωτογραφία αναφοράς και χρησιμοποιήστε την άμεσα στο design system σας, διατηρώντας συνέπεια σε όλη την εφαρμογή ή τον ιστότοπο.
Ανάπτυξη front-end
Αντιγράψτε τον κωδικό HEX ή RGB και προσθέστε τον απευθείας ως μεταβλητή CSS (custom property), ώστε να διατηρείτε ένα καθαρό και επαναχρησιμοποιήσιμο χρωματικό σύστημα στον κώδικά σας.
Εκτύπωση και branding
Για φυλλάδια, επαγγελματικές κάρτες ή συσκευασίες, δείτε την τιμή CMYK του χρώματός σας ώστε το αποτέλεσμα στο τυπογραφείο να ταιριάζει με αυτό που βλέπετε στην οθόνη.
Προσβασιμότητα και αντίθεση WCAG
Ελέγξτε τον λόγο αντίθεσης ανάμεσα σε κείμενο και φόντο για να βεβαιωθείτε ότι πληροί τα επίπεδα AA ή AAA των κατευθυντήριων γραμμών WCAG, πριν δημοσιεύσετε το περιεχόμενό σας.
Η σύγκριση
Δείτε πώς συγκρίνεται ο επιλογέας χρώματος της i24 με το δημοφιλές imagecolorpicker.com.
| Μοντέλα χρώματος | HEX, RGB, HSL, HSV και CMYK ταυτόχρονα | Κυρίως HEX και RGB |
| CMYK για εκτύπωση | Ναι, υπολογίζεται αυτόματα | Δεν προσφέρεται |
| Έλεγχος αντίθεσης WCAG | Ενσωματωμένος ελεγκτής AA/AAA | Δεν υπάρχει |
| Αρμονίες χρωμάτων | Συμπληρωματικά, ανάλογα, τριαδικά, τετραδικά και μονοχρωματικά | Δεν προσφέρεται |
| Διαφημίσεις | Καθαρή εμπειρία χωρίς διαφημίσεις | Πολλές διαφημίσεις τρίτων |
Συχνές ερωτήσεις
Πώς επιλέγω ένα χρώμα από μια εικόνα;
Ανεβάστε την εικόνα σας στο εργαλείο, κάντε κλικ με το σταγονόμετρο πάνω στο σημείο που σας ενδιαφέρει και οι κωδικοί HEX, RGB, HSL, HSV και CMYK εμφανίζονται αμέσως, έτοιμοι για αντιγραφή.
Τι είναι ένας κωδικός χρώματος HEX;
Ο κωδικός HEX είναι μια δεκαεξαδική αναπαράσταση ενός χρώματος με τη μορφή #RRGGBB, όπου κάθε ζεύγος χαρακτήρων αντιστοιχεί στην ένταση του κόκκινου, πράσινου και μπλε. Χρησιμοποιείται ευρέως σε HTML και CSS.
Πώς μετατρέπω RGB σε HEX;
Απλώς επιλέξτε το χρώμα με το σταγονόμετρο ή εισαγάγετέ το χειροκίνητα — το εργαλείο υπολογίζει αυτόματα την αντίστοιχη τιμή HEX μαζί με τις τιμές HSL, HSV και CMYK, χωρίς να χρειάζεται να κάνετε τον υπολογισμό μόνοι σας.
Μπορώ να δημιουργήσω μια παλέτα χρωμάτων από μια φωτογραφία;
Ναι. Χρησιμοποιήστε τη λειτουργία εξαγωγής παλέτας για να εξάγετε αυτόματα τα κυρίαρχα χρώματα μιας εικόνας και αποθηκεύστε τα δείγματα που σας ενδιαφέρουν για μελλοντική χρήση.
Πώς ελέγχω την αντίθεση χρωμάτων για προσβασιμότητα;
Επιλέξτε ένα χρώμα κειμένου και ένα χρώμα φόντου στον ενσωματωμένο ελεγκτή αντίθεσης· το εργαλείο υπολογίζει τον λόγο αντίθεσης και σας δείχνει αν πληροί τα κριτήρια AA ή AAA των προτύπων WCAG.
Είναι το εργαλείο δωρεάν και ασφαλές για τα δεδομένα μου;
Ναι, η χρήση είναι εντελώς δωρεάν χωρίς εγγραφή. Η επεξεργασία της εικόνας γίνεται τοπικά μέσα στο πρόγραμμα περιήγησής σας, οπότε καμία φωτογραφία δεν αποστέλλεται ή αποθηκεύεται σε server.
