HEX και RGB: δύο τρόποι για να γράψετε το ίδιο χρώμα
Κάθε χρώμα που βλέπετε σε μια οθόνη αναμιγνύεται από τρία φώτα: κόκκινο, πράσινο και μπλε. Ανεβάστε και τα τρία στο μέγιστο και παίρνετε λευκό· σβήστε τα όλα και παίρνετε μαύρο. Τα HEX και RGB είναι απλώς δύο συμβολισμοί για να περιγράψετε πόσο φωτεινό πρέπει να είναι το καθένα από αυτά τα τρία κανάλια. Δείχνουν ακριβώς το ίδιο χρώμα, οπότε ένας καλός μετατροπέας απλώς μεταφράζει ανάμεσα στα δύο συστήματα γραφής χωρίς ποτέ να αλλάζει την πραγματική απόχρωση. Αυτό ακριβώς κάνει αυτό το εργαλείο, εξ ολοκλήρου στο πρόγραμμα περιήγησής σας, ενώ σας δείχνει ένα ζωντανό δείγμα ώστε να επιβεβαιώσετε το αποτέλεσμα με τα δικά σας μάτια.
Πώς να διαβάσετε έναν κωδικό hex
Ένα χρώμα hex μοιάζει με #1E90FF. Το σύμβολο δίεσης απλώς σηματοδοτεί την αρχή· οι έξι χαρακτήρες μετά από αυτό είναι τρία ζευγάρια, γραμμένα στο μοτίβο #RRGGBB. Το πρώτο ζευγάρι είναι το κόκκινο, το δεύτερο το πράσινο, το τρίτο το μπλε. Κάθε ζευγάρι είναι ένας αριθμός γραμμένος στο δεκαεξαδικό, δηλαδή στη βάση 16, όπου τα ψηφία τρέχουν 0-9 και μετά τα A, B, C, D, E, F αντιπροσωπεύουν το 10 έως το 15. Ένα ζευγάρι μπορεί να κρατήσει τιμές από 00 (το κανάλι εντελώς σβηστό) έως FF (εντελώς αναμμένο). Σε απλό δεκαδικό αυτό το εύρος είναι ακριβώς 0 έως 255, η ίδια κλίμακα που χρησιμοποιεί το RGB. Με 256 πιθανά επίπεδα ανά κανάλι, η μορφή έξι ψηφίων μπορεί να περιγράψει 16.777.216 διακριτά χρώματα.
Μετατροπή και προς τις δύο κατευθύνσεις, με ένα λυμένο παράδειγμα
Για να πάτε από HEX σε RGB, χωρίστε τον κωδικό στα τρία ζευγάρια του και μετατρέψτε το καθένα από τη βάση 16 σε συνηθισμένο δεκαδικό. Πάρτε το #1E90FF. Το κόκκινο ζευγάρι είναι 1E: αυτό είναι 1 επί 16, συν 14 (E), που ισούται με 30. Το πράσινο ζευγάρι 90 είναι 9 επί 16, συν 0, που ισούται με 144. Το μπλε ζευγάρι FF είναι 15 επί 16, συν 15, που ισούται με 255. Έτσι το #1E90FF γίνεται rgb(30, 144, 255) — το γνωστό dodger blue.
Η αντίστροφη πορεία είναι η ίδια διαδικασία ανάποδα. Πάρτε κάθε αριθμό RGB και γράψτε τον ως δύο δεκαεξαδικά ψηφία. Το καθαρό κόκκινο, rgb(255, 0, 0), δίνει FF, 00 και 00, που ενώνονται σε #FF0000. Κάτι που αξίζει να θυμάστε: αν μια τιμή είναι κάτω από το 16, εξακολουθείτε να χρειάζεστε και τα δύο ψηφία, οπότε το 5 γράφεται 05 και όχι απλώς 5. Ο μετατροπέας χειρίζεται αυτή τη συμπλήρωση για εσάς, αλλά μπερδεύει τον κόσμο όταν το κάνουν με το χέρι.
Πού χρησιμοποιείται κάθε μορφή
Το HEX είναι η καθημερινή γλώσσα του διαδικτύου. Το CSS, η HTML και ο περισσότερος κώδικας που γράφετε καταφεύγουν σε κωδικούς hex γιατί είναι συμπαγείς και εύκολο να αντιγραφούν. Το RGB τείνει να εμφανίζεται μέσα σε εργαλεία σχεδίασης και εικόνας — τα Figma, Photoshop, Sketch και Illustrator συνήθως δείχνουν ρυθμιστές ή πεδία στο εύρος 0-255, και οι εφαρμογές εγγραφής οθόνης ή βίντεο συχνά περιμένουν επίσης RGB. Έτσι τακτικά παίρνετε έναν κωδικό hex από ένα stylesheet και χρειάζεστε τη μορφή του RGB για να τον πληκτρολογήσετε σε ένα panel σχεδίασης, ή αντίστροφα. Αυτό το πήγαινε-έλα είναι όλος ο λόγος που ένας μετατροπέας είναι χρήσιμος. Αν χρειάζεστε να χτίσετε ένα ολόκληρο σύνολο ταιριαστών αποχρώσεων αντί να μεταφράσετε μία, η γεννήτρια παλέτας χρωμάτων μας είναι το καλύτερο σημείο εκκίνησης, και θα βρείτε περισσότερα βοηθητικά προγράμματα σαν αυτό στα εργαλεία προγραμματιστών.
Alpha, αδιαφάνεια και HSL
Και οι δύο συμβολισμοί έχουν μια εκτεταμένη μορφή που προσθέτει διαφάνεια. Το RGB γίνεται rgba(30, 144, 255, 0.5), όπου η τέταρτη τιμή είναι το alpha — το 0 είναι εντελώς διάφανο και το 1 εντελώς συμπαγές. Το HEX προσθέτει ένα τέταρτο ζευγάρι για τον ίδιο σκοπό, δίνοντας έναν οκταψήφιο κωδικό #RRGGBBAA· το 80, για παράδειγμα, είναι περίπου 50 τοις εκατό αδιαφάνεια. Μερικοί μετατροπείς προσφέρουν επίσης HSL (απόχρωση, κορεσμός, φωτεινότητα), που περιγράφει το χρώμα με τον τρόπο που θα το έκανε ένας άνθρωπος — επιλέξτε μια απόχρωση στον τροχό, μετά ρυθμίστε την ζωντάνια και τη φωτεινότητά της. Το HSL είναι ένα διαφορετικό νοητικό μοντέλο παρά μια διαφορετική παλέτα, οπότε μπορεί να είναι πιο διαισθητικό όταν θέλετε να κάνετε ένα χρώμα λίγο πιο ανοιχτό ή πιο απαλό χωρίς να ζογκλάρετε τρεις ξεχωριστούς αριθμούς.
Συχνές ερωτήσεις
Είναι το σύμβολο δίεσης μέρος ενός κωδικού hex;
Η δίεση είναι ένας δείκτης που λέει στο CSS και στα εργαλεία σχεδίασης ότι δίνετε ένα χρώμα hex. Το ίδιο το χρώμα είναι οι έξι χαρακτήρες μετά από αυτήν. Τα περισσότερα εργαλεία δέχονται τον κωδικό με ή χωρίς τη δίεση και την προσθέτουν πίσω για εσάς.
Ποια είναι η διαφορά ανάμεσα σε έναν κωδικό hex 3 ψηφίων και 6 ψηφίων;
Ένας κωδικός 3 ψηφίων είναι συντόμευση όπου κάθε ψηφίο διπλασιάζεται, οπότε το #1AF σημαίνει #11AAFF. Φτάνει μόνο τα 4.096 χρώματα, ενώ η πλήρης μορφή 6 ψηφίων φτάνει πάνω από 16 εκατομμύρια.
Γιατί ο κωδικός hex μου έχει οκτώ χαρακτήρες;
Ένας οκταψήφιος κωδικός hex προσθέτει ένα τέταρτο ζευγάρι για alpha, ή διαφάνεια. Οι πρώτοι έξι χαρακτήρες εξακολουθούν να είναι κόκκινο, πράσινο και μπλε, και οι τελευταίοι δύο ορίζουν την αδιαφάνεια από 00 (αόρατο) έως FF (συμπαγές).
Κάνουν οι κωδικοί hex διάκριση πεζών-κεφαλαίων;
Όχι. Τα #1e90ff και #1E90FF περιγράφουν ακριβώς το ίδιο χρώμα. Τα δεκαεξαδικά γράμματα λειτουργούν το ίδιο σε κεφαλαία ή πεζά, οπότε χρησιμοποιήστε όποιο προτιμά η ομάδα σας.
Φαίνονται ποτέ διαφορετικά στην οθόνη τα HEX και RGB;
Όχι. Όταν περιγράφουν τις ίδιες τιμές καναλιών είναι το ίδιο ακριβώς χρώμα. Οποιαδήποτε ορατή διαφορά προέρχεται από τυπογραφικό λάθος ή από το ότι ο ένας κωδικός περιλαμβάνει διαφάνεια που ο άλλος παραλείπει.
Πόσα χρώματα μπορεί να δείξει ένας τυπικός κωδικός hex;
Ένας κωδικός hex 6 ψηφίων προσφέρει 256 επίπεδα για καθένα από τα τρία κανάλια, κάτι που πολλαπλασιαζόμενο δίνει 16.777.216 πιθανά χρώματα.