Οδηγοί για το χρώμα
Σύντομοι, πρακτικοί οδηγοί για το χρώμα στις οθόνες: μορφές, αντίθεση, παλέτες, σκοτεινή λειτουργία και CSS. Κάθε αριθμός είναι υπολογισμένος και κάθε παράδειγμα αντιγράφεται.
- Τι είναι το OKLCH: η μορφή χρώματος που επιτέλους συμφωνεί με το μάτιΤο OKLCH περιγράφει ένα χρώμα με βάση το πόσο ανοιχτό φαίνεται, πόσο έντονο είναι και ποια απόχρωση έχει. Σε αντίθεση με το HSL, η ίδια τιμή φωτεινότητας φαίνεται πράγματι εξίσου φωτεινή σε κάθε απόχρωση, κι έτσι οι παλέτες, οι καταστάσεις hover και η προσβάσιμη αντίθεση γίνονται προβλέψιμες.28 Σεπτεμβρίου 20264 λεπ. ανάγνωσης
- APCA ή WCAG 2: ποιον έλεγχο αντίθεσης να εμπιστευτείτεΤους λόγους αντίθεσης του WCAG 2 ζητά ο νόμος. Το APCA είναι νεότερο μοντέλο που προβλέπει πολύ καλύτερα την αναγνωσιμότητα, ιδίως σε σκοτεινά θέματα και κορεσμένα χρώματα. Αν ελέγχετε και τα δύο, παίρνετε κείμενο που είναι σύμφωνο με τους κανόνες και διαβάζεται πραγματικά εύκολα.28 Σεπτεμβρίου 20263 λεπ. ανάγνωσης
- Χρωματικό εύρος (gamut): sRGB, Display P3 και χρώματα εκτός εύρουςΤο χρωματικό εύρος (gamut) είναι το σύνολο των χρωμάτων που μπορεί να δείξει μια οθόνη ή ένας χρωματικός χώρος. Το web χτίστηκε πάνω στο sRGB, όμως τα περισσότερα κινητά και πολλά laptop δείχνουν πλέον Display P3, με αισθητά πιο έντονα κόκκινα, πράσινα και πορτοκαλί.28 Σεπτεμβρίου 20262 λεπ. ανάγνωσης
- Μορφές χρωμάτων: HEX, RGB, HSL, OKLCH και οι υπόλοιπεςΤο ίδιο χρώμα γράφεται με δώδεκα διαφορετικούς τρόπους. Δείτε τι σημαίνει κάθε μορφή, πότε τη χρησιμοποιείτε και πώς φαίνεται το ίδιο χρώμα σε όλες.28 Σεπτεμβρίου 20262 λεπ. ανάγνωσης
- Κωδικοί χρωμάτων HEX: πώς λειτουργεί το #RRGGBBΈνας κωδικός χρώματος HEX όπως το #1e90ff είναι τρία ζεύγη δεκαεξαδικών ψηφίων: η ποσότητα κόκκινου, πράσινου και μπλε φωτός, το καθένα από 00 (καθόλου) έως ff (πλήρες, 255). Προσθέστε ένα τέταρτο ζεύγος για την αδιαφάνεια: το 80 σημαίνει περίπου 50%, το ff πλήρως συμπαγές.28 Σεπτεμβρίου 20266 λεπ. ανάγνωσης
- Πώς επιλέγετε παλέτα χρωμάτων για ιστοσελίδα ή εφαρμογήΞεκινήστε από ένα χρώμα της μάρκας σας, φτιάξτε από αυτό μια κλίμακα από 50 έως 950, προσθέστε γκρι με ελαφριά χροιά και τέσσερα χρώματα κατάστασης και μετά ελέγξτε κάθε ζεύγος κειμένου για αντίθεση και αχρωματοψία. Διαλέξτε τόνους με βάση τη φωτεινότητα OKLCH, όχι με το μάτι: σε λευκό φόντο το κείμενο περνά το WCAG AA μόλις η φωτεινότητα πέσει περίπου στο 0,55, όποια κι αν είναι η απόχρωση.28 Σεπτεμβρίου 20267 λεπ. ανάγνωσης
- Χρώματα για σκοτεινή λειτουργία: πώς να διαλέξετε φόντο, κείμενο και χρώματα έμφασηςΧρησιμοποιήστε σκούρο γκρι φόντο, όπως το #121212, αντί για καθαρό μαύρο, υπόλευκο κείμενο, όπως το #e5e5e5, αντί για καθαρό λευκό, και πιο ανοιχτές, λιγότερο κορεσμένες εκδοχές των χρωμάτων της μάρκας σας. Ελέγξτε το κείμενο με APCA εκτός από το WCAG 2, γιατί το WCAG 2 υπερεκτιμά την αντίθεση σε σκούρα φόντα.28 Σεπτεμβρίου 20267 λεπ. ανάγνωσης
- Χρωματικοί συνδυασμοί: συμπληρωματικά, ανάλογα, τριαδικά χρώματα και άλλαΈνας χρωματικός συνδυασμός διαλέγει αποχρώσεις σε σταθερές γωνίες πάνω στον χρωματικό κύκλο: 180° μεταξύ τους για τα συμπληρωματικά, 30° για τα ανάλογα, 120° για τα τριαδικά. Περιστρέψτε την απόχρωση σε OKLCH αντί για HSL και τα χρώματα θα μείνουν εξίσου φωτεινά, ώστε καμία απόχρωση να μην πετάγεται κατά λάθος.28 Σεπτεμβρίου 20266 λεπ. ανάγνωσης
- CSS color-mix() και σχετικά χρώματα: ανοιχτοί τόνοι, hover και διαφάνειαΤο color-mix() αναμειγνύει δύο χρώματα σε έναν χρωματικό χώρο της επιλογής σας, ενώ η σύνταξη σχετικών χρωμάτων (relative color syntax) σάς επιτρέπει να αλλάξετε ένα μόνο κανάλι ενός υπάρχοντος χρώματος, π.χ. oklch(from var(--brand) calc(l - 0.1) c h). Και τα δύο υπολογίζονται στο πρόγραμμα περιήγησης, δουλεύουν με μεταβλητές CSS και αντικαθιστούν τις περισσότερες συναρτήσεις χρώματος της Sass. Για ανοιχτούς τόνους και hover αναμείξτε σε oklab, για διαφάνεια σε srgb.28 Σεπτεμβρίου 20267 λεπ. ανάγνωσης
- Παλέτες φιλικές στην αχρωματοψία: πώς να ελέγξετε και να διορθώσετε τα χρώματά σαςΜια παλέτα φιλική στην αχρωματοψία κρατά κάθε ζεύγος χρωμάτων διακριτό σε πρωτανωπία, δευτερανωπία, τριτανωπία και σε κλίμακα του γκρι. Η πιο αξιόπιστη λύση δεν είναι κάποια ειδική απόχρωση αλλά η διαφορά φωτεινότητας: χρώματα με απόσταση περίπου 0,2 στη φωτεινότητα OKLCH έμειναν διακριτά σε κάθε προσομοίωση που κάναμε. Συνδυάστε τη με εικονίδια ή ετικέτες, γιατί το χρώμα από μόνο του πάντα αφήνει κάποιον απέξω.28 Σεπτεμβρίου 20267 λεπ. ανάγνωσης
- Χρώματα Tailwind CSS: η παλέτα OKLCH της v4, δικά σας χρώματα και τόνοιΤο Tailwind CSS v4 έχει 26 χρωματικές κλίμακες με 11 τόνους η καθεμία, από 50 έως 950, δηλαδή 286 χρώματα ορισμένα σε OKLCH ως μεταβλητές CSS, όπως η --color-blue-500. Προσθέτετε δικά σας με @theme { --color-brand-500: oklch(...) }. Ο ίδιος αριθμός τόνου δεν σημαίνει ίδια φωτεινότητα: το blue-600 είναι το πιο ανοιχτό μπλε που περνά το 4,5:1 σε λευκό, ενώ το κίτρινο χρειάζεται 700.28 Σεπτεμβρίου 20267 λεπ. ανάγνωσης