Γιατί μια καλή παλέτα χρωμάτων στηρίζει ολόκληρο το σχέδιο
Επιλέξτε τα λάθος χρώματα και ο κόσμος το νιώθει πριν καν μπορέσει να το ονομάσει. Μια σελίδα φαίνεται φτηνή, ένα λογότυπο δείχνει θολό, ένα γράφημα μετατρέπεται σε θόρυβο. Επιλέξτε τα σωστά και η δουλειά απλώς κάνει κλικ: νιώθει σκόπιμη, ήρεμη, εύκολη στη σάρωση. Το χρώμα κάνει πολλή σιωπηλή δουλειά, ορίζοντας τη διάθεση, καθοδηγώντας το μάτι, και λέγοντας σε έναν αναγνώστη τι έχει σημασία περισσότερο. Οπότε μια παλέτα δεν είναι διακόσμηση που προσθέτετε στο τέλος. Είναι μια απόφαση που παίρνετε νωρίς, και σχεδόν όλα τα υπόλοιπα βασίζονται πάνω της.
Τα καλά νέα είναι ότι δεν χρειάζεστε πτυχίο καλών τεχνών για να πετύχετε ένα στέρεο σχήμα. Χρειάζεστε μια χούφτα κανόνων από τη θεωρία χρωμάτων και έναν γρήγορο τρόπο να δοκιμάσετε ιδέες. Ακριβώς αυτό κάνει μια γεννήτρια: σας επιτρέπει να περιηγηθείτε σε δεκάδες συνδυασμούς στον χρόνο που παλιά χρειαζόταν για να ασχοληθείτε με έναν.
Θεωρία χρωμάτων, χωρίς ορολογία
Οι περισσότερες αρμονίες προέρχονται από μία απλή ιδέα: πού βρίσκονται τα χρώματα στον τροχό σε σχέση μεταξύ τους. Μάθετε τέσσερα μοτίβα και μπορείτε να διαβάσετε ή να φτιάξετε σχεδόν κάθε σχήμα.
- Συμπληρωματική χρησιμοποιεί δύο χρώματα ακριβώς αντίθετα το ένα στο άλλο, όπως μπλε και πορτοκαλί. Είναι υψηλής ενέργειας και εξαιρετική για να τραβήξει την προσοχή, αν και υπερβολική χρήση και των δύο μπερδεύει την εστίαση, οπότε αφήστε το ένα να ηγείται και χρησιμοποιήστε το άλλο ως τόνο.
- Αναλογική χρησιμοποιεί τρία χρώματα που βρίσκονται δίπλα-δίπλα, όπως κόκκινο, πορτοκαλί, και κίτρινο. Είναι χαμηλής αντίθεσης, ήρεμη, και το είδος αρμονίας που βλέπετε παντού στη φύση. Ξεκούραστη στα μάτια, αλλά μπορεί να χρειαστεί να προσθέσετε αντίθεση κάπου ώστε τα πράγματα να μη γίνουν επίπεδα.
- Τριαδική χρησιμοποιεί τρία χρώματα ομοιόμορφα κατανεμημένα γύρω από τον τροχό, όπως κόκκινο, κίτρινο, και μπλε. Φωτεινή και ισορροπημένη, λειτουργεί καλύτερα όταν ένα χρώμα κυριαρχεί και τα άλλα δύο παίζουν υποστηρικτικό ρόλο.
- Μονοχρωματική μένει σε μία απόχρωση και ποικίλλει τη φωτεινότητα και τον κορεσμό της. Είναι το πιο αλάνθαστο σχήμα που υπάρχει, καθαρό και συνεκτικό, και μια καλή εναλλακτική όταν τίποτα άλλο δεν φαίνεται σωστό.
Μια τυχαία γεννήτρια είναι διασκεδαστική για έμπνευση, αλλά οι λειτουργίες αρμονίας είναι εκεί όπου βρίσκεται η πραγματική αξία. Κρατούν τα χρώματά σας μαθηματικά συνδεδεμένα, οπότε φαίνονται σαν να ανήκουν μαζί ακόμη και πριν πειράξετε οτιδήποτε.
HEX, RGB, και HSL σε απλά λόγια
Κάθε χρώμα που αντιγράφετε έρχεται σε μερικές σημειογραφίες, και όλες περιγράφουν το ίδιο πράγμα διαφορετικά.
HEX είναι ο εξαψήφιος κωδικός που βλέπετε συχνότερα, όπως #3A7BD5. Είναι απλώς κόκκινο, πράσινο, και μπλε πακεταρισμένα σε μία συμβολοσειρά, δύο χαρακτήρες το καθένα. Είναι συμπαγής και είναι αυτό που θα επικολλήσετε σε CSS ή σε εργαλείο σχεδίασης.
RGB γράφει τα ίδια τρία κανάλια ως αριθμούς από 0 έως 255, όπως rgb(58, 123, 213). Ίδιο χρώμα, πιο φιλικό στην ανάγνωση, και βολικό όταν θέλετε ένα κανάλι alpha για διαφάνεια.
HSL περιγράφει το χρώμα με τον τρόπο που πραγματικά σκέφτεται ο κόσμος: hue (ποιο χρώμα, 0 έως 360 μοίρες γύρω από τον τροχό), saturation (πόσο ζωντανό), και lightness (πόσο φωτεινό). Είναι το πιο εύκολο μορφότυπο για χειροκίνητο πειραγμα, αφού το σκάλισμα της φωτεινότητας ή του κορεσμού κάνει ακριβώς αυτό που θα περιμένατε χωρίς εικασίες. Αν χρειαστεί ποτέ να μετακινηθείτε μεταξύ μορφών, μια γρήγορη μετατροπή HEX σε RGB το κάνει ανώδυνο.
Μην ξεχνάτε την αντίθεση και την προσβασιμότητα
Μια παλέτα μπορεί να φαίνεται υπέροχη και ακόμη να αποτυγχάνει τη στιγμή που κάποιος προσπαθεί να διαβάσει κείμενο πάνω της. Η αντίθεση είναι εκεί όπου η ομορφιά συναντά τη χρηστικότητα. Οι Web Content Accessibility Guidelines (Οδηγίες Προσβασιμότητας Περιεχομένου Ιστού) θέτουν έναν σαφή πήχη: το κανονικό κείμενο σώματος πρέπει να πετυχαίνει αναλογία αντίθεσης τουλάχιστον 4,5:1 έναντι του φόντου του, και το μεγάλο κείμενο τουλάχιστον 3:1. Αυτό δεν είναι γραφειοκρατία, είναι η διαφορά ανάμεσα σε έναν αναγνώστη που περνά εύκολα τη σελίδα σας και έναν που στραβίζει, τα παρατάει, και φεύγει.
Η πρακτική κίνηση είναι να δοκιμάζετε τα ζεύγη προσκηνίου και φόντου σας καθώς χτίζετε, όχι μετά. Ένα ανοιχτό γκρι σε λευκό μπορεί να φαίνεται κομψό σε ένα mockup και να γίνει αόρατο σε ένα κινητό στο φως της ημέρας. Όταν ένας συνδυασμός αποτυγχάνει, συνήθως χρειάζεται μόνο να κάνετε ένα χρώμα πιο σκούρο ή πιο ανοιχτό, όχι να πετάξετε όλο το σχήμα. Κρατήστε τα φωτεινά χρώματα τόνου για κουμπιά, συνδέσμους, και επισημάνσεις αντί για μεγάλα κομμάτια κειμένου, και θα αποφύγετε τα περισσότερα προβλήματα αντίθεσης πριν καν ξεκινήσουν.
Μια πρακτική ροή εργασίας
Να μια ροή που αντέχει σε όλα τα έργα. Ξεκινήστε με ένα χρώμα-άγκυρα για το οποίο είστε σίγουροι, συχνά ένα χρώμα μάρκας ή μια απόχρωση που ταιριάζει με τη διάθεση που θέλετε. Κλειδώστε το, και μετά αφήστε τη γεννήτρια να χτίσει μια αρμονία γύρω του. Κάντε κύκλο μέσα από συμπληρωματική, αναλογική, και τριαδική έως ότου κάτι νιώσει σωστό, και μην το σκέφτεστε υπερβολικά στο πρώτο πέρασμα· κυνηγάτε μια κατεύθυνση, όχι την τελική απάντηση.
Μόλις έχετε έναν υποψήφιο, αναθέστε ρόλους. Επιλέξτε ένα κυρίαρχο χρώμα για φόντα και μεγάλες περιοχές, ένα δευτερεύον για δομή, και έναν έντονο τόνο για τα κομμάτια που πρέπει να ξεχωρίσουν. Ένας χαλαρός διαχωρισμός 60-30-10, κυρίαρχο προς δευτερεύον προς τόνο, κρατά τα πράγματα ισορροπημένα χωρίς να νιώθουν άκαμπτα. Μετά ελέγξτε την αντίθεση σε κάθε ζευγάρι κειμένου, αντιγράψτε τους κωδικούς hex, και τελειώσατε. Αποθηκεύστε αυτά που λειτουργούν, γιατί μια παλέτα που πετύχατε για ένα έργο είναι συχνά ο σπόρος για το επόμενο. Όταν είστε έτοιμοι να συνεχίσετε να χτίζετε, η υπόλοιπη συλλογή μας από όλες τις γεννήτριες μπορεί να χειριστεί τα υπόλοιπα κομμάτια.
Συχνές ερωτήσεις
Είναι δωρεάν αυτή η γεννήτρια παλετών χρωμάτων;
Ναι. Λειτουργεί εξ ολοκλήρου στον περιηγητή σας, δεν χρειάζεται εγγραφή, και μπορείτε να δημιουργήσετε όσες παλέτες θέλετε χωρίς κόστος.
Ποια είναι η διαφορά ανάμεσα σε μια τυχαία παλέτα και μια αρμονική;
Μια τυχαία παλέτα σας δίνει πέντε άσχετα χρώματα για έμπνευση. Ένα αρμονικό σχήμα, όπως συμπληρωματικό ή τριαδικό, κρατά τα χρώματα μαθηματικά συνδεδεμένα στον τροχό χρωμάτων, οπότε φαίνονται ισορροπημένα και σκόπιμα μαζί.
Πώς αντιγράφω έναν κωδικό χρώματος;
Κάντε κλικ στον κωδικό hex κάτω από οποιοδήποτε δείγμα και αντιγράφεται στο πρόχειρό σας. Μπορείτε στη συνέχεια να τον επικολλήσετε απευθείας σε CSS, σε εργαλείο σχεδίασης, ή οπουδήποτε αλλού τον χρειάζεστε.
Τι σημαίνει η αντίθεση WCAG και γιατί με αφορά;
Το WCAG είναι το πρότυπο προσβασιμότητας ιστού. Ζητά αναλογία αντίθεσης τουλάχιστον 4,5:1 ανάμεσα σε κανονικό κείμενο και το φόντο του ώστε ο κόσμος να μπορεί να διαβάσει το περιεχόμενό σας άνετα, συμπεριλαμβανομένων ατόμων με χαμηλή όραση.
Ποια αρμονία χρωμάτων πρέπει να επιλέξω;
Εξαρτάται από τη διάθεση. Η συμπληρωματική είναι τολμηρή και υψηλής ενέργειας, η αναλογική είναι ήρεμη και φυσική, η τριαδική είναι ζωντανή και ισορροπημένη, και η μονοχρωματική είναι καθαρή και αλάνθαστη. Δοκιμάστε μερικές και δείτε ποια ταιριάζει στο έργο σας.
Μπορώ να μετατρέψω τα χρώματα σε RGB ή HSL;
Ναι. Κάθε χρώμα αντιστοιχεί σε HEX, RGB, και HSL αφού όλα περιγράφουν την ίδια τιμή. Χρησιμοποιήστε το εργαλείο HEX σε RGB μας αν χρειαστεί να αλλάξετε μορφότυπα γρήγορα.