Επιλογή χρώματος

Κάθε χρώμα σε αυτή τη σελίδα ανήκει στον χρωματικό χώρο sRGB, τον προεπιλεγμένο χρωματικό χώρο του web από τότε που τον υιοθέτησαν τα προγράμματα περιήγησης στα τέλη της δεκαετίας του 1990. Μια οθόνη αναμειγνύει κόκκινο, πράσινο και μπλε φως, και κάθε κανάλι έχει 256 επίπεδα (0–255), που δίνουν 16.777.216 πιθανά χρώματα. Το RGB γράφει απευθείας αυτούς τους τρεις αριθμούς· το HEX γράφει τους ίδιους τρεις αριθμούς στο δεκαεξαδικό σύστημα, με δύο ψηφία ο καθένας, άρα το #FF6600 είναι κόκκινο 255, πράσινο 102, μπλε 0. Η σύντομη γραφή με τρία ψηφία διπλασιάζει κάθε ψηφίο: το #F60 ισούται με #FF6600.

Τα HSL και HSB (ονομάζεται και HSV) περιγράφουν τα ίδια χρώματα με τρόπο που προσαρμόζεται πιο εύκολα με το χέρι. Η απόχρωση (hue) είναι γωνία στον χρωματικό τροχό: 0° κόκκινο, 120° πράσινο, 240° μπλε. Η διαφορά βρίσκεται στον τελευταίο αριθμό. Στο HSL, φωτεινότητα 100% είναι πάντα λευκό και 50% είναι η πιο καθαρή εκδοχή της απόχρωσης· στο HSB, φωτεινότητα 100% είναι η καθαρή απόχρωση και το λευκό απαιτεί κορεσμό 0%. Εφαρμογές σχεδίασης όπως το Photoshop και το Figma χρησιμοποιούν HSB στους επιλογείς τους, ενώ η CSS καταλαβαίνει εγγενώς το hsl(), γι' αυτό αναφέρονται και τα δύο παραπάνω.

Οι οθόνες προσθέτουν φως· οι εκτυπωτές το αφαιρούν με μελάνια κυανό, ματζέντα, κίτρινο και μαύρο. Τα δύο συστήματα καλύπτουν διαφορετικά εύρη χρωμάτων, τα λεγόμενα gamut. Πολύ κορεσμένα χρώματα οθόνης, όπως ένα έντονο πράσινο RGB, ένα ηλεκτρικό μπλε ή ένα νέον πορτοκαλί, βρίσκονται εκτός όσων μπορούν να αναπαραγάγουν τα μελάνια τετραχρωμίας, γι' αυτό εκτυπώνονται πιο θαμπά απ' ό,τι φαίνονται σε μια οθόνη.

Οι τιμές CMYK εδώ προκύπτουν από την απλή μαθηματική μετατροπή χωρίς προφίλ ICC, κάτι χρήσιμο για μια πρόχειρη περιγραφή αλλά όχι για το πιεστήριο. Ένα τυπογραφείο μετατρέπει με προφίλ για το χαρτί και το πιεστήριό του, όπως το FOGRA39 στην Ευρώπη ή το GRACoL στις Ηνωμένες Πολιτείες, και το ίδιο χρώμα RGB μπορεί να δώσει διαφορετικά ποσοστά μελανιού σε καθένα. Για εργασίες εκτύπωσης, στείλτε την τιμή RGB ή HEX μαζί με το προφίλ που ζητά το τυπογραφείο σας.

Το WCAG 2.1 συγκρίνει τη σχετική φωτεινότητα δύο χρωμάτων: το ανοιχτότερο συν 0,05, διαιρεμένο με το σκουρότερο συν 0,05. Το αποτέλεσμα κυμαίνεται από 1:1 (ίδια χρώματα) έως 21:1 (μαύρο σε λευκό). Το επίπεδο AA απαιτεί τουλάχιστον 4,5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο, δηλαδή 18 στιγμών ή 14 στιγμών έντονο· το επίπεδο AAA ανεβάζει τα όρια σε 7:1 και 4,5:1. Στοιχεία της διεπαφής, όπως τα περιγράμματα πεδίων και τα εικονίδια, χρειάζονται 3:1 σε σχέση με το περιβάλλον τους σύμφωνα με το κριτήριο επιτυχίας 1.4.11.

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

Η παλέτα εικόνας διαβάζει το αρχείο σας με το canvas του προγράμματος περιήγησης, το μικραίνει σε έως 200 pixel στη μεγάλη πλευρά και ομαδοποιεί παρόμοια pixel με τη μέθοδο median-cut που περιέγραψε ο Paul Heckbert το 1982: το εύρος χρωμάτων χωρίζεται ξανά και ξανά κατά το πλατύτερο κανάλι του μέχρι να μείνουν έξι ομάδες, και ο μέσος όρος κάθε ομάδας γίνεται δείγμα χρώματος. Τα διαφανή pixel αγνοούνται, οπότε ένα λογότυπο σε διαφανές φόντο δίνει τα χρώματα του λογοτύπου.

Όταν έχετε τα χρώματα, ένα επίπεδο λογότυπο συχνά λειτουργεί καλύτερα ως διανυσματικό. Ο μετατροπέας εικόνας σε SVG το μετατρέπει σε σχήματα που διατηρούν αυτά ακριβώς τα χρώματα, και αν σχεδιάζετε κεφαλίδα καναλιού, το εργαλείο αλλαγής μεγέθους banner YouTube προσαρμόζει το γραφικό σε 2560 × 1440 λαμβάνοντας υπόψη την ασφαλή περιοχή.