Η μετατροπή RGB σε Hex: Από την δεκαδική στην δεκαεξαδική αναπαράσταση
Η σελίδα αυτή δέχεται τρεις δεκαδικούς αριθμούς – κόκκινο, πράσινο, μπλε – ο καθένας από το 0 έως το 255, και επιστρέφει άμεσα τον ισοδύναμο δεκαεξαδικό κωδικό χρώματος, για παράδειγμα #1E90FF. Το αποτέλεσμα εμφανίζεται ως δείγμα χρώματος και ταυτόχρονα ενημερώνονται όλες οι άλλες υποστηριζόμενες μορφές χρώματος (HSL, HSV, CMYK, LAB). Δεν υπάρχει κουμπί «μετατροπή»· η επεξεργασία οποιουδήποτε πεδίου ανανεώνει αυτόματα όλα τα υπόλοιπα.
Η μετατροπή είναι ακριβής και αναστρέψιμη, γιατί τόσο το RGB όσο και το Hex αναφέρονται στον ίδιο χρωματικό χώρο – τον sRGB που χρησιμοποιούν οι περισσότερες οθόνες. Δεν υπάρχει περικοπή χρωματικής γκάμας ούτε προσέγγιση. Το εξαγόμενο Hex ξεκινά πάντα με # και αποτελείται από έξι ψηφία (π.χ. #4F46E5), εκτός αν χρησιμοποιηθεί η οκταψήφια μορφή που περιλαμβάνει άλφα κανάλι – κάτι που το εργαλείο δεν παράγει, αλλά μπορεί να δεχθεί στην είσοδο.
Οι τρεις αριθμοί εισάγονται χωρισμένοι με κόμμα ή κενό, π.χ. 79, 70, 229. Το εργαλείο δεν δέχεται τιμές εκτός του 0–255· σε περίπτωση λάθους εμφανίζεται το μήνυμα: «Εισάγετε RGB ως τρεις αριθμούς 0–255, π.χ. 79, 70, 229.» Όλη η επεξεργασία γίνεται στον φυλλομετρητή του χρήστη – καμία τιμή δεν μεταφορτώνεται σε διακομιστή.
Πώς λειτουργεί το εργαλείο: Άμεση ανταπόκριση και ενημέρωση όλων των πεδίων
Η σελίδα είναι σχεδιασμένη για ταχύτητα και συνέπεια. Μόλις πληκτρολογήσετε τις τρεις τιμές RGB, το Hex εμφανίζεται αμέσως. Δεν υπάρχει καθυστέρηση, γιατί η μετατροπή εκτελείται στο πρόγραμμα περιήγησης με JavaScript. Το δείγμα χρώματος ανανεώνεται την ίδια στιγμή, και τα πεδία HSL, HSV, CMYK, LAB ενημερώνονται αυτόματα.
Η ίδια λογική ισχύει αν αλλάξετε το Hex πεδίο: το εργαλείο αναλύει την είσοδο και ανανεώνει τα RGB και τα υπόλοιπα. Αν γράψετε #abc, το σύστημα το επεκτείνει σε #aabbcc πριν υπολογίσει τα υπόλοιπα. Αυτή η αμφίδρομη λειτουργία κάνει το εργαλείο χρήσιμο και για όσους ξεκινούν από Hex και θέλουν τις RGB τιμές.
Οι κανόνες εισαγωγής είναι απλοί: οι τρεις αριθμοί μπορούν να διαχωρίζονται με κόμμα ή κενό (π.χ. 0 128 255). Αν κάποια τιμή είναι μικρότερη του 0 ή μεγαλύτερη του 255, εμφανίζεται το μήνυμα λάθους. Δεν γίνεται σιωπηρή περικοπή – η τιμή πρέπει να είναι έγκυρη. Αυτό προστατεύει από λάθη που προκύπτουν όταν κάποιος αντιγράφει αριθμούς από άλλο λογισμικό που χρησιμοποιεί ποσοστά (π.χ. 0–100) αντί για 0–255.
Ο μαθηματικός μηχανισμός της μετατροπής
Η μετατροπή από δεκαδικό σε δεκαεξαδικό ακολουθεί μια απλή διαδικασία: κάθε τιμή 0–255 διαιρείται με το 16. Το ακέραιο πηλίκο δίνει το πρώτο δεκαεξαδικό ψηφίο, και το υπόλοιπο της διαίρεσης δίνει το δεύτερο. Για παράδειγμα, η τιμή 230 (κόκκινο) διαιρείται με το 16: 230 ÷ 16 = 14 με υπόλοιπο 6. Στο δεκαεξαδικό σύστημα, 14 συμβολίζεται ως E και 6 ως 6, οπότε η διψήφια αναπαράσταση είναι E6. Επαναλαμβάνεται για το πράσινο και το μπλε, και τα τρία ζεύγη ενώνονται με το πρόθεμα #. Έτσι, η RGB τριάδα 230, 144, 255 δίνει #E690FF.
Η ίδια διαδικασία ισχύει για όλες τις τιμές. Για 0, η διαίρεση δίνει 0 και 0, δηλαδή 00. Για 255, 255 ÷ 16 = 15 με υπόλοιπο 15, δηλαδή FF. Το εργαλείο δεν κάνει ποτέ στρογγυλοποίηση γιατί η αντιστοίχιση είναι ακριβής. Αυτός είναι ο λόγος που η μετατροπή είναι αναστρέψιμη: αν πάρετε το Hex #FF6600 και μετατρέψετε κάθε ζεύγος πίσω σε δεκαδικό (FF=255, 66=102, 00=0), παίρνετε ακριβώς την αρχική RGB τριάδα 255, 102, 0.
Σημειώστε ότι το εργαλείο δεν χρησιμοποιεί τριψήφια συντομογραφία αυτόματα. Ακόμα κι αν η RGB τριάδα 170, 187, 204 μπορεί να γραφεί ως #abc, το πρόγραμμα εμφανίζει #AABBCC. Αλλά αν εσείς γράψετε #abc στο πεδίο Hex, το εργαλείο το αναγνωρίζει και το επεκτείνει.
Το χρωματικό μοντέλο RGB και η σχέση του με το Hex
Το RGB (κόκκινο, πράσινο, μπλε) είναι ένα προσθετικό μοντέλο χρώματος που χρησιμοποιείται σε οθόνες, προβολείς και κάθε συσκευή που εκπέμπει φως. Τα τρία κανάλια αναμειγνύονται για να δημιουργήσουν όλο το φάσμα των χρωμάτων που μπορεί να εμφανίσει μια οθόνη. Η κλίμακα 0–255 αντιστοιχεί σε 8 bit ανά κανάλι, δηλαδή 256 διαβαθμίσεις. Συνολικά, 256³ = 16.777.216 χρώματα.
Το Hex (δεκαεξαδικό) είναι απλά μια διαφορετική γραφή των ίδιων τριών αριθμών, με βάση το 16 αντί για το 10. Κάθε δεκαεξαδικό ψηφίο παίρνει τιμές 0–9 και A–F. Δύο ψηφία αντιπροσωπεύουν ένα byte (8 bit), οπότε το εξαψήφιο Hex #RRGGBB είναι ο πιο συμπαγής τρόπος να γράψουμε ένα χρώμα RGB σε CSS και άλλες γλώσσες περιγραφής ιστοσελίδων.
Ο χρωματικός χώρος sRGB είναι η κοινή βάση. Αυτό σημαίνει ότι ένα χρώμα που ορίζεται ως RGB 79, 70, 229 είναι ακριβώς το ίδιο με το #4F46E5 σε οποιαδήποτε συσκευή που σέβεται το sRGB. Δεν υπάρχει απώλεια ή μετατόπιση – η μετάβαση είναι μαθηματικά ισοδύναμη. Αντίθετα, αν μετατρέπαμε το ίδιο χρώμα σε CMYK (κυανό, ματζέντα, κίτρινο, μαύρο), θα υπήρχε πάντα μια μικρή απόκλιση λόγω των διαφορετικών χρωματικών χώρων.
Πρακτικές εφαρμογές και καλές πρακτικές εισαγωγής
Το εργαλείο απευθύνεται κυρίως σε:
- Προγραμματιστές front-end που γράφουν CSS και χρειάζονται χρώματα σε μορφή
#rrggbb. Συχνά τα δεδομένα προέρχονται από σχεδιαστικά εργαλεία που δίνουν τιμές RGB (π.χ. Photoshop, Figma). Αντί να υπολογίζουν με το χέρι, χρησιμοποιούν αυτή τη σελίδα. - Σχεδιαστές UI/UX που λαμβάνουν προδιαγραφές χρωμάτων ως τριάδες RGB (π.χ. από μια εικόνα ή ένα πρωτότυπο) και θέλουν να τις μετατρέψουν σε Hex για το design handoff.
- Γραφίστες που δημιουργούν web assets και θέλουν συνέπεια μεταξύ των RGB πρωτοτύπων και των τελικών Hex κωδικών.
- Φοιτητές και ερασιτέχνες που μαθαίνουν πώς λειτουργεί το ψηφιακό χρώμα.
Για να αποφύγετε λάθη:
- Χρησιμοποιείτε πάντα αριθμούς 0–255. Αν έχετε τιμές από 0–100 (π.χ. από κάποιο εργαλείο που χρησιμοποιεί ποσοστά), πολλαπλασιάστε με 2,55 και στρογγυλοποιήστε.
- Διαχωρίστε τις τιμές με κόμμα ή κενό. Μην χρησιμοποιείτε τελείες ή άλλους χαρακτήρες.
- Μην γράφετε το σύμβολο
#στο πεδίο RGB – το Hex πεδίο το προσθέτει αυτόματα. - Αν θέλετε τριψήφια συντομογραφία, γράψτε την στο Hex πεδίο (π.χ.
#f09), και το εργαλείο θα την επεκτείνει.
Θυμηθείτε ότι το Hex δεν περιλαμβάνει άλφα κανάλι, εκτός αν γράψετε οκτώ ψηφία (π.χ. #ff6600cc). Το εργαλείο δέχεται οκταψήφιο Hex, αλλά δεν το παράγει. Αν χρειάζεστε διαφάνεια, χρησιμοποιήστε την CSS συνάρτηση rgba() ή την hsla().
Συχνές ερωτήσεις (FAQ)
1. Γιατί το Hex μου βγαίνει με κεφαλαία γράμματα;
Το εργαλείο εμφανίζει το Hex με κεφαλαία γράμματα για λόγους ομοιομορφίας. Η CSS δεν κάνει διάκριση πεζών/κεφαλαίων, οπότε #FF6600 και #ff6600 είναι ισοδύναμα.
2. Μπορώ να χρησιμοποιήσω τριψήφια συντομογραφία στην είσοδο;
Ναι, το πεδίο Hex δέχεται τριψήφια μορφή (π.χ. #abc). Το εργαλείο την επεκτείνει σε #aabbcc πριν υπολογίσει τα υπόλοιπα πεδία. Η εξαγόμενη τιμή παραμένει πάντα εξαψήφια.
3. Τι συμβαίνει αν γράψω RGB τιμές με δεκαδικά, π.χ. 79.5, 70, 229;
Το εργαλείο αναμένει ακέραιες τιμές 0–255. Δεκαδικοί αριθμοί δεν γίνονται δεκτοί και θα εμφανιστεί το μήνυμα λάθους. Χρησιμοποιήστε στρογγυλοποίηση.
4. Γιατί δεν υπάρχει κουμπί «Μετατροπή»; Η σελίδα λειτουργεί με άμεση ανταπόκριση: κάθε αλλαγή σε οποιοδήποτε πεδίο ενημερώνει όλα τα υπόλοιπα αυτόματα. Δεν χρειάζεται κουμπί.
5. Υπάρχει όριο στο πόσες φορές μπορώ να χρησιμοποιήσω το εργαλείο; Καθόλου. Όλη η επεξεργασία γίνεται στον φυλλομετρητή σας, χωρίς σύνδεση με διακομιστή. Μπορείτε να το χρησιμοποιήσετε όσες φορές θέλετε, ακόμα και χωρίς ίντερνετ μετά την πρώτη φόρτωση της σελίδας.
6. Το χρώμα που βλέπω στο δείγμα είναι ακριβές; Εξαρτάται από την οθόνη σας και τη βαθμονόμησή της. Η τιμή Hex είναι η σωστή αναπαράσταση του χρώματος στον χώρο sRGB. Αν η οθόνη σας δεν είναι βαθμονομημένη, η εμφάνιση μπορεί να διαφέρει ελαφρώς, αλλά η αριθμητική τιμή είναι ακριβής.