Κωδικοί χρωμάτων HEX: πώς λειτουργεί το #RRGGBB

Πώς λειτουργεί ένας κωδικός HEX

Κάθε χρώμα στην οθόνη προκύπτει από την ανάμειξη κόκκινου, πράσινου και μπλε φωτός. Ο κωδικός HEX γράφει την ένταση κάθε φωτός με δύο χαρακτήρες μετά το σύμβολο #: πρώτα το κόκκινο, μετά το πράσινο, μετά το μπλε. Αυτό είναι το μοτίβο #RRGGBB.

Οι χαρακτήρες είναι δεκαεξαδικοί, δηλαδή ένας τρόπος μέτρησης με 16 ψηφία: 0 έως 9 και μετά a (10), b (11), c (12), d (13), e (14) και f (15). Ένα ζεύγος καλύπτει 256 τιμές, από 00 (0) έως ff (255), ακριβώς το εύρος της rgb().

Για να μετατρέψετε ένα ζεύγος σε κανονικό αριθμό, πολλαπλασιάστε το πρώτο ψηφίο με το 16 και προσθέστε το δεύτερο. Παρακάτω βλέπετε το #1e90ff, το χρώμα dodgerblue της CSS, σε τέσσερις μορφές και στη συνέχεια τον υπολογισμό ζεύγος προς ζεύγος.

Άρα το #1e90ff είναι rgb(30, 144, 255): λίγο κόκκινο, αρκετό πράσινο και πλήρες μπλε, που μαζί δίνουν ένα φωτεινό γαλάζιο. Τρία ζεύγη των 256 τιμών δίνουν 16.777.216 πιθανά χρώματα.

Σύντομη γραφή HEX με 3 και 4 ψηφία

Όταν τα δύο ψηφία κάθε ζεύγους είναι ίδια, μπορείτε να γράψετε το καθένα μία φορά. Το #ffcc00 γίνεται #fc0 και το πρόγραμμα περιήγησης διπλασιάζει ξανά κάθε ψηφίο. Το #1e90ff δεν έχει σύντομη μορφή, επειδή τα 1e και 90 δεν είναι ζεύγη ίδιων ψηφίων.

Η σύντομη μορφή καλύπτει μόνο 4.096 από τα 16,7 εκατομμύρια χρώματα. Η τετραψήφια εκδοχή προσθέτει αδιαφάνεια με τον ίδιο τρόπο, οπότε το #f008 σημαίνει #ff000088.

Αδιαφάνεια στο HEX: οκταψήφιος κωδικός με άλφα

Ένας οκταψήφιος κωδικός προσθέτει ένα τέταρτο ζεύγος για το κανάλι άλφα, δηλαδή την αδιαφάνεια: #RRGGBBAA. Το 00 είναι εντελώς διάφανο και το ff εντελώς συμπαγές. Όλα τα σύγχρονα προγράμματα περιήγησης το υποστηρίζουν στη CSS, μαζί με τη σύντομη τετραψήφια γραφή #RGBA.

Για να βρείτε το ζεύγος, πολλαπλασιάστε την αδιαφάνεια με το 255, στρογγυλέψτε σε ακέραιο και μετατρέψτε τον σε HEX. Το 50% δίνει 127,5, που στρογγυλεύεται σε 128 και γράφεται 80. Ακολουθεί ο πλήρης πίνακας, εφαρμοσμένος στο #1e90ff.

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

Δύο παγίδες. Πρώτον, το 80 είναι 128 στα 255, δηλαδή 50,2% και όχι ακριβώς 50%: το άλφα στο HEX έχει μόνο 256 βήματα, οπότε τα περισσότερα στρογγυλά ποσοστά είναι κοντινές προσεγγίσεις. Δεύτερον, το Android βάζει το άλφα πρώτο. Σε έναν πόρο χρώματος του Android, το #801e90ff σημαίνει το ίδιο με το #1e90ff80 στη CSS.

Πώς διαβάζετε έναν κωδικό HEX με το μάτι

Μπορείτε να μαντέψετε ένα χρώμα χωρίς καμία μετατροπή. Κοιτάξτε το πρώτο ψηφίο κάθε ζεύγους, γιατί αυτό κρατά σχεδόν όλη την πληροφορία.

• Το μεγαλύτερο πρώτο ψηφίο δείχνει το κυρίαρχο φως. Το #d2691e έχει d στο κόκκινο, 6 στο πράσινο και 1 στο μπλε, άρα είναι πορτοκαλί καφέ.
• Δύο υψηλά κανάλια αναμειγνύονται: κόκκινο και πράσινο δίνουν κίτρινο, πράσινο και μπλε δίνουν κυανό, κόκκινο και μπλε δίνουν ματζέντα ή πορφυρό.
• Τρία ίσα ζεύγη δίνουν γκρι. Το #333333 είναι σκούρο γκρι, το #999999 ανοιχτό γκρι. Σχεδόν ίσα ζεύγη, όπως στο #708090, δίνουν ένα μουντό, γκριζωπό χρώμα.
• Υψηλά ψηφία συνολικά σημαίνουν ανοιχτό χρώμα, χαμηλά ψηφία σκούρο. Όταν και τα τρία ζεύγη είναι c0 ή πάνω, το χρώμα είναι πολύ ανοιχτό. Όταν και τα τρία είναι 30 ή κάτω, είναι πολύ σκούρο.
• Το πράσινο φαίνεται πολύ πιο φωτεινό από το μπλε στον ίδιο αριθμό. Το #00ff00 έχει φωτεινότητα OKLCH 0,866, το #0000ff μόνο 0,452.

Γιατί το #808080 δεν είναι μεσαίο γκρι

Το #808080 βρίσκεται ακριβώς στη μέση αριθμητικά: 128 στα 255 σε κάθε κανάλι. Δεν φαίνεται όμως στη μέση ανάμεσα στο μαύρο και το λευκό. Η φωτεινότητά του στο OKLCH είναι 0,600, οπότε το μάτι το αντιλαμβάνεται στο 60% της διαδρομής προς το λευκό.

Οι τιμές HEX είναι ήδη κωδικοποιημένες με την καμπύλη του sRGB, που ακολουθεί περίπου το ανθρώπινο μάτι, αλλά όχι ακριβώς. Το #808080 εκπέμπει περίπου το 21,6% του φωτός του λευκού και τα αντιληπτικά μοντέλα τοποθετούν το οπτικό μέσο πιο χαμηλά: το OKLCH στο #636363, το CIELAB στο #777777.

Αυτό έχει σημασία για το κείμενο. Το γκρι #808080 σε λευκό δίνει 3,95:1 και αποτυγχάνει στο WCAG AA για κυρίως κείμενο. Το #767676 είναι το πιο ανοιχτό γκρι που περνά το 4,5:1, ενώ το #777777, μόλις ένα βήμα πιο ανοιχτό, αποτυγχάνει ήδη με 4,48:1.

Κεφαλαία ή πεζά, με ή χωρίς #

Οι κωδικοί HEX δεν κάνουν διάκριση πεζών και κεφαλαίων. Τα #1E90FF, #1e90ff και #1E90ff είναι το ίδιο χρώμα στη CSS, στο SVG και στα εργαλεία σχεδίασης. Διαλέξτε ένα στυλ και κρατήστε το παντού, ώστε μια αναζήτηση στον κώδικα να βρίσκει κάθε χρήση. Στη CSS συνηθίζονται τα πεζά.

Το σύμβολο # ανήκει στη σύνταξη της CSS, όχι στο χρώμα. Το Figma και πολλά εργαλεία σχεδίασης δείχνουν τον κωδικό χωρίς αυτό, ενώ οι γλώσσες προγραμματισμού συχνά τον γράφουν ως αριθμό με πρόθεμα 0x, όπως στο Flutter, όπου το Color(0xFF1E90FF) ξεκινά με το ζεύγος του άλφα.

Πώς βρίσκετε τον κωδικό HEX ενός χρώματος στην οθόνη

Χρησιμοποιήστε ένα σταγονόμετρο: ένα εργαλείο που διαβάζει το χρώμα κάτω από τον κέρσορα και δείχνει τον κωδικό του. Τα σταγονόμετρα είναι δωρεάν και συνήθως ήδη εγκατεστημένα.

• Chrome και Edge: ανοίξτε τα DevTools με F12, κάντε κλικ σε οποιοδήποτε τετράγωνο χρώματος στο πάνελ Styles και χρησιμοποιήστε το εικονίδιο σταγονόμετρου για να επιλέξετε από τη σελίδα.
• PickShade: ο επιλογέας χρωμάτων στην αρχική σελίδα έχει στο Chrome και στο Edge κουμπί σταγονόμετρου που επιλέγει χρώμα από οπουδήποτε στην οθόνη.
• Windows: εγκαταστήστε το Microsoft PowerToys και πατήστε Win + Shift + C για να ανοίξει το Color Picker.
• macOS: ανοίξτε το Digital Color Meter από τις Εφαρμογές, Βοηθήματα. Ρυθμίστε το σε sRGB και στο μενού «Προβολή» επιλέξτε εμφάνιση των τιμών σε δεκαεξαδική μορφή.
• Figma, Photoshop και οι περισσότερες εφαρμογές σχεδίασης: πατήστε I για το σταγονόμετρο.
• Σε φωτογραφία ή στιγμιότυπο οθόνης: ανοίξτε τη στο εργαλείο επιλογής χρωμάτων από εικόνα και κάντε κλικ σε οποιοδήποτε pixel. Η εικόνα μένει στη συσκευή σας.

Μια τιμή που επιλέξατε μπορεί να απέχει λίγες μονάδες από την αρχική, επειδή οι οθόνες εφαρμόζουν χρωματικά προφίλ και οι εικόνες συμπιέζονται. Όταν χρειάζεστε την ακριβή τιμή, αντιγράψτε την από το αρχείο σχεδίασης ή τη CSS, όχι από στιγμιότυπο οθόνης.

Ερωτήσεις και απαντήσεις