Τι είναι ο Hex Code; Όλα όσα πρέπει να γνωρίζετε

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

Εάν έχετε εργαστεί με HTML ή CSS στο παρελθόν, πιθανότατα έχετε ακούσει τον όρο hex code. Τι είναι όμως ακριβώς ο hex code; Ποια είναι μερικά παραδείγματα εξαγωνικών κωδικών; Ποια είναι η διαφορά μεταξύ ενός δεκαεξαδικού κώδικα και ενός κωδικού χρώματος RGB;

Τι είναι ο Hex Code;

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

#FF0092

Σχετιζομαι με: Βασικοί όροι Γραφιστικής που πρέπει να γνωρίζετε

Μπορείτε να καθορίσετε χρώματα στο CSS με μερικούς διαφορετικούς τρόπους. Μπορείτε να χρησιμοποιήσετε τα ονόματα ορισμένων προκαθορισμένων χρωμάτων όπως π.χ το κόκκινο και darkmagenta. Για να καθορίσετε τις ακριβείς αποχρώσεις του χρώματος, ωστόσο, θα χρειαστεί να χρησιμοποιήσετε μια πιο ακριβή μέτρηση: κάτι αριθμητικό.

Το CSS προσφέρει δύο κύριες επιλογές: RGB και hex. Και στις δύο μορφές, καθορίζετε τις ποσότητες κόκκινου, πράσινου και μπλε που συνθέτουν το τελικό χρώμα. Το RGB χρησιμοποιεί τρεις αριθμούς μεταξύ 0 και 255. Το Hex κάνει ακριβώς το ίδιο, απλώς με διαφορετική βάση (16) από το δεκαδικό (10) που έχετε συνηθίσει.

Το Hex χρησιμοποιεί τα γράμματα A-F, εκτός από τα ψηφία 0-9, για συνολικά 16 σύμβολα. Το α στο εξάγωνο είναι το ισοδύναμο του 10 στο δεκαδικό. Το F στο εξάγωνο είναι 15 σε δεκαδικό.

Πώς λειτουργούν οι Hex Color Codes;

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

Με 16 × 16 (256) τιμές για κάθε στοιχείο χρώματος, υπάρχουν 256 × 256 × 256 πιθανοί συνδυασμοί. Σε hex, κυμαίνονται από #000000 (καθαρό μαύρο) έως #FFFFFF (καθαρό λευκό).

Πώς να διαβάσετε τους Hex Color Codes

Είναι εύκολο να κατανοήσετε τους εξαγωνικούς χρωματικούς κωδικούς. Ας πάρουμε το παράδειγμα του #FF5733. Αρχικά, χωρίστε τους έξι χαρακτήρες σε τρία μέρη που περιέχουν δύο χαρακτήρες το καθένα. Όπως γνωρίζετε, τα δύο πρώτα μέρη αντιπροσωπεύουν το κόκκινο, τα δεύτερα δύο μέρη αντιπροσωπεύουν το πράσινο και τα τρία δύο μέρη αντιπροσωπεύουν το μπλε. Λοιπόν, στο παράδειγμά μας:

• Το κόκκινο στοιχείο, RR, έχει την τιμή FF.
• Το πράσινο στοιχείο, GG, είναι 57.
• Το μπλε στοιχείο, BB, είναι 33.

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

1. Πολλαπλασιάστε τον πρώτο δεκαεξαδικό χαρακτήρα του RR με 16. Εάν ο χαρακτήρας είναι γράμμα, μετατρέψτε τον στην αντίστοιχη τιμή του. Σε αυτήν την περίπτωση, ο πρώτος χαρακτήρας είναι F που είναι 15. Έτσι, για το παράδειγμά μας, πολλαπλασιάζετε 15 × 16 που ισούται με 240.
2. Στη συνέχεια, προσθέστε τον δεύτερο χαρακτήρα του RR. Και πάλι, μετατρέψτε ένα γράμμα στην αντίστοιχη τιμή του, εάν παραστεί ανάγκη. Στο παράδειγμά μας, ο δεύτερος χαρακτήρας είναι F που ισούται με 15.
3. Μόλις τελειώσετε, προσθέστε τα σύνολα για να πάρετε μια ενιαία τιμή. Εάν προσθέσετε 240 και 15 από το παράδειγμά μας, θα δείτε ότι η τιμή του FF είναι 255.

Επαναλάβετε τον ίδιο τύπο για τα υπόλοιπα δύο τμήματα, το GG που συμβολίζεται με 57 και το BB με το 33. Εάν οι μη αυτόματοι υπολογισμοί φαίνονται υπερβολικά συντριπτικοί, μπορείτε πάντα να χρησιμοποιήσετε ένα εργαλείο μετατροπής hex σε RGB (όπως Μετατροπέας BinaryHex) για να διαβάσετε ένα χρώμα. Θα πρέπει να βρείτε ότι η τιμή του εξαγωνικού #FF5733 είναι ισοδύναμο με rgb (255, 87, 51).

Γιατί ο Hex Color Code είναι τόσο δημοφιλής;

Ενώ υπάρχουν πολλά διαφορετικά μοντέλα χρωμάτων (RGB, CMYK, HSL), οι δεκαεξαδικοί χρωματικοί κωδικοί είναι ίσως η πιο ευρέως χρησιμοποιούμενη αναπαράσταση. Αυτό συμβαίνει γιατί είναι απλά και εύκολα κατανοητά.

Μια μορφή σταθερού πλάτους είναι επίσης πολύ χρήσιμη. Τα δεκαεξαδικά χρώματα πλήρους μήκους είναι πάντα επτά χαρακτήρες, συμπεριλαμβανομένου του κορυφαίου # σύμβολο.

Τα hex χρώματα είναι πολύ αποτελεσματικά, χρησιμοποιώντας μόνο αυτούς τους επτά χαρακτήρες για να αντιπροσωπεύουν περισσότερα από 16 εκατομμύρια χρώματα. Και η διαφοροποίηση μεταξύ αυτών των χρωμάτων είναι μια απλή διαδικασία.

Hex vs. RGB: Υπάρχει κάποια διαφορά;

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

Το Hex χρησιμοποιεί επίσης τρεις αριθμούς για να αναπαραστήσει το κόκκινο, το πράσινο και το μπλε, αλλά χρησιμοποιεί επιπλέον ψηφία (A-F) για να καλύψει τη βάση 16. Δεν υπάρχει διαφορά στα χρώματα που προκύπτουν, είναι απλώς διαφορετικές μορφές για την επικοινωνία των ίδιων πληροφοριών.

Σχετιζομαι με: Βασικές αρχές CSS: Εργασία με χρώματα

Σε τι χρησιμεύει ο Hex Code;

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

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

Ο Hex Color Code δεν είναι Rocket Science

Έτσι, εκεί έχετε τα βασικά των hex χρωματικών κωδικών. Δεν είναι ακριβώς σκληρή επιστήμη, αλλά εξυπηρετούν έναν συγκεκριμένο σκοπό στο σχεδιασμό (και στον κόσμο της τεχνολογίας). Αν ψάχνετε για ένα εργαλείο που θα σας βοηθήσει να κατανοήσετε πώς λειτουργούν τα hex χρώματα ή ένα εργαλείο που θα σας διδάξει τη θεωρία μείξης RGB, υπάρχουν πολλά στο διαδίκτυο. Θυμηθείτε, το κλειδί για να μάθετε οτιδήποτε νέο είναι να το κάνετε ένα βήμα τη φορά.

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

Πώς να βρείτε την τιμή Hex για οποιοδήποτε χρώμα στην οθόνη σας

Μάθετε πώς να διαλέγετε οποιαδήποτε τιμή χρώματος από την οθόνη σας σε δευτερόλεπτα. Ιδιαίτερα χρήσιμο για σχεδιαστές ιστοσελίδων!

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα