Πώς να βρείτε το ακριβές χρώμα από εικόνα: HEX, RGB και HSL

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

Επιλογέας χρώματος από εικόναΘέλω τον ακριβή κωδικό χρώματοςΚάντε το δωρεάν

Τι αποθηκεύει ένα pixel

Κάθε pixel είναι ένα μικροσκοπικό τετράγωνο χρώματος. Σε οθόνη ή σε αρχείο εικόνας αποθηκεύεται ως τρεις αριθμοί, για το κόκκινο, το πράσινο και το μπλε, με τιμές από 0 έως 255. Καθαρό κόκκινο είναι το 255, 0, 0. Και οι τρεις αριθμοί μεταφέρουν την ίδια πληροφορία σε κάθε μορφή, άρα ένα χρώμα μπορεί να γραφτεί με διαφορετικούς τρόπους.

HEX, RGB και HSL

• HEX γράφει κάθε αριθμό σε δεκαεξαδικό, με δύο χαρακτήρες για κάθε κανάλι. Το #FF0000 είναι καθαρό κόκκινο. Το χρησιμοποιούν οι ιστοσελίδες, το CSS και τα περισσότερα εργαλεία σχεδιασμού.
• RGB γράφει τους ίδιους αριθμούς σε δεκαδική μορφή, ως rgb(255, 0, 0). Είναι το ίδιο χρώμα με τον κωδικό HEX.
• HSL περιγράφει το χρώμα με τον τρόπο που το λέμε συνήθως. Η απόχρωση είναι η γωνία στον χρωματικό κύκλο, ο κορεσμός είναι πόσο έντονο είναι το χρώμα και η φωτεινότητα είναι πόσο ανοιχτό ή σκούρο είναι. Το hsl(0, 100%, 50%) είναι καθαρό κόκκινο.

Χρησιμοποιήστε το HEX όταν επικολλάτε χρώμα σε κώδικα, το RGB όταν σας το ζητάει κάποιο εργαλείο και το HSL όταν θέλετε πιο ανοιχτή ή πιο σκούρα εκδοχή της ίδιας απόχρωσης. Αλλάζοντας μόνο τη φωτεινότητα στο HSL διατηρείτε την απόχρωση, κάτι που είναι δυσκολότερο με το HEX αν το κάνετε με το χέρι. Για έλεγχο αντίθεσης ανάμεσα σε δύο χρώματα, δείτε HEX, RGB, HSL, CMYK και αντίθεση.

Ακολουθεί ένα χρώμα που χρησιμοποιείται σε φύλλο στυλ:

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

Γιατί ο κωδικός μπορεί να μην ταιριάζει με την οθόνη

• Η εικόνα είναι συμπιεσμένη. Το JPEG εξοικονομεί χώρο λειαίνοντας τις λεπτομέρειες, οπότε τα pixel κοντά σε ακμή μπορεί να διαφέρουν ελαφρώς από το χρώμα που βλέπετε στο κέντρο μιας περιοχής.
• Οι ακμές γίνονται μίγμα. Εκεί όπου συναντιούνται δύο χρώματα, τα pixel ανάμεσά τους είναι μείγματα και δεν αποτελούν χρώμα από μόνα τους.
• Τα προφίλ χρώματος διαφέρουν. Ο επιλογέας διαβάζει τις τιμές που αποκωδικοποιεί το πρόγραμμα περιήγησης, δηλαδή σε sRGB. Μια φωτογραφία αποθηκευμένη με ευρύ προφίλ gamut μπορεί να φαίνεται διαφορετική σε άλλα προγράμματα.
• Η κλιμάκωση αναμειγνύει pixel. Ένα στιγμιότυπο που τραβήχτηκε σε κλιμακωμένο μέγεθος οθόνης μπορεί να έχει αναμεμειγμένα pixel. Όταν μπορείτε, τραβήξτε το στιγμιότυπο σε πλήρες μέγεθος.
• Οι πολύ μεγάλες εικόνες διαβάζονται από αντίγραφο. Οι εικόνες με πλευρά μεγαλύτερη από 6000 pixel διαβάζονται από αντίγραφο 6000 pixel, οπότε ένα μεμονωμένο pixel μπορεί να διαφέρει λίγο από το αρχείο πλήρους μεγέθους.

Επιλέξτε από το κέντρο μιας ομοιόμορφης περιοχής

Βρείτε μια περιοχή με ένα χρώμα και μετακινηθείτε στο κέντρο της. Ο μεγεθυντικός φακός δείχνει τα 11 επί 11 pixel γύρω από τον δείκτη, ώστε να βλέπετε αν το σημείο είναι μεικτό ή ομοιόμορφο. Με το πληκτρολόγιο, μετακινήστε το σταυρονήμα ένα pixel τη φορά με τα βέλη, ή δέκα τη φορά με το Shift, και πατήστε Enter για να επιλέξετε. Ελέγξτε την ένδειξη πριν την αντιγράψετε.

Χρησιμοποιήστε την παλέτα για ένα σχέδιο χρωμάτων

Μια φωτογραφία σπάνια έχει μόνο ένα χρώμα που σας ενδιαφέρει. Η παλέτα εμφανίζει έως έξι από τα κύρια χρώματά της. Λειτουργεί στρογγυλοποιώντας κάθε pixel σε 16 επίπεδα ανά κανάλι, μετρώντας τις ομάδες και κρατώντας τις πιο συχνές ομάδες που διαφέρουν μεταξύ τους. Κάθε δείγμα δείχνει τον μέσο όρο της ομάδας του. Πατήστε ένα δείγμα για να αντιγράψετε τον κωδικό HEX του. Αντιμετωπίστε την παλέτα ως αφετηρία, επειδή είναι μέσος όρος και όχι μετρημένο χρώμα μάρκας.

Μετατροπή ανάμεσα σε μορφές

Αν ένα εργαλείο σχεδιασμού ζητά άλλη μορφή, επικολλήστε τον κωδικό HEX σε έναν μετατροπέα χρωμάτων. Μετατρέπει ανάμεσα σε HEX, RGB και HSL χωρίς να αλλάζει το χρώμα, οπότε το αποτέλεσμα ταιριάζει με τον κωδικό που επιλέξατε.

Πρόσφατες επιλογές και απόρρητο

Το εργαλείο κρατά τις τελευταίες επιλογές σας στη σελίδα, ώστε να μπορείτε να τις συγκρίνετε. Υπάρχουν μόνο στη μνήμη αυτής της καρτέλας και εξαφανίζονται όταν την κλείσετε. Η ίδια η εικόνα διαβάζεται μέσα στο πρόγραμμα περιήγησής σας και δεν στέλνεται ποτέ σε διακομιστή.

Πώς να το κάνετε με το fixmint

1. Ανοίξτε τον επιλογέα χρώματος εικόνας και σύρετε μέσα τη φωτογραφία.
2. Περάστε τον δείκτη πάνω από το σημείο. Ή εστιάστε την εικόνα και χρησιμοποιήστε τα βέλη για να μετακινήσετε το σταυρονήμα ένα pixel τη φορά, κρατώντας πατημένο το Shift για δέκα pixel.
3. Κάντε κλικ ή πατήστε Enter για να επιλέξετε το χρώμα. Ελέγξτε την ένδειξη πριν την αντιγράψετε.
4. Χρησιμοποιήστε το κουμπί Αντιγραφή δίπλα στο HEX, RGB ή HSL για να αντιγράψετε την τιμή που χρειάζεστε.
5. Αν ένα εργαλείο σχεδιασμού ζητά άλλη μορφή, επικολλήστε την τιμή στον μετατροπέα χρωμάτων.

Σύντομες απαντήσεις

Γιατί το χρώμα φαίνεται διαφορετικό στην οθόνη μου; Η οθόνη σας εμφανίζει μια κλιμακωμένη έκδοση του αρχείου με διαχείριση χρώματος. Επιλέξτε από το κέντρο μιας ομοιόμορφης περιοχής και συγκρίνετε τον κωδικό HEX με ένα γνωστό δείγμα χρώματος.

Ποια μορφή να αντιγράψω; Το HEX για ιστοσελίδες και τα περισσότερα εργαλεία σχεδιασμού. Χρησιμοποιήστε το RGB ή το HSL όταν σας τα ζητάει κάποιο εργαλείο.

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