Σε μια εφαρμογή τα χρώματα δείχνουν πού πατάς, τι είναι ενεργό και τι πέτυχε ή απέτυχε. Αυτές οι 12 παλέτες έχουν φόντο, επιφάνειες, βασικό χρώμα και κείμενο ανάλογα με το είδος της εφαρμογής, με κωδικούς HEX για Figma, Flutter, SwiftUI ή React Native.
Fintech μπλε και πράσινο
Το μπλε για εμπιστοσύνη και το πράσινο για υπόλοιπα και επιτυχημένες συναλλαγές.
Πορτοκαλί για delivery φαγητού
Το πορτοκαλί αναδεικνύει τα κουμπιά παραγγελίας και τις προσφορές.
Υγεία και ευεξία
Ήρεμη. Για εφαρμογές ραντεβού με γιατρό, συνήθειες ή παρακολούθηση.
Μωβ σκοτεινή λειτουργία
Πολύ σκούρο γκρι φόντο αντί για καθαρό μαύρο, με ανοιχτό μωβ για έμφαση.
Social ροζ και μωβ
Για social δίκτυα, εφαρμογές γνωριμιών ή δημιουργούς περιεχομένου.
Μίνιμαλ παραγωγικότητα
Πολύ ευανάγνωστη. Για διαχείριση εργασιών και εργαλεία δουλειάς.
Κίτρινο για εκπαίδευση
Χαρούμενη και ξεκάθαρη. Για εφαρμογές γλωσσών ή μάθησης.
Ενεργητικό fitness
Λάιμ και κόκκινο σε σκούρο φόντο. Για προπονήσεις και μετρήσεις.
Λεβάντα για διαλογισμό
Απαλή και χαλαρωτική. Για ύπνο, διαλογισμό ή ημερολόγιο.
Ταξιδιωτικό τιρκουάζ και άμμος
Θυμίζει παραλία και ήλιο. Για κρατήσεις και ταξιδιωτικούς οδηγούς.
Φρέσκο πράσινο για φαγητό
Για σούπερ μάρκετ, συνταγές ή διατροφή.
Premium αγορές
Ουδέτερη και κομψή. Αφήνει τον πρωταγωνιστικό ρόλο στις φωτογραφίες των προϊόντων.
Πάτησε ένα χρώμα για να αντιγράψεις τον κωδικό HEX του. Το εικονίδιο με το μολύβι ανοίγει την παλέτα στον επεξεργαστή για να την αλλάξεις.
Όρισε από την αρχή τα χρώματα καταστάσεων
Κάθε εφαρμογή χρειάζεται χρώματα για σφάλμα, επιτυχία, προειδοποίηση και πληροφορία. Διάλεξε αποχρώσεις που δένουν με την παλέτα σου και μη χρησιμοποιείς το χρώμα του σφάλματος για τίποτε άλλο, για παράδειγμα για τα κουμπιά της μάρκας. Συμπλήρωσε το χρώμα με εικονίδιο ή κείμενο, ώστε το νόημα να μην εξαρτάται μόνο από αυτό.
Σχεδίασε και σκοτεινή λειτουργία
Τα περισσότερα κινητά έχουν σκοτεινή λειτουργία και πολλοί χρήστες την έχουν ενεργή. Δεν αρκεί να αντιστρέψεις τα χρώματα: αντί για καθαρό μαύρο βάλε πολύ σκούρα γκρι και μείωσε λίγο τον κορεσμό στα χρώματα έμφασης, ώστε να μην «τρεμοπαίζουν» στο φόντο.
Έλεγξε την αντίθεση και τις περιοχές αφής
Το κείμενο πρέπει να έχει αντίθεση τουλάχιστον 4,5:1 με το φόντο, κατά τις οδηγίες WCAG. Τα κουμπιά πρέπει να δείχνουν διαφορετικά όταν είναι ενεργά, πατημένα ή ανενεργά. Δοκίμασε την εφαρμογή έξω και με χαμηλή φωτεινότητα, γιατί έτσι τη χρησιμοποιούν πολλοί.
Συνήθως ένα βασικό χρώμα, προαιρετικά ένα δευτερεύον, ουδέτερους τόνους για φόντα και κείμενα και τέσσερα χρώματα καταστάσεων: σφάλμα, επιτυχία, προειδοποίηση και πληροφορία.
Τι χρώμα να βάλω στο βασικό κουμπί της εφαρμογής;
Το βασικό χρώμα της μάρκας σου, αν έχει καλή αντίθεση με το φόντο. Χρησιμοποίησέ το μόνο για την πιο σημαντική ενέργεια σε κάθε οθόνη.