Σε ένα site κάθε χρώμα έχει δουλειά: φόντο, κείμενο, κουμπιά, σύνδεσμοι και ειδοποιήσεις. Αυτές οι 12 παλέτες είναι φτιαγμένες ακριβώς γι’ αυτό, με ανοιχτό ή σκούρο φόντο, ευανάγνωστο χρώμα κειμένου και χρώμα έμφασης για τα κουμπιά. Αντίγραψε τους κωδικούς HEX κατευθείαν στο CSS ή στον editor του site σου.
Καθαρό μπλε για SaaS
Σχεδόν λευκό φόντο, πολύ σκούρο μπλε κείμενο και κουμπιά σε ζωηρό μπλε.
Λιτή εταιρική
Για δικηγορικά γραφεία, συμβουλευτικές ή βιομηχανικές εταιρείες.
Ζεστό e-shop
Το πορτοκαλί αναδεικνύει τα κουμπιά αγοράς σε ζεστό φόντο.
Σκοτεινή λειτουργία με πράσινο
Σκούρα φόντα σε στρώσεις, ανοιχτό κείμενο και πράσινο για τις ενέργειες.
Φυσική και οργανική
Για καταστήματα φυσικών προϊόντων, φυτώρια ή ευεξία.
Φιλικά παστέλ
Φιλόξενη. Το σκούρο μπλε-γκρι κρατά το κείμενο ευανάγνωστο.
Περιοδικό με κόκκινο
Για blogs, περιοδικά και μέσα ενημέρωσης. Το κόκκινο σημαδεύει συνδέσμους και τίτλους.
Τεχνολογικό μωβ
Συχνή σε ψηφιακά προϊόντα, online μαθήματα και εργαλεία AI.
Τιρκουάζ και κοραλλί
Δύο συμπληρωματικά χρώματα έμφασης: ένα για κουμπιά κι ένα για ειδοποιήσεις.
Σκοτεινή πολυτέλεια
Για ξενοδοχεία, εστιατόρια ή premium μάρκες όπου πρωταγωνιστούν οι φωτογραφίες.
Υγεία και ευεξία
Καθαρή και ήρεμη. Καλή για κλινικές και θεραπείες.
Άμμος και πετρόλ
Ζεστή και ταυτόχρονα σοβαρή. Για τουρισμό, μεσιτικά ή καφέ.
Πάτησε ένα χρώμα για να αντιγράψεις τον κωδικό HEX του. Το εικονίδιο με το μολύβι ανοίγει την παλέτα στον επεξεργαστή για να την αλλάξεις.
Εφάρμοσε τον κανόνα 60-30-10
Βάλε το κυρίαρχο χρώμα (συνήθως το φόντο) σε περίπου 60% της σελίδας, το δευτερεύον σε 30% (ενότητες, κάρτες, κεφαλίδες) και το χρώμα έμφασης στο υπόλοιπο 10%. Κράτα το χρώμα έμφασης για κουμπιά και συνδέσμους, ώστε ο χρήστης να ξέρει πού να κάνει κλικ.
Έλεγξε την αντίθεση του κειμένου
Οι οδηγίες προσβασιμότητας WCAG ζητούν αντίθεση τουλάχιστον 4,5:1 για κανονικό κείμενο. Το ανοιχτό γκρι σε λευκό δείχνει κομψό, αλλά διαβάζεται δύσκολα, ειδικά στο κινητό κάτω από τον ήλιο. Πριν δημοσιεύσεις, χρησιμοποίησε ένα εργαλείο ελέγχου αντίθεσης.
Όρισε χρώματα για καταστάσεις και ειδοποιήσεις
Εκτός από τα χρώματα της μάρκας, ένα site χρειάζεται χρώματα για σφάλματα (κόκκινο), επιτυχία (πράσινο) και προειδοποιήσεις (κίτρινο ή πορτοκαλί). Διάλεξε αποχρώσεις που δένουν με την παλέτα σου και χρησιμοποίησέ τις πάντα με τον ίδιο τρόπο σε φόρμες και μηνύματα.
Συνήθως αρκούν τρία ή τέσσερα: φόντο, χρώμα κειμένου, βασικό χρώμα και χρώμα έμφασης, συν τα χρώματα για τις ειδοποιήσεις.
Ποιο είναι το καλύτερο χρώμα για τα κουμπιά ενός site;
Δεν υπάρχει ένα καλύτερο χρώμα. Το σημαντικό είναι το κουμπί να έχει αντίθεση με το φόντο και αυτό το χρώμα να μη χρησιμοποιείται για τίποτε άλλο στη σελίδα.
Πώς ορίζω την παλέτα χρωμάτων στο site μου;
Αντίγραψε τους κωδικούς HEX στις μεταβλητές χρωμάτων του CSS σου ή στις γενικές ρυθμίσεις χρωμάτων του editor σου, για παράδειγμα στο WordPress, στο Wix ή στο Shopify.