Ένας κωδικός HEX πακετάρει τρεις 8-bit τιμές σε έξι δεκαεξαδικά ψηφία. Η μετατροπή HEX σε RGB σημαίνει να χωρίσεις αυτά τα ψηφία σε ζεύγη και να διαβάσεις κάθε ζεύγος ως δεκαδικό αριθμό μεταξύ 0 και 255 — ακριβώς τις τιμές που περιμένουν το CSS, το Figma και οι επεξεργαστές εικόνας.
Πώς λειτουργεί η μετατροπή από HEX σε RGB
- Αφαίρεσε το προεξέχον # και, αν ο κωδικός έχει μόνο τρία ψηφία, διπλασίασε το καθένα: #f53 γίνεται #ff5533.
- Χώρισε τα έξι ψηφία σε τρία ζεύγη — RR, GG και BB.
- Διάβασε κάθε ζεύγος ως αριθμό στη βάση 16 και μετέτρεψέ τον στη βάση 10: FF γίνεται 255, 57 γίνεται 87, 33 γίνεται 51.
- Γράψε τα τρία αποτελέσματα ως rgb(R, G, B).
Παράδειγμα εφαρμογής
Αυτή η μετατροπή είναι ακριβής. Το HEX και το RGB περιγράφουν τις ίδιες τιμές sRGB σε διαφορετική σημειογραφία, οπότε τίποτα δεν στρογγυλοποιείται ή χάνεται σε καμία κατεύθυνση.
HEX και RGB εξηγούνται
Τι είναι το HEX;
Κωδικός HEX είναι ένας εξαψήφιος δεκαεξαδικός αριθμός που αποθηκεύει τα κανάλια κόκκινου, πράσινου και μπλε πίσω από ένα προεξέχον #. Κάθε ζεύγος ψηφίων καλύπτει ένα κανάλι, από 00 (καθόλου) έως FF (πλήρες), δίνοντας τα ίδια 16,7 εκατομμύρια χρώματα με το RGB αλλά σε πιο σύντομη σημειογραφία. Το HEX είναι το προεπιλεγμένο σε CSS, εργαλεία σχεδίασης και οδηγίες εταιρικής ταυτότητας.
- Σύνταξη:
- #RRGGBB
- Πεδίο:
- 00–FF ανά κανάλι
- Καλύτερο για:
- CSS, παράδοση σχεδίου, οδηγίες εταιρικής ταυτότητας
Τι είναι το RGB;
Το RGB περιγράφει ένα χρώμα ως τρία κανάλια φωτός — κόκκινο, πράσινο και μπλε — το καθένα από 0 έως 255. Αυτό αντικατοπτρίζει τον τρόπο που λειτουργούν οι οθόνες: όλα τα τρία στο 255 δίνουν λευκό, όλα στο 0 δίνουν μαύρο. Το RGB είναι η σωστή επιλογή όποτε χρειάζεται να υπολογίσεις με ένα χρώμα, και το rgba() προσθέτει διαφάνεια.
- Σύνταξη:
- rgb(R, G, B)
- Πεδίο:
- 0–255 ανά κανάλι
- Καλύτερο για:
- κώδικας, canvas, διαφάνεια με rgba()
Πίνακας αναφοράς HEX σε RGB
Οι πιο κοινές CSS αποχρώσεις, μετατρεπόμενες από HEX σε RGB.
| Χρώμα | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |