Το RGB σου δίνει τρία δεκαδικά κανάλια μεταξύ 0 και 255. Η μετατροπή σε HEX μετατρέπει κάθε κανάλι σε ένα δεκαεξαδικό διψήφιο αριθμό, ώστε όλο το χρώμα να χωράει σε ένα συμπαγές token που καταλαβαίνει κάθε περιηγητής, εργαλείο σχεδίασης και οδηγός στυλ.
Πώς λειτουργεί η μετατροπή από RGB σε HEX
- Πάρε το κανάλι του κόκκινου και διαιρέσέ το με 16: το πηλίκο είναι το πρώτο ψηφίο και το υπόλοιπο το δεύτερο.
- Γράψε τα ψηφία 10 έως 15 ως γράμματα A έως F — το 255 γίνεται FF.
- Επανάλαβε για το πράσινο και το μπλε, προσθέτοντας μηδέν μπροστά σε μονοψήφια: το 5 γίνεται 05.
- Σύνδεσε τα τρία ζεύγη και βάλε ένα # μπροστά.
Παράδειγμα εφαρμογής
Ακριβές, όσο τα κανάλια είναι ακέραιοι από 0 έως 255. Κλασματικές τιμές όπως rgb(79.5, 70, 229) στρογγυλοποιούνται πρώτα στον κοντινότερο ακέραιο, επειδή το HEX δεν μπορεί να αποθηκεύσει ενδιάμεσες τιμές.
RGB και HEX εξηγούνται
Τι είναι το RGB;
Το RGB περιγράφει ένα χρώμα ως τρία κανάλια φωτός — κόκκινο, πράσινο και μπλε — το καθένα από 0 έως 255. Αυτό αντικατοπτρίζει τον τρόπο που λειτουργούν οι οθόνες: όλα τα τρία στο 255 δίνουν λευκό, όλα στο 0 δίνουν μαύρο. Το RGB είναι η σωστή επιλογή όποτε χρειάζεται να υπολογίσεις με ένα χρώμα, και το rgba() προσθέτει διαφάνεια.
- Σύνταξη:
- rgb(R, G, B)
- Πεδίο:
- 0–255 ανά κανάλι
- Καλύτερο για:
- κώδικας, canvas, διαφάνεια με rgba()
Τι είναι το HEX;
Κωδικός HEX είναι ένας εξαψήφιος δεκαεξαδικός αριθμός που αποθηκεύει τα κανάλια κόκκινου, πράσινου και μπλε πίσω από ένα προεξέχον #. Κάθε ζεύγος ψηφίων καλύπτει ένα κανάλι, από 00 (καθόλου) έως FF (πλήρες), δίνοντας τα ίδια 16,7 εκατομμύρια χρώματα με το RGB αλλά σε πιο σύντομη σημειογραφία. Το HEX είναι το προεπιλεγμένο σε CSS, εργαλεία σχεδίασης και οδηγίες εταιρικής ταυτότητας.
- Σύνταξη:
- #RRGGBB
- Πεδίο:
- 00–FF ανά κανάλι
- Καλύτερο για:
- CSS, παράδοση σχεδίου, οδηγίες εταιρικής ταυτότητας
Πίνακας αναφοράς RGB σε HEX
Οι πιο κοινές CSS αποχρώσεις, μετατρεπόμενες από RGB σε HEX.
| Χρώμα | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |