Η σελίδα αυτή κάνει μετατροπή HEX σε RGB
Πληκτρολογείτε έναν δεκαεξαδικό κωδικό χρώματος (π.χ. #4f46e5 ή #abc) στο πεδίο εισόδου. Η σελίδα εμφανίζει αμέσως τις αντίστοιχες τρεις τιμές RGB (ακέραιοι αριθμοί από 0 έως 255) που χρειάζονται για την οθόνη. Το τρίδυμο RGB προβάλλεται μαζί με άλλες μορφές χρώματος, ώστε να μπορείτε να το αντιγράψετε απευθείας σε κώδικα ή λογισμικό σχεδίασης. Η μετατροπή είναι άμεση και πλήρως πεδίου‑προς‑πεδίου: αν αλλάξετε οποιαδήποτε τιμή (HEX, RGB, HSL, HSV, CMYK, LAB), όλες οι υπόλοιπες ενημερώνονται αυτόματα.
Τι κάνει αυτή τη σελίδα διαφορετική
Η σελίδα αυτή μετατρέπει την δεκαεξαδική (βάση‑16) αναπαράσταση ενός χρώματος στις δεκαδικές (βάση‑10) RGB τιμές που χρησιμοποιούν απευθείας οι οθόνες και η μαθηματική ανάμειξη χρωμάτων. Οι κωδικοί HEX είναι συμπαγείς και πολύ διαδεδομένοι στο CSS, αλλά στην ουσία αποτελούν συντομογραφία των ίδιων τριών καναλιών 8‑bit που η RGB εκφράζει αριθμητικά.
Επειδή πρόκειται για μετατροπή HEX‑σε‑RGB, ισχύουν συγκεκριμένοι κανόνες:
- Οι HEX κωδικοί δίνονται ως έξι ψηφία (
#RRGGBB) ή ως τριψήφια συντομογραφία (#RGB), όπου κάθε ψηφίο της συντομογραφίας διπλασιάζεται για να σχηματίσει τον πλήρη εξαψήφιο κωδικό. - Το πρόθεμα
#είναι προαιρετικό. Η σελίδα δέχεται κωδικούς με ή χωρίς αυτό. - Οι τρεις τιμές RGB είναι πάντα ακέραιοι από 0 έως 255. Δεν υπάρχει κανάλι άλφα (οκταψήφιοι κωδικοί HEX που περιλαμβάνουν άλφα δεν υποστηρίζονται – η σελίδα περιμένει μόνο εξαψήφιους ή τριψήφιους κωδικούς HEX).
- Η μετατροπή είναι αυστηρά μαθηματική: κάθε ζεύγος δεκαεξαδικών ψηφίων πολλαπλασιάζεται με δυνάμεις του 16, οπότε το αποτέλεσμα είναι ακριβές και αναστρέψιμο (χωρίς στρογγυλοποίηση ή αποκοπή χρωματικού εύρους).
Αυτή η σελίδα υπάρχει επειδή, ενώ HEX και RGB περιγράφουν το ίδιο χρώμα, τα εργαλεία και οι γλώσσες προγραμματισμού τα χρησιμοποιούν με διαφορετικό τρόπο. Ένας σχεδιαστής μπορεί να λάβει ένα HEX από τον οδηγό επωνυμίας, αλλά ο προγραμματιστής χρειάζεται τις αριθμητικές RGB τιμές για να το περάσει σε ένα canvas API ή σε έναν πίνακα χρωμάτων στο JavaScript. Χωρίς μια τέτοια σελίδα, η μετατροπή γίνεται με το χέρι – και τα λάθη είναι συχνά.
Η μαθηματική βάση της μετατροπής: από δεκαεξαδικό σε δεκαδικό
Κάθε RGB κανάλι αντιστοιχεί σε 8 bits, δίνοντας 2⁸ = 256 πιθανές τιμές (0‑255). Ένα δεκαεξαδικό σύστημα χρησιμοποιεί 16 ψηφία: 0‑9 και A‑F (όπου A=10, B=11, C=12, D=13, E=14, F=15). Για κάθε ζεύγος δεκαεξαδικών ψηφίων, η μετατροπή σε δεκαδικό γίνεται με τον τύπο:
Δεκαδική τιμή = (πρώτο ψηφίο × 16) + (δεύτερο ψηφίο)
Παράδειγμα: Για το χρώμα #4f46e5:
- Κόκκινο:
4f→ (4 × 16) + 15 = 64 + 15 = 79 - Πράσινο:
46→ (4 × 16) + 6 = 64 + 6 = 70 - Μπλε:
e5→ (14 × 16) + 5 = 224 + 5 = 229
Οπότε το rgb(79, 70, 229) είναι το αποτέλεσμα. Η διαδικασία είναι πλήρως ντετερμινιστική: δεν υπάρχει καμία απώλεια πληροφορίας.
Τριψήφια συντομογραφία
Όταν ο χρήστης εισάγει #abc, η σελίδα το επεκτείνει πρώτα σε #aabbcc διπλασιάζοντας κάθε ψηφίο. Έτσι:
a→aa→ (10 × 16) + 10 = 170b→bb→ (11 × 16) + 11 = 187c→cc→ (12 × 16) + 12 = 204
Το χρώμα γίνεται rgb(170, 187, 204). Αυτή η επέκταση είναι στάνταρ στη βιομηχανία, γιατί τα τρία δεκαεξαδικά ψηφία αντιστοιχούν ακριβώς σε τιμές που είναι πολλαπλάσια του 17 (το 0x11 = 17, 0x22 = 34, κτλ.). Έτσι, η τριψήφια μορφή είναι απλώς μια συμπαγής γραφή που εξοικονομεί χώρο, αλλά δίνει λιγότερη ποικιλία (256/17 ≈ 15 αποχρώσεις ανά κανάλι αντί για 256).
Κανόνες και ακρότατες περιπτώσεις
| Περίπτωση | Τι συμβαίνει |
|---|---|
| Μη έγκυρη μορφή HEX | Εμφανίζεται το μήνυμα: "Εισαγάγετε ένα δεκαεξαδικό χρώμα όπως #4f46e5 ή #abc." |
Εισαγωγή τριψήφιου (π.χ. #abc) |
Γίνεται αυτόματη επέκταση σε εξαψήφιο (#aabbcc) και μετά μετατροπή |
| Εισαγωγή 8 ψηφίων (με άλφα) | Δεν υποστηρίζεται – η σελίδα περιμένει μόνο 3 ή 6 ψηφία (συν προαιρετικό #) |
Χωρίς # |
Λειτουργεί κανονικά· το 4f46e5 γίνεται rgb(79,70,229) |
| Μη αριθμοί ή γράμματα | Αποτυχία επικύρωσης, εμφανίζεται το μήνυμα σφάλματος |
Όλες οι μετατροπές εκτελούνται τοπικά στο πρόγραμμα περιήγησης – καμία πληροφορία δεν ανεβαίνει ούτε αποθηκεύεται. Η σελίδα δεν κάνει στρογγυλοποίηση: η μετατροπή από βάση 16 σε βάση 10 είναι ακέραια, οπότε καμία τιμή δεν αλλοιώνεται.
Ποιοι τη χρειάζονται
- Προγραμματιστές front‑end που μετατρέπουν CSS κωδικούς HEX σε RGB για χρήση σε JavaScript, canvas ή inline στυλ που απαιτούν αριθμητικά κανάλια.
- Σχεδιαστές που λαμβάνουν προδιαγραφές χρώματος ως HEX από οδηγούς επωνυμίας και χρειάζονται RGB για τα εργαλεία σχεδίασης (π.χ. Photoshop, Figma).
- Προγραμματιστές παιχνιδιών και ψηφιακής τέχνης που θέλουν να χειρίζονται μαθηματικά τα χρώματα και να έχουν ακρίβεια 0–255.
- Φοιτητές που μαθαίνουν πώς οι δεκαεξαδικοί κωδικοί σχετίζονται με το προσθετικό μοντέλο RGB που χρησιμοποιούν οι οθόνες.
- Όποιος χρειάζεται να υπολογίσει αντίθεση ή φωτεινότητα – για παράδειγμα, για συμμόρφωση με WCAG, η σχετική φωτεινότητα υπολογίζεται από τα RGB κανάλια, όχι από το HEX.
Κοινά μοτίβα HEX και τα RGB τους
| HEX | RGB | Περιγραφή |
|---|---|---|
#000000 |
rgb(0,0,0) | Μαύρο |
#ffffff |
rgb(255,255,255) | Λευκό |
#ff0000 |
rgb(255,0,0) | Καθαρό κόκκινο |
#00ff00 |
rgb(0,255,0) | Καθαρό πράσινο |
#0000ff |
rgb(0,0,255) | Καθαρό μπλε |
#808080 |
rgb(128,128,128) | Μεσαίο γκρι |
#888888 |
rgb(136,136,136) | Γκρι του συστήματος (136≈0x88) |
Παρατηρήστε πως σε όλες τις αποχρώσεις του γκρι, τα τρία κανάλια είναι ίσα. Το #808080 προκύπτει από 0x80 = 128. Επίσης, οι λεγόμενες «web‑safe» χρωματικές παλέτες (που χρησιμοποιούσαν παλιότερες οθόνες 256 χρωμάτων) αντιστοιχούν σε HEX τιμές της μορφής #XXYYZZ όπου XX, YY, ZZ είναι πολλαπλάσια του 33 (π.χ. #330066). Αν και πλέον σπάνια αναγκαίες, η σελίδα μπορεί να χρησιμοποιηθεί για την εύρεση τους.
Αντίθεση και προσβασιμότητα με HEX και RGB
Για να υπολογίσετε τη σχετική φωτεινότητα ενός χρώματος (luminance) σύμφωνα με το WCAG 2.2, χρειάζεστε πρώτα τα γραμμικά RGB κανάλια. Η διαδικασία ξεκινάει από τις τιμές 0‑255, που ακριβώς παρέχει αυτή η σελίδα. Ο τύπος βασίζεται στη στάθμιση:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
(όπου R, G, B είναι γραμμικοποιημένες, αλλά η αρχή είναι ίδια – χωρίς τα αριθμητικά κανάλια δεν μπορείτε να το κάνετε.)
Παράδειγμα: Για το μπλε #0000ff (R=0, G=0, B=255), η σχετική φωτεινότητα είναι πολύ χαμηλή (0.0722 × 255 ≈ 18,4). Για λευκό κείμενο πάνω σε μπλε φόντο, η αντίθεση είναι περίπου 8,6:1, που είναι αποδεκτή για κανονικό κείμενο. Χωρίς την ακριβή RGB τιμή, δεν μπορείτε να κάνετε αυτόν τον υπολογισμό.
Συχνές ερωτήσεις (FAQ)
Ε: Μπορώ να εισάγω κωδικό με 8 ψηφία (π.χ. #4f46e580 για ημιδιαφάνεια);
Α: Όχι. Η σελίδα αυτή υποστηρίζει μόνο εξαψήφιους (RRGGBB) και τριψήφιους (RGB) κωδικούς HEX, χωρίς κανάλι άλφα. Για μετατροπή με άλφα θα χρειαστείτε άλλο εργαλείο.
Ε: Η τριψήφια συντομογραφία δίνει πάντα τιμές που είναι πολλαπλάσια του 17;
Α: Ναι. Κάθε διπλασιασμένο ψηφίο (π.χ. a → aa) δίνει τιμή 16×τιμή_ψηφίου + τιμή_ψηφίου = 17×τιμή_ψηφίου. Οπότε τα αποτελέσματα είναι πάντα 0, 17, 34, …, 255. Για παράδειγμα, #abc → rgb(170,187,204) (170=10×17, 187=11×17, 204=12×17).
Ε: Γιατί όταν πληκτρολογώ #GGG δεν εμφανίζεται RGB;
Α: Το G δεν είναι έγκυρο δεκαεξαδικό ψηφίο (επιτρεπόμενα: 0‑9, A‑F, a‑f). Η σελίδα εμφανίζει το μήνυμα σφάλματος: "Εισαγάγετε ένα δεκαεξαδικό χρώμα όπως #4f46e5 ή #abc."
Ε: Μπορώ να αντιγράψω την τιμή RGB απευθείας;
Α: Ναι. Η σελίδα εμφανίζει το τρίδυμο RGB (π.χ. 79, 70, 229) σε μορφή που μπορείτε να αντιγράψετε. Δεν κρύβεται τίποτα σε κουμπιά – το κείμενο είναι έτοιμο για copy‑paste.
Ε: Τα αποτελέσματα είναι ίδια αν χρησιμοποιήσω μικρά ή κεφαλαία γράμματα;
Α: Ναι. Η σελίδα κάνει case‑insensitive επεξεργασία: #4F46E5, #4f46e5, #4F46e5 δίνουν το ίδιο αποτέλεσμα rgb(79,70,229).
Ε: Γιατί η σελίδα δεν υπολογίζει μόνη της την αντίθεση ή την απόχρωση; Α: Η κύρια λειτουργία της είναι η απλή, μηχανική μετατροπή HEX σε RGB. Παρόλο που εμφανίζει και άλλες μορφές χρώματος (HSL, HSV, CMYK, LAB), η σελίδα δεν είναι εργαλείο ανάλυσης αντίθεσης. Για υπολογισμούς WCAG χρειάζεστε εξειδικευμένο εργαλείο, αλλά οι RGB τιμές που παίρνετε εδώ είναι το απαραίτητο πρώτο βήμα.