Άρθρο
Εργαλεία χρωμάτων για το web: hex, παλέτες και προσβασιμότητα
Η επιλογή χρωμάτων για έναν ιστότοπο φαίνεται απλή μέχρι να βρεθείτε αντιμέτωποι με κωδικούς hex, τριάδες RGB και γωνίες HSL που όλα περιγράφουν το ίδιο πράγμα με διαφορετικούς τρόπους. Το άρθρο αυτό εξηγεί πώς σχετίζονται αυτές οι μορφές, πώς να μετατρέψετε ένα μοναδικό εταιρικό χρώμα σε μια χρήσιμη παλέτα, και πώς να βεβαιωθείτε ότι το αποτέλεσμα παραμένει ευανάγνωστο για ανθρώπους που βλέπουν το χρώμα διαφορετικά.
Τα hex, RGB και HSL περιγράφουν το ίδιο χρώμα
Ένα χρώμα στην οθόνη προκύπτει από την ανάμειξη κόκκινου, πράσινου και μπλε φωτός. Η σημειογραφία hex γράφει αυτά τα τρία κανάλια ως έναν εξαψήφιο κωδικό όπως #2563eb, όπου κάθε ζεύγος χαρακτήρων είναι ένα κανάλι από 00 έως ff. Το RGB γράφει τους ίδιους τρεις αριθμούς σε δεκαδική μορφή, από 0 έως 255, που είναι ευκολότερο να διαβαστεί αλλά δεν προσθέτει τίποτα περισσότερο. Το HSL ακολουθεί διαφορετική προσέγγιση: περιγράφει ένα χρώμα μέσω της απόχρωσής του (μια θέση στον χρωματικό τροχό από 0 έως 360 μοίρες), του κορεσμού του (πόσο ζωντανό είναι) και της φωτεινότητάς του (πόσο κοντά είναι στο λευκό ή στο μαύρο). Το HSL είναι η μορφή που προτιμούν οι σχεδιαστές όταν θέλουν να ρυθμίσουν ένα χρώμα, επειδή η αύξηση της φωτεινότητας ή η μετατόπιση της απόχρωσης αποτελεί μία διαισθητική αλλαγή αντί για τρεις συνδεδεμένους αριθμούς. Ένας μετατροπέας σας επιτρέπει να μετακινείστε ανάμεσα και στα τρία, ώστε να διαβάζετε μια τιμή σε μία μορφή και να τη χρησιμοποιείτε σε άλλη.
Μετατροπή ενός χρώματος σε παλέτα
Ένα μόνο εταιρικό χρώμα σπάνια αρκεί. Μια παλέτα που λειτουργεί χρειάζεται συνήθως ένα κύριο χρώμα, μία ή δύο πινελιές έμφασης, και ένα σύνολο ουδέτερων γκρι για κείμενο και φόντο. Οι σχέσεις μεταξύ των χρωμάτων ακολουθούν απλούς κανόνες στον χρωματικό τροχό: τα συμπληρωματικά χρώματα βρίσκονται απέναντι το ένα από το άλλο, τα ανάλογα χρώματα βρίσκονται δίπλα δίπλα για μια ήρεμη αίσθηση, και ένα τριαδικό σύνολο κατανέμει τρία χρώματα ομοιόμορφα για αντίθεση χωρίς να συγκρούονται. Ένα εργαλείο χρωματικού σχήματος εφαρμόζει αυτούς τους κανόνες στο αρχικό σας χρώμα και σας δίνει τους αντίστοιχους κωδικούς hex, ώστε να μην χρειάζεται να υπολογίζετε τις γωνίες με το χέρι. Αν έχετε ήδη μια εικόνα της οποίας τη διάθεση συμπαθείτε, ένας εξαγωγέας παλέτας διαβάζει τα κυρίαρχα χρώματα από αυτήν, που αποτελεί έναν γρήγορο τρόπο να βασίσετε έναν ιστότοπο σε μια φωτογραφία ή ένα λογότυπο.
Αντίθεση και δυσχρωματοψία
Μια παλέτα που φαίνεται ωραία στη δική σας οθόνη μπορεί παρ’ όλα αυτά να αποτύχει για τους αναγνώστες. Περίπου ένας στους δώδεκα άνδρες και μία στις διακόσιες γυναίκες έχουν κάποια μορφή ελλιπούς αντίληψης χρωμάτων, συνηθέστερα δυσκολία στον διαχωρισμό του κόκκινου από το πράσινο. Αν το μόνο σήμα σας για ένα σφάλμα είναι κόκκινο κείμενο σε ένα πράσινο κουμπί, αυτοί οι αναγνώστες το χάνουν. Η λύση δεν είναι να αποφεύγετε το χρώμα αλλά να μην βασίζεστε ποτέ μόνο στο χρώμα: συνδυάστε το με ένα εικονίδιο, μια ετικέτα ή ένα σχήμα, και διατηρήστε αρκετή αντίθεση φωτεινότητας ανάμεσα στο κείμενο και το φόντο του. Ένας προσομοιωτής δυσχρωματοψίας σας δείχνει πώς φαίνεται η παλέτα σας υπό τους συνηθισμένους τύπους χρωματικής αντίληψης, ώστε να εντοπίσετε ένα πρόβλημα πριν δημοσιευτεί αντί μετά από κάποιο παράπονο.
Κάνοντας όλα αυτά μέσα στον περιηγητή
Κανένα από αυτά τα βήματα δεν χρειάζεται διακομιστή. Η μετατροπή ενός κωδικού hex, η δημιουργία ενός σχήματος, η ανάγνωση χρωμάτων από μια εικόνα και η προσομοίωση δυσχρωματοψίας είναι όλες μικρές υπολογιστικές εργασίες που ο περιηγητής χειρίζεται ακαριαία. Αυτό έχει σημασία όταν η εικόνα που δειγματίζετε είναι ένα αδημοσίευτο σχέδιο ή το λογότυπο ενός πελάτη: με τα εργαλεία εδώ, το αρχείο παραμένει στη συσκευή σας και τίποτα δεν ανεβαίνει. Παίρνετε το ίδιο αποτέλεσμα που θα είχατε από μια διαδικτυακή υπηρεσία, χωρίς να παραδώσετε το γραφικό. Ο μετατροπέας χρωμάτων, η γεννήτρια χρωματικού σχήματος, ο εξαγωγέας παλέτας και ο προσομοιωτής δυσχρωματοψίας τρέχουν όλα τοπικά και λειτουργούν με τον ίδιο τρόπο εκτός σύνδεσης μόλις φορτωθεί η σελίδα.
OKLCH και ευρύτεροι χώροι χρώματος
Τα Hex, RGB και HSL περιγράφουν χρώματα εντός της γκάμας sRGB που χρησιμοποιούν οι οθόνες εδώ και χρόνια. Οι νεότερες οθόνες αποδίδουν περισσότερα χρώματα, και το CSS μπορεί πλέον να τα προσπελάσει με τη συνάρτηση color() και τον χώρο Display P3, που προσθέτει ζωηρά πράσινα και κόκκινα που δεν μπορεί να αναπαραστήσει το sRGB. Η μεγαλύτερη αλλαγή είναι το OKLCH, ένας τρόπος γραφής χρώματος ως φωτεινότητα, χρωματική ένταση και απόχρωση που αντικατοπτρίζει τον τρόπο με τον οποίο το μάτι αντιλαμβάνεται πραγματικά τη φωτεινότητα. Στο HSL, ένα κίτρινο και ένα μπλε με την ίδια φωτεινότητα 50% φαίνονται εντελώς διαφορετικά: το κίτρινο διαβάζεται ως φωτεινό, το μπλε ως σκοτεινό. Στο OKLCH, αν κρατήσετε σταθερή τη φωτεινότητα και αλλάξετε μόνο την απόχρωση, η αντιληπτή φωτεινότητα παραμένει σταθερή. Αυτό καθιστά πρακτικό το χτίσιμο μιας παλέτας όπου κάθε απόχρωση πληροί τον ίδιο στόχο αντίθεσης κλειδώνοντας έναν αριθμό, αντί να ρυθμίζετε χειροκίνητα κάθε χρώμα.
Εργαλεία αυτού του άρθρου
- Μετατροπέας ΧρωμάτωνΜετατρέψτε χρώματα μεταξύ HEX, RGB, HSL, HSV και CMYK. Περιλαμβάνεται έλεγχος αντίθεσης WCAG. Χωρίς μεταφόρτωση.
- Γεννήτρια Χρωματικού ΣχήματοςΔημιουργήστε συμπληρωματικές, ανάλογες, τριαδικές, τετραδικές και μονοχρωματικές παλέτες από ένα βασικό χρώμα. Χωρίς μεταφόρτωση.
- Εξαγωγέας χρωματικής παλέταςΕξαγωγή κυρίαρχων χρωμάτων από μια εικόνα ως δείγματα HEX. Αντιγράψτε οποιοδήποτε χρώμα. Χωρίς μεταφόρτωση.
- Προσομοιωτής αχρωματοψίαςΠροσομοιώστε πρωτανοπία, δευτερανοπία, τριτανοπία και ολική αχρωματοψία σε μια εικόνα. Χωρίς μεταφόρτωση.
Συχνές ερωτήσεις
Ποια είναι η διαφορά ανάμεσα στο hex και το RGB;
Είναι δύο τρόποι γραφής του ίδιου χρώματος. Το hex συμπυκνώνει τα κανάλια κόκκινου, πράσινου και μπλε σε έναν εξαψήφιο κωδικό στη βάση 16, ενώ το RGB απαριθμεί τα ίδια τρία κανάλια ως δεκαδικούς αριθμούς από 0 έως 255. Το #ff0000 και το rgb(255, 0, 0) είναι το ίδιο ακριβώς κόκκινο. Το hex είναι συμπαγές και συνηθισμένο σε CSS και αρχεία σχεδίασης, το RGB διαβάζεται ευκολότερα με μια ματιά, και η μετατροπή μεταξύ τους δεν αλλάζει τίποτα στο ίδιο το χρώμα.
Πώς ξέρω αν τα χρώματά μου είναι ευανάγνωστα για χρήστες με δυσχρωματοψία;
Περάστε την παλέτα σας μέσα από έναν προσομοιωτή δυσχρωματοψίας, ο οποίος αναπαριστά τα χρώματά σας όπως θα τα έβλεπε κάποιος με κάθε συνηθισμένο τύπο χρωματικής αντίληψης. Προσέξτε τα ζεύγη που καταρρέουν στην ίδια απόχρωση, ειδικά τα κόκκινα και τα πράσινα. Η ασφαλέστερη συνήθεια είναι να μην χρησιμοποιείτε ποτέ το χρώμα ως μόνη ένδειξη: ενισχύστε το με κείμενο, ένα εικονίδιο ή ένα μοτίβο, και διατηρήστε μια σαφή διαφορά φωτεινότητας ανάμεσα στο προσκήνιο και το φόντο, ώστε το νόημα να επιβιώνει ακόμη και όταν η απόχρωση δεν επιβιώνει.