Πώς φτιάχνει χρώματα ο υπολογιστής: RGB, HEX και δυαδικοί αριθμοί

#FF0000. #00FF00. #0000FF. Συμβολισμοί που έχετε σίγουρα συναντήσει σε σχεδιαστικά αρχεία ή κώδικα. Μοιάζουν με κρυπτικές εντολές ή κωδικούς παιχνιδιών. Στην πραγματικότητα είναι ονόματα χρωμάτων.

Από πάνω προς τα κάτω: κόκκινο, πράσινο, μπλε. Αυτά είναι τα ονόματα που χρησιμοποιεί ο υπολογιστής για να ονομάσει τα χρώματα. Ας δούμε πού οδηγεί αυτός ο συμβολισμός.

RGB — τρία γράμματα που φτιάχνουν χρώμα

Red, Green, Blue. Τα τρία πρωτογενή χρώματα του φωτός. Από τον συνδυασμό τους σε διαφορετικές αναλογίες προκύπτουν όλα τα χρώματα που αντιλαμβανόμαστε.

Βλέπουμε RGB κάθε μέρα

Σχεδόν παντού υπάρχει οθόνη, υπάρχει και RGB.

• Οθόνη / TV — κάθε pixel αποτελείται από τρεις κουκίδες: κόκκινη, πράσινη και μπλε
• Οθόνη smartphone — ίδια δομή, μικρότερα pixels
• Gaming πληκτρολόγιο LED — σε κάθε πλήκτρο υπάρχουν τρία LED: R, G και B
• Φωτισμός PC case — οι ταινίες RGB στέλνουν ακριβώς σήμα RGB

Αν μεγεθύνετε αρκετά μια οθόνη, το βλέπετε. Κόκκινο, πράσινο, μπλε. Τίποτε άλλο. Εκατομμύρια μικροσκοπικές RGB κουκίδες συνθέτουν την εικόνα που βλέπετε.

Τα χρώματα δημιουργούνται με ανάμειξη

Κάθε κανάλι RGB έχει ένταση από 0 έως 255.

• RGB(255, 0, 0) — μόνο κόκκινο στο μέγιστο → καθαρό κόκκινο
• RGB(0, 255, 0) — μόνο πράσινο στο μέγιστο → καθαρό πράσινο
• RGB(255, 255, 0) — κόκκινο + πράσινο → κίτρινο
• RGB(0, 0, 0) — όλα σβηστά → μαύρο
• RGB(255, 255, 255) — όλα στο μέγιστο → λευκό

Το ότι κόκκινο και πράσινο δίνουν κίτρινο μπορεί να φαίνεται αντίθετο με τη διαίσθηση, αλλά αυτή είναι η πρόσθετη σύνθεση φωτός. Διαφέρει από την ανάμειξη χρωμάτων μπογιάς (κόκκινο + πράσινο = καφέ) που μάθατε στο σχολείο. Το φως φωτίζεται όσο προστίθεται και όταν συνδυαστεί πλήρως γίνεται λευκό.

Μετακινήστε τα τρία sliders για να το διαπιστώσετε μόνοι σας.

Ο 8ψήφιος αριθμός στα δεξιά είναι η δυαδική αναπαράσταση αυτού του καναλιού. Μετακινώντας τα sliders, αλλάζει και αυτός. Το επόμενο θέμα είναι πώς με μόνο 0 και 1 παράγονται 256 τιμές.

Γιατί ακριβώς 0 έως 255;

Ο υπολογιστής χειρίζεται μόνο 0 και 1. Κάθε θέση που κρατά ένα 0 ή ένα 1 λέγεται bit. Όσο αυξάνεται ο αριθμός των bits, οι δυνατές τιμές διπλασιάζονται κάθε φορά.

8 bits = 1 byte. Ένα χρώμα έχει τρία κανάλια RGB, σύνολο 3 bytes = 24 bits. Τα 24 bits αναπαριστούν περίπου 16,7 εκατομμύρια χρώματα — αρκετά για το ανθρώπινο μάτι, γι’ αυτό το 1 byte έγινε το πρότυπο ανά κανάλι.

Ανάγνωση δυαδικού αριθμού

Κάθε θέση έχει προκαθορισμένη τιμή. Από αριστερά: 128, 64, 32, 16, 8, 4, 2, 1 — δυνάμεις του 2.

Αθροίζοντας τις τιμές των θέσεων όπου υπάρχει 1 προκύπτει ο δεκαδικός αριθμός.

Έτσι η μέγιστη τιμή 8 bits είναι 255. Αυτός είναι ακριβώς ο λόγος που κάθε κανάλι RGB κυμαίνεται από 0 έως 255.

HEX — ίδιος αριθμός, πιο σύντομα

RGB(255, 255, 255). 16 χαρακτήρες. Πολύ μακρύ για να γράφεται κάθε φορά σε μια γραμμή CSS ή σε ένα πεδίο εργαλείου σχεδιασμού. Γι’ αυτό εμφανίστηκε ένας πιο σύντομος τρόπος γραφής.

Τι είναι το δεκαεξαδικό σύστημα

Το δεκαεξαδικό σύστημα εκφράζει τιμές από 0 έως 15 με έναν μόνο χαρακτήρα. Τα συνηθισμένα ψηφία φτάνουν μόνο έως το 9, οπότε για τις υπόλοιπες 6 τιμές δανειζόμαστε γράμματα του αλφαβήτου.

Οι κανόνες είναι τρεις:

• 0~9 παραμένουν ως έχουν
• Από το 10 και πάνω χρησιμοποιείται το A
• F είναι η μέγιστη τιμή ενός χαρακτήρα (= 15)

Γιατί ακριβώς δεκαεξαδικό;

4 δυαδικά ψηφία (0000 ~ 1111) εκφράζουν ακριβώς 16 τιμές.

4 δυαδικά ψηφία = 1 δεκαεξαδικός χαρακτήρας. Τέσσερα ψηφία συμπτύσσονται σε ένα. Επειδή κάθε κανάλι RGB έχει 8 bits, αντιστοιχεί ακριβώς σε 2 δεκαεξαδικούς χαρακτήρες.

Πώς μετατρέπουμε RGB σε HEX

Ας μετατρέψουμε το RGB(255, 87, 51).

Η 14ψήφια γραφή γίνεται 7 χαρακτήρες.

Αναγνώριση χρώματος από το HEX

Διαβάζοντας το HEX αντίστροφα, μπορείτε να εκτιμήσετε το χρώμα.

• #FF5733 — R μέγιστο (FF), G μέτριο (57), B χαμηλό (33) → πορτοκαλί με έντονο κόκκινο
• #3576E0 — R χαμηλό (35), G μέτριο (76), B δυνατό (E0) → μπλε με ελαφρά μοβ απόχρωση
• #29A85A — R χαμηλό (29), G δυνατό (A8), B χαμηλό (5A) → δροσερό πράσινο

Μόλις μάθετε να αναγνωρίζετε τα τρία ζεύγη, designers και developers μπορούν να συνομιλούν με κοινή γλώσσα.

Σύνοψη σε μία γραμμή

• RGB — τρία κανάλια: κόκκινο, πράσινο, μπλε, καθένα από 0 έως 255
• Δυαδικά 8 bits — η προέλευση των 256 τιμών ανά κανάλι
• HEX — τρόπος σύντομης γραφής των ίδιων αριθμών σε δύο χαρακτήρες

Μόλις συνδέσετε αυτές τις τρεις έννοιες, οι κωδικοί χρωμάτων δεν είναι πλέον κρυπτογραφία. Οι τρεις αριθμοί του RGB είναι τα έξι γράμματα του HEX.

Το επόμενο βήμα είναι να μετατρέψουμε αυτούς τους αριθμούς στη γλώσσα του designer. Αιτήματα όπως «λίγο πιο φωτεινό,» «λιγότερο κορεσμένο,» ή «το ίδιο στο χαρτί» δύσκολα διαχειρίζονται μόνο με RGB και HEX. Πώς το HSL, το CMYK και το OKLCH λύνουν αυτό το πρόβλημα συνεχίζεται στο Το RGB δεν αρκεί: συμβολισμοί χρωμάτων HSL, CMYK και OKLCH.