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

1. Χρησιμοποιήστε μια γνωστή ζυγαριά

Ο ιστότοπος brandcolors.net περιέχει περισσότερους από 500 συνδυασμούς χρωμάτων διάσημων εμπορικών σημάτων. Η Yandex, η Google, η Burger King χρησιμοποιούν την ίδια παλέτα σε όλα τα προϊόντα τους. Αυτές οι μάρκες και τα χρώματά τους είναι γνωστά και αγαπημένα σε πολλούς. Πληκτρολογήστε το όνομα στη γραμμή αναζήτησης ή κάντε κύλιση στη σελίδα, κάντε κλικ στην επιθυμητή μάρκα και χρώμα: ο κώδικάς της θα αντιγραφεί στο πρόχειρο.

2. Επιλέξτε μια έτοιμη επαγγελματική παλέτα

Ο ευκολότερος τρόπος είναι να πάρετε έναν έτοιμο συνδυασμό χρωμάτων. Δεν είναι απαραίτητο να εφευρίσκουμε ξανά τον τροχό κάθε φορά, γιατί οι αρμονικοί συνδυασμοί είναι γνωστοί εδώ και πολύ καιρό. Μεταβείτε στο colordrop.io και επιλέξτε. Υπάρχουν εκατοντάδες επαγγελματικές παλέτες 4 χρωμάτων στον ιστότοπο. Αφού επιλέξετε αυτό που θέλετε, κάντε κλικ και αντιγράψτε τους χρωματικούς κωδικούς από τον πίνακα που ανοίγει στα δεξιά.

Επιπλέον, η υπηρεσία περιέχει μια έτοιμη επιλογή 24 επίπεδων χρωμάτων σχεδιασμού. Κάντε κλικ στα αριστερά κάτω από το όνομα "Flat Colors" και λάβετε τον κωδικό για την απόχρωση που σας αρέσει.

3. Προσδιορίστε τη χρωματική παλέτα της φωτογραφίας ή της εικόνας που σας αρέσει

Αυτή η μέθοδος είναι λίγο πιο περίπλοκη. Αλλά και πιο αποτελεσματικό.

• Στον ιστότοπο coolors.co, στο επάνω αριστερό πλαίσιο, βρείτε το εικονίδιο της κάμερας και κάντε κλικ σε αυτό. Θα ανοίξει ένα παράθυρο μεταφόρτωσης εικόνας.
• Μπορείτε να επιλέξετε μια φωτογραφία ή μια εικόνα με το χρωματικό συνδυασμό που σας αρέσει από τον υπολογιστή σας ή να αντιγράψετε τον σύνδεσμο σε μια κενή στήλη.
• Η υπηρεσία θα καθορίσει τον συνδυασμό των χρωμάτων (κάτω κάτω από τη μεταφορτωμένη εικόνα).
• Μπορείτε να αλλάξετε μεμονωμένα χρώματα αυτής της παλέτας σημειώνοντάς τα και επιλέγοντας ένα σημείο στη φωτογραφία από το οποίο θέλετε να πάρετε το χρώμα.
• Το κουμπί "Κολάζ" αποθηκεύει την παλέτα που προκύπτει με κωδικούς χρωμάτων στον υπολογιστή.
• Το κουμπί "Auto" δημιουργεί νέους συνδυασμούς με βάση την ίδια φωτογραφία.
• Κάντε κλικ στο "Ok" και μεταβείτε στην κύρια σελίδα του ιστότοπου για περαιτέρω εργασία με την παλέτα.

Η κύρια σελίδα του ιστότοπου δεν είναι λιγότερο λειτουργική. Εδώ μπορείτε να επιλέξετε αποχρώσεις μεμονωμένων χρωμάτων ή να συναρμολογήσετε μια νέα παλέτα αντικαθιστώντας μεμονωμένα χρώματα.

4. Δημιουργήστε το δικό σας χρωματικό συνδυασμό online

Ανεβάζοντας μια φωτογραφία στον ίδιο ιστότοπο coolors.co, μπορείτε όχι μόνο να προσδιορίσετε τον κωδικό χρώματος, αλλά και να δημιουργήσετε τους δικούς σας συνδυασμούς. Για να το κάνετε αυτό, πατήστε το πλήκτρο διαστήματος - η υπηρεσία δημιουργεί αυτόματα έναν συνδυασμό 5 χρωμάτων.

Σε κάθε χρώμα 4 κουμπιά εικονιδίων:

• Εναλλακτικές αποχρώσεις - Αποχρώσεις του χρώματος (πιο σκούρο και ανοιχτό),
• Σύρετε (Μετακινήστε ένα χρώμα προς τα δεξιά ή τα αριστερά στην παλέτα),
• Προσαρμογή (Προσαρμογή απόχρωσης, κορεσμού, φωτεινότητας κ.λπ.),
• Κλείδωμα (διορθώστε το χρώμα).

Πώς να διαχειριστείτε την προσοχή των χρηστών σε έναν ιστότοπο; Πώς να επιλέξετε τα σωστά χρώματα για έναν ιστότοπο; Ποια εφαρμογή μπορείτε να χρησιμοποιήσετε για να μάθετε τον κωδικό χρώματος στον ιστότοπο ενός ανταγωνιστή; Θα το εξετάσουμε σήμερα στο άρθρο.

Υπηρεσίες για τον καθορισμό χρωμάτων

• color-hex.com - θα καθορίσει ποια χρώματα είναι δίπλα στο χρώμα σας
• thestocks.im - συσσωρευτής μακέτες, βίντεο, φωτογραφίες, εικονίδια, γραμματοσειρές.
• Το Eye Dropper είναι μια επέκταση για το Google Chrome που σας επιτρέπει να χρησιμοποιήσετε ένα σταγονόμετρο για να μάθετε τον κωδικό οποιουδήποτε χρώματος σε οποιαδήποτε σελίδα στο Διαδίκτυο.
• Adobe Color CC-επιλέξτε συνδυασμούς χρωμάτων. Το Adobe Color CC θα σας βοηθήσει όταν έχετε μια εικόνα και θέλετε να ανεβάσετε τα βασικά της χρώματα. Το πρόγραμμα καθορίζει μια παλέτα 5 κυρίαρχων χρωμάτων στην εικόνα, τα οποία μπορούν να αποθηκευτούν και να χρησιμοποιηθούν σε παρουσιάσεις. Δωρεάν.
• Το Colorzilla είναι μια επέκταση για το Google Chrome και το Mozilla Firefox που περιλαμβάνει εργαλεία επιλογής χρωμάτων, eye-dropper, css gradient generator και εργαλεία προγράμματος περιήγησης παλέτας. Το μόνο που χρειάζεται να κάνετε είναι να δείξετε το σταγονόμετρο στο επιθυμητό χρώμα σε οποιονδήποτε ιστότοπο και να αντιγράψετε τον κώδικα.

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

Ανεβάστε μια εικόνα και φτιάξτε μια παλέτα από αυτήν.

• Coolors.co - ένας πόρος με παλέτες που μπορείτε να δημιουργήσετε μόνοι σας ή να δανειστείτε από τη συλλογή

COLOURlovers - σεμια κοινότητα θαυμαστών χρωμάτων που μοιράζονται παλέτες, χρώματα, φόντο και πρότυπα γραφικών. Υπάρχουν χρωματικές τάσεις από εσωτερικούς χώρους, περιοδικά, ιστοσελίδες ακόμα και μόδα του δρόμου. Στην ενότητα "Αναζήτηση" μπορείτε να βρείτε τα χρώματα και τις παλέτες του συγγραφέα και να κατεβάσετε φόντο για την παρουσίασή σας.

Πώς να επιλέξετε ένα χρώμα για έναν ιστότοπο

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

Στο branding, τα χρώματα έχουν πιο άμεσες έννοιες από ό,τι με τη γενική έννοια. Μπορούν να συνοψιστούν σε λίγες λέξεις, οπότε εδώ είναι μια λίστα για εσάς:

• Μαύρος. Αξιόπιστο, εξελιγμένο και έμπειρο. Χρησιμοποιείται για την προώθηση προϊόντων πολυτελείας.
• Λευκό. Απλό, ήρεμο και καθαρό.
• Κόκκινος. Αυτοπεποίθηση, νιότη και δύναμη. Συχνά χρησιμοποιείται για συνολικές πωλήσεις.
• Πορτοκάλι. Φιλικό, ζεστό και ενεργητικό. Δημιουργεί μια παρότρυνση για δράση: εγγραφή, αγορά ή πώληση.
• Κίτρινος. Ευτυχία, αισιοδοξία και ζεστασιά. Συνήθως χρησιμοποιείται για να τραβήξει την προσοχή σε ένα παράθυρο οθόνης.
• Πράσινος. Ειρήνη, ανάπτυξη και υγεία. Στο μάρκετινγκ χρησιμοποιείται για χαλάρωση.
• Μπλε. Εμπιστοσύνη, ασφάλεια και σταθερότητα. Συνήθως χρησιμοποιείται για τράπεζες και επιχειρήσεις.
• Μωβ/βιολετί. Πολυτελές, δημιουργικό και σοφό. Χρησιμοποιείται συνήθως στη βιομηχανία προϊόντων ομορφιάς και αντιγήρανσης.
• Ροζ. Ρομαντικό και θηλυκό. Χρησιμοποιείται για την προώθηση προϊόντων για γυναίκες και νεαρά κορίτσια.

Μαύρος

Το χρώμα έχει μεγάλο αριθμό σημασιών. Συνδέεται με τραγικές καταστάσεις. Όλα εξαρτώνται από το πώς το χρησιμοποιείτε και τα χρώματα που το συνοδεύουν. Το μαύρο ταιριάζει καλά με οποιοδήποτε άλλο χρώμα, καθιστώντας το τέλειο για φόντο. Οι σχεδιαστές το χρησιμοποιούν συχνά για να δημιουργήσουν αντιθέσεις.

Λευκό

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

Κόκκινος

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

Πορτοκάλι

Είναι ένα ενεργητικό και ζεστό χρώμα που προκαλεί ένα αίσθημα ενθουσιασμού. Οι σχεδιαστές χρησιμοποιούν χρώμα όταν χρειάζεται να παρακινήσουν τη δράση.

Κίτρινος

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

Πράσινος

Συχνά αποκαλείται το χρώμα της φύσης, της ισορροπίας και της αρμονίας. Το πράσινο φέρνει ηρεμιστικά και ανανεωτικά συναισθήματα. Είναι επίσης σημάδι ανάπτυξης και απειρίας. Έχει περισσότερη θετική ενέργεια από τα περισσότερα άλλα χρώματα, αλλά μερικές φορές συνδέεται με τον υλισμό. Το σχέδιο σε πράσινους τόνους είναι ιδανικό για προϊόντα που σχετίζονται με τη φύση.

Μπλε

Το χρώμα της εμπιστοσύνης. Συνήθως δείχνει αξιοπιστία και καθησυχάζει.

Μωβ

Από καιρό συνδέθηκε με τον πλούτο, καθώς πολλοί βασιλιάδες φορούσαν μωβ ρόμπες, είναι χρήσιμο για την αναπαράσταση ορισμένων προϊόντων πολυτελείας. Είναι επίσης το χρώμα του μυστηρίου και της μαγείας. Αναμιγνύει την ενέργεια του κόκκινου και του μπλε και έτσι έχει μια ισορροπία δύναμης και σταθερότητας. Μια μεγάλη συγκέντρωση χρώματος μπορεί να αποσπάσει την προσοχή των χρηστών.

Ροζ

Είναι το χρώμα της ευαισθησίας και του ρομαντισμού. Το ροζ είναι πολύ πιο απαλό από το κόκκινο, έτσι δημιουργεί ένα αίσθημα αγάπης άνευ όρων. Το ροζ συνδέεται πολύ έντονα με τη θηλυκότητα, επομένως μπορεί να είναι ένα αποτελεσματικό χρώμα εάν το κοινό-στόχος είναι κυρίως κορίτσια.

Καστανός

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

Η επίδραση του χρώματος στην αγορά αγαθών

Η μελέτη διεξήχθη στη Βόρεια Αμερική.

Αγαπημένα χρώματα

Τα λιγότερο αγαπημένα χρώματα

Έγχρωμα μοντέλα

• CMYK: Κυανό (μπλε), ματζέντα (κοκκινωπό), κίτρινο (κίτρινο) και κλειδί ("κλειδί" - μαύρο). Δηλαδή, αυτό το μοντέλο αποτελείται από τρία βασικά χρώματα και το μαύρο, που σας επιτρέπει να δημιουργήσετε πιο σκούρες αποχρώσεις. Χρησιμοποιείται στη ζωγραφική και την εκτύπωση.
• Μοντέλα RGB: κόκκινο, πράσινο, μπλε - κόκκινο, πράσινο, μπλε. Χρησιμοποιείται σε υπολογιστές, τηλεοράσεις και άλλες ηλεκτρονικές συσκευές

Μονόχρωμος

Βασίζεται σε ένα χρώμα με διαφορετικές αποχρώσεις. Μια μονόχρωμη παλέτα είναι πάντα μια επιλογή που κερδίζει, καθώς είναι δύσκολο να κάνετε λάθος και να δημιουργήσετε έναν δυσάρεστο χρωματικό συνδυασμό.

Ανάλογα Χρώματα

Για να δημιουργήσετε παρόμοια αρμονία, χρησιμοποιήστε χρώματα που βρίσκονται το ένα δίπλα στο άλλο στον τροχό χρωμάτων.

Συμπληρωματικός

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

Το χρώμα είναι ένα από τα πιο σημαντικά στοιχεία στη δουλειά ενός σχεδιαστή. Αλλά ως έννοια, μπορεί να είναι αρκετά δύσκολο να το κατακτήσετε: λόγω των πολλών συνδυασμών παλετών, είναι συχνά δύσκολο να αποφασίσετε πώς να σχεδιάσετε καλύτερα τη διεπαφή ιστοσελίδων και εφαρμογών. Έχουμε δημοσιεύσει στο παρελθόν κριτικές για εργαλεία επιλογής και . Και σήμερα θέλουμε να επεκτείνουμε το θέμα δημοσιεύοντας μια μετάφραση του άρθρου Essential Color Tools for UX Designers του Nick Babich στο ιστολόγιο.

Η σημείωση περιέχει μια λίστα με τις καλύτερες υπηρεσίες επιλογής χρωμάτων για ιστότοπους και σχεδιασμό UX που θα σας βοηθήσουν να εξοικονομήσετε πολύ χρόνο. Μέσα από αυτά τα έργα θα μάθετε:

• από πού να αντλήσετε έμπνευση.
• πώς να δημιουργήσετε τη δική σας παλέτα.
• πώς να κάνετε το σχέδιο προσιτό σε άτομα με προβλήματα όρασης χρώματος.

1. Ψάχνετε για έμπνευση

Χρώματα της φύσης

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

Οι καλύτεροι χρωματικοί συνδυασμοί βρίσκονται στη φύση. Μπορείτε να πάρετε έναν συνδυασμό χρωμάτων από οποιαδήποτε φωτογραφία

Συμπεριφορά

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

Χρώματα Ντρίμπλας

Το Dribbble είναι ένα από τα καλύτερα που θα σας φανούν χρήσιμα κατά τη δημιουργία μιας διεπαφής χρήστη. Εάν θέλετε να καταλάβετε οπτικά πώς έχουν χρησιμοποιήσει οι άλλοι ένα συγκεκριμένο χρώμα, μεταβείτε στη διεύθυνση dribbble.com/colors και εισαγάγετε την τιμή που θέλετε.

Όταν επιλέγετε ένα χρώμα για έναν ιστότοπο, εδώ μπορείτε να ορίσετε το ελάχιστο ποσοστό του - πείραμα, για παράδειγμα, δοκιμάστε να ορίσετε το 30% μπλε.

Δοκιμάστε να ορίσετε ένα ελάχιστο ποσοστό συγκεκριμένου χρώματος στο Dribbble

Σχεδιαστική έμπνευση

Το Designspiration είναι ένα χρήσιμο εργαλείο κυρίως για όσους έχουν ήδη ιδέες για συνδυασμούς χρωμάτων και θέλουν να δουν παραδείγματα τέτοιων συνδυασμών. Επιλέξτε από 1 έως 5 επιλογές και θα βρείτε εικόνες που ταιριάζουν με τις καθορισμένες παραμέτρους.

Στο Designspiration θα βρείτε διαφορετικά παραδείγματα συνδυασμών χρωμάτων

Tineye Multicolr

Χρησιμοποιώντας την υπηρεσία αντιστοίχισης χρωμάτων Tineye Multicolr, μπορείτε να προσδιορίσετε το επιθυμητό γάμμα της εικόνας και ακόμη και να ορίσετε το ποσοστό καθενός από αυτά (αναλογία). Ο ιστότοπος είναι ενσωματωμένος με μια βάση δεδομένων με 20 εκατομμύρια φωτογραφίες Creative Commons από το Flickr. Αυτός είναι σίγουρα ένας από τους πιο γρήγορους τρόπους για να βρείτε την τέλεια παλέτα.

Colorzilla

Το ColorZilla είναι μια επέκταση για εγκατάσταση σε προγράμματα περιήγησης Chrome και Mozilla Firefox. Περιλαμβάνει εργαλεία όπως το σταγονόμετρο, την περιήγηση παλέτας, τη δημιουργία και άλλα.

Η επέκταση ColorZilla είναι διαθέσιμη σε Chrome και Firefox

Shutterstock Spectrum

Ένας από τους καλύτερους τρόπους για να φανταστείτε πώς θα μοιάζει ένας συνδυασμός χρωμάτων είναι να κοιτάξετε τις αντίστοιχες εικόνες. Οι περισσότερες λύσεις που προσφέρουν επιλογές χρωμάτων για σχέδια ιστοτόπων περιλαμβάνουν αυτήν τη δυνατότητα, αλλά το Shutterstock Spectrum έχει μια απίστευτα φιλική προς το χρήστη διεπαφή και προεπισκόπηση που μπορεί πραγματικά να είναι χρήσιμη.

Επιπλέον, δεν θα χρειαστείτε συνδρομή, καθώς μια προκαταρκτική αξιολόγηση της εικόνας θα είναι αρκετά αρκετή (παρόλο που έχει ένα "υδατογράφημα").

W3Schools

Πρόσφατα το ιστολόγιο εξέτασε μια επιλογή από το W3Schools. Υπάρχουν πολλές πληροφορίες που συλλέγονται εκεί για το θέμα, ξεκινώντας από τα ονόματά τους/κώδικες αποχρώσεων, τη θεωρία του συνδυασμού παλετών και τελειώνοντας με μια περιγραφή διαφορετικών μορφών: HEX, RGB, CMYK, HWB κ.λπ. Θα βρείτε επίσης απλά γεννήτριες, μετατροπείς και παρόμοιες «μίνι-υπηρεσίες». Συνολικά, ενδιαφέρον για παρακολούθηση.

2. Δημιουργήστε μια χρωματική παλέτα

Εργαλείο χρωμάτων σχεδιασμού υλικού

Το Εργαλείο Χρώματος Υλικού Σχεδιασμού σάς επιτρέπει να δημιουργείτε, να μοιράζεστε συνδυασμούς χρωμάτων και να προβάλλετε μια πρόχειρη διεπαφή χρήστη για τις επιλογές σας. Μία από τις χρήσιμες λειτουργίες του είναι να μετράει το επίπεδο προσβασιμότητας οποιουδήποτε συνδυασμού χρωμάτων.

Χρώματα

Το Coolors είναι ένας ιστότοπος για τη δημιουργία μιας παλέτας πολλών χρωμάτων. Απλώς καρφιτσώστε ένα συγκεκριμένο χρώμα και πατήστε το πλήκτρο διαστήματος. Το εργαλείο είναι επίσης καλό γιατί θα λάβετε περισσότερα από ένα αποτελέσματα, αλλά μπορείτε να δημιουργήσετε πολλές επιλογές αλλάζοντας μόνο τα αρχικά δεδομένα.

Χρωματικός συνδυασμός στα Coolors με βάση τη φωτογραφία

Adobe Color CC

Η υπηρεσία αντιστοίχισης χρωμάτων Adobe Color CC (πρώην Kuler) είναι πλέον αρκετά δημοφιλής. Διατίθεται ελεύθερα στο Διαδίκτυο, αλλά υπάρχει και έκδοση desector. Με αυτήν την εφαρμογή web θα φτιάξετε τη δική σας παλέτα χρησιμοποιώντας τον τροχό χρωμάτων:

Ή μπορείτε να πάρετε ένα συγκεκριμένο αποτέλεσμα από την τελική εικόνα:

Επιλογή χρωμάτων για έναν ιστότοπο με βάση μια εικόνα

Υπάρχουν εκατοντάδες έτοιμοι συνδυασμοί εδώ, αναζητήστε τους στην ενότητα "Ρολόι":

Εάν χρησιμοποιείτε την έκδοση για επιτραπέζιους υπολογιστές, μπορείτε να εξαγάγετε το σύστημα χρωμάτων που δημιουργήσατε σε InDesign, Photoshop και Illustrator με ένα κλικ.

Paletton

Συχνά συγκρίνεται με το προηγούμενο Adobe Color CC καθώς τα σχέδια είναι πολύ παρόμοια. Η μόνη διαφορά είναι ότι στο Paletton δεν περιορίζεστε σε πέντε παραμέτρους, αλλά μπορείτε να πειραματιστείτε με πρόσθετους ήχους διεπαφής.

Επιπλέον, μπορείτε να δείτε. Μαζί με άλλους, η εφαρμογή σάς επιτρέπει να εργάζεστε οπουδήποτε, χρησιμοποιώντας απλά το smartphone σας. Εκτός από τις άμεσες εργασίες δημιουργίας/εξαγωγής παλετών χρωμάτων, εδώ μπορείτε να επιλέξετε συγκεκριμένα χρώματα από εικόνες ή να χρησιμοποιήσετε βασικές επιλογές.

3. Κάνοντας την παλέτα προσβάσιμη

Στις μέρες μας, οι διαταραχές της έγχρωμης όρασης είναι πολύ πιο συχνές από ό,τι φανταζόμαστε. Περίπου 285 εκατομμύρια άνθρωποι στον κόσμο αντιμετωπίζουν προβλήματα όρασης. Θα πρέπει πάντα να ελέγχετε εάν αυτό που επιλέγετε είναι διαθέσιμο σε τέτοιους χρήστες.

Έλεγχος χρωματικής αντίθεσης WebAIM

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

Το WebAIM Color Contrast Checker είναι ένα διαδικτυακό εργαλείο που ελέγχει τους χρωματικούς κώδικες σε δεκαεξαδικές τιμές.

Χρώματα

Έχουμε ήδη αναφέρει αυτήν την υπηρεσία παραπάνω. Μεταξύ άλλων, το Coolors θα σας βοηθήσει επίσης να ελέγξετε την παλέτα που επινοήσατε για αχρωματοψία.

Τύπος αχρωματοψίας στο διάγραμμα

Αντί για Κανονική λειτουργία, επιλέξτε τον τύπο του προβλήματος όρασης που θέλετε να προσομοιώσετε. Ως αποτέλεσμα, θα καταλάβετε ακριβώς πώς θα δει το σχέδιό σας ένα άτομο που δεν μπορεί να διακρίνει ορισμένα χρώματα.

Έτσι βλέπει μια παλέτα ένα άτομο με πρωτονομία

NoCoffee Vision Simulator για Chrome

Χρησιμοποιώντας τον ιστότοπο NoCoffee Vision Simulator, μπορείτε να δείτε πώς τα άτομα με αχρωματοψία ή χαμηλή όραση θα αντιλαμβάνονται ορισμένες ιστοσελίδες. Για παράδειγμα, εάν καθορίσετε την παράμετρο "Achromatopsia" στην ενότητα "Color Deficiency", θα δείτε την ιστοσελίδα με γκρι χρώμα.

Έτσι μοιάζει ένα έργο του CNN για ένα άτομο με δευτερανωπία.

Σύναψη

Όλες οι υπηρεσίες αντιστοίχισης χρωμάτων ιστότοπου και σχεδίασης UX που αναφέρονται στο άρθρο σίγουρα θα σας βοηθήσουν στην αναζήτησή σας για μια ενδιαφέρουσα και αποτελεσματική παλέτα. Αλλά να θυμάστε: ο καλύτερος τρόπος για να μάθετε πώς να δημιουργείτε εκπληκτικές παλέτες είναι να εξασκηθείτε και να πειραματιστείτε πολύ.

Το έργο της επιλογής ενός συνδυασμού χρωμάτων για έναν ιστότοπο μπορεί να φαίνεται υπερβολικό, ειδικά αν δεν είστε πολύ ενημερωμένοι και έμπειροι στους χρωματικούς συνδυασμούς:

Εάν όλα πάνε καλά, ο ιστότοπός σας θα φαίνεται αρμονικός. Εάν όχι, θα έχετε μια εικόνα σε στυλ ταινίας τρόμου!

Εάν αποφύγετε να χρησιμοποιήσετε καθόλου χρώμα στον ιστότοπό σας, θα φαίνεται θαμπό και θα ξεχαστεί γρήγορα. Εάν το παρακάνετε με το χρώμα, ο ιστότοπος θα φαίνεται κολλώδης.

Πρέπει να επιλέξετε το σωστό πρότυπο και παλέτα χρωμάτων για τον μελλοντικό σας ιστότοπο. Αυτές οι δύο εργασίες μπορεί να είναι ίσως οι πιο δύσκολες κατά τη δημιουργία ενός ιστότοπου.

Η γνώση μερικών κανόνων θα κάνει την επιλογή χρωμάτων λιγότερο δύσκολη.

Αφού διαβάσετε αυτό το άρθρο, θα μάθετε πώς να:

• Επιλέξτε το πιο κατάλληλο χρώμα για τον ιστότοπο και την προσωπική σας επωνυμία.
• Πώς να συνδυάσετε τόνους για να επιτύχετε έναν αρμονικό συνδυασμό χρωμάτων.
• Επιλέξτε το πιο κατάλληλο χρώμα φόντου.
• Χρησιμοποιήστε χρωματικούς τόνους μόνο όπου είναι απαραίτητο.

Πώς επηρεάζει το χρώμα την αντίληψη της ιστοσελίδας και της επωνυμίας σας;

Αν σας ζητήσω να σκεφτείτε την Coca-Cola, ποιο θα ήταν το πρώτο πράγμα που σας έρχεται στο μυαλό; Πιθανότατα, το κόκκινο λογότυπο της Coca-Cola θα εμφανιστεί στη φαντασία σας:

Είναι αρκετά δύσκολο να σκεφτείς αυτό το ποτό και να μην το συσχετίσεις με το κόκκινο χρώμα. Το κόκκινο συνδέεται τόσο έντονα με τη μάρκα που είναι τόσο σημαντικό όσο το ίδιο το διάσημο ποτό.

Το κόκκινο σε έναν χρωματικό συνδυασμό μεταφέρει δύο σημαντικά μηνύματα:

1. Οι φωτεινές κόκκινες ετικέτες ξεχωρίζουν από τις υπόλοιπες στον διάδρομο της σόδας.
2. Κάθε χρώμα προκαλεί συγκεκριμένα συναισθήματα. Όταν βλέπουμε κόκκινο, έχουμε ένα αίσθημα ενθουσιασμού, αγάπης και πάθους σε υποσυνείδητο επίπεδο. Αυτά είναι τα συναισθήματα που θέλει να προκαλέσει η Coca-Cola με τα ποτά της:

Εάν επιλέξετε το σωστό συνδυασμό χρωμάτων για τον ιστότοπό σας, όχι μόνο θα τον κάνετε ελκυστικό οπτικά, αλλά θα δημιουργήσετε και μια αξέχαστη επωνυμία.

Το 85% των αγοραστών παραδέχεται ότι ο κύριος λόγος για την αγορά ενός προϊόντος ήταν το χρώμα του.

Η αναγνώριση της επωνυμίας αυξάνεται κατά 80% όταν χρησιμοποιείται χρώμα.

3 βήματα για να χρησιμοποιήσετε σωστά το χρώμα στον ιστότοπό σας

Κατά την ανάπτυξη ενός σχεδίου ιστοσελίδας χρειάζεστε:

• Επιλέξτε ένα κυρίαρχο χρώμα για την επωνυμία σας.
• Επιλέξτε πολλές αποχρώσεις έμφασης για να δημιουργήσετε ένα συνδυασμό χρωμάτων.
• Επιλέγοντας ένα χρώμα φόντου για να δημιουργήσετε ένα πλήρες σχέδιο.

1. Επιλέγοντας το χρώμα που κυριαρχεί

Είναι το κυρίαρχο χρώμα της επωνυμίας σας το κόκκινο, όπως η Coca-Cola; Θα βοηθήσει να προκαλέσει τα απαραίτητα συναισθήματα στους επισκέπτες του πόρου, θα προκαλέσει στους ανθρώπους ένα αίσθημα ενθουσιασμού, αγάπης και πάθους.

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

Πώς να επιλέξετε το σωστό χρώμα

Δεν είναι τυχαίο που μεγάλες εταιρείες επιλέγουν αυτόν ή εκείνο τον συνδυασμό χρωμάτων για τον ιστότοπό τους. Αυτή είναι μια συνειδητή επιλογή που αποτελεί μέρος του branding και του μάρκετινγκ.

Κάθε χρώμα προσελκύει τη δική του ομάδα αγοραστών και μπορεί ακόμη και να επηρεάσει την επιλογή τους:

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

Το σκούρο μπλε και το τιρκουάζ προσελκύουν αγοραστές με περιορισμένο χρηματικό ποσό. Αυτά τα χρώματα θα τα βρείτε σε τράπεζες και μεγάλα πολυκαταστήματα.

Το βατόμουρο, το γαλάζιο και το ροζ προσελκύουν κλασικούς αγοραστές. Διανέμεται σε καταστήματα ένδυσης.

Για να προσελκύσετε τους πελάτες που θέλετε, χρησιμοποιήστε συνδυασμούς διαφορετικών χρωμάτων.

Έχουμε δημιουργήσει ειδικά ένα οπτικό infographic για την επιλογή συνδυασμών χρωμάτων για να σας διευκολύνουμε να επιλέξετε το κυρίαρχο χρώμα για την επωνυμία σας:

Τι χρώμα πρέπει να χρησιμοποιήσετε για τον ιστότοπό σας;

Το πράσινο αντιπροσωπεύει τον πλούτο, την υγεία, την ηρεμία και τη φύση. Αυτό το χρώμα γίνεται πιο εύκολα αντιληπτό από τα μάτια και, ως αποτέλεσμα, χαλαρώνει. Το πράσινο είναι το δεύτερο πιο αγαπημένο χρώμα τόσο για τους άνδρες όσο και για τις γυναίκες.

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

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

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

Το ροζ είναι θηλυκό, γλυκό, αθώο και ρομαντικό. Συχνά χρησιμοποιείται για την προσφορά ιδιωτικών υπηρεσιών και προϊόντων σε κορίτσια και γυναίκες.

Το μωβ είναι σύμβολο μεγαλείου, πλούτου, επιτυχίας και σοφίας. Συχνά υπάρχει στα καλλυντικά. Έχει ηρεμιστική επίδραση στους ανθρώπους.

Το μπλε είναι δείκτης αξιοπιστίας, ασφάλειας, σταθερότητας, ειρήνης και ηρεμίας. Συχνά χρησιμοποιείται από τράπεζες και μεγάλες εταιρείες. Το μπλε χρώμα είναι πιο ευχάριστο τόσο για άνδρες όσο και για γυναίκες.

Το γκρι σε έναν χρωματικό συνδυασμό αντιπροσωπεύει την ουδετερότητα, την απλότητα, την ηρεμία και τη λογική. Συνδέεται με την τεχνολογία, την παραγωγή, την ακρίβεια, τον έλεγχο, την ικανότητα και ακόμη και την εμπειρία.

Το μαύρο είναι το χρώμα της επιρροής, της πολυτέλειας, της εμπειρίας και της κομψότητας. Συχνά χρησιμοποιείται για την προώθηση προϊόντων πολυτελείας, συνδέεται με επαγγελματισμό, δύναμη και ακρίβεια.

Το κοινό-στόχο σας είναι νέοι και ενεργητικοί αγοραστές; Ή πιο έμπειροι άνθρωποι με σταθερές αποδοχές; Το προϊόν (η υπηρεσία) σας απευθύνεται περισσότερο σε άνδρες ή γυναίκες; Είναι κατάλληλο μόνο για μια συγκεκριμένη ηλικιακή ομάδα;

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

Διαφορές στην αντίληψη των χρωμάτων μεταξύ ανδρών και γυναικών

Σε ποιους απευθύνεται κυρίως ο ιστότοπός σας, άνδρες ή γυναίκες; Ή μήπως και τα δύο;

Φωτεινοί και σίγαση συνδυασμοί χρωμάτων για τον ιστότοπο

Οι άντρες προτιμούν τα έντονα χρώματα, ενώ οι γυναίκες τα σιωπηλά χρώματα.

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

Αχρωματικά χρώματα

Κατά κανόνα, στους άντρες αρέσουν τα αχρωματικά χρώματα περισσότερο από τις γυναίκες. Τα αχρωματικά χρώματα είναι το λευκό, το μαύρο και όλες οι αποχρώσεις του γκρι.

Ανοιχτές και σκούρες αποχρώσεις

Οι γυναίκες προτιμούν τις ανοιχτόχρωμες αποχρώσεις. Ο λόγος για αυτό είναι η ενισχυμένη αντίληψή τους για ορισμένα χρώματα.

Γυναίκες

Μπλε, μωβ, πράσινο.

Πορτοκαλί, καφέ, γκρι.

Ανδρες

Τα πιο προτιμώμενα χρώματα:μπλε, πράσινο, μαύρο.

Ελάχιστα προτιμώμενα χρώματα:καφέ, πορτοκαλί, μωβ.

Συνδυάζοντας και χρησιμοποιώντας χρώματα που αρέσουν σε άνδρες, γυναίκες ή και τα δύο, μπορείτε να επηρεάσετε την υποσυνείδητη αντίληψή τους για τη μάρκα.

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

Η επιλογή χρώματος για την επωνυμία ή το προϊόν σας μπορεί επίσης να εξαρτάται από την εντύπωση που θέλουν να αφήσουν οι πελάτες σας στους άλλους.

Συχνά οι άνθρωποι αγοράζουν ορισμένα προϊόντα ή υπηρεσίες για να κάνουν μια συγκεκριμένη εντύπωση σε άλλους.

Πολλές αποφάσεις είναι μια αντανάκλαση του τι σκέφτεται ένα άτομο για τον εαυτό του και πώς θέλει να φαίνεται στους άλλους. Αυτό θα έρθει στο μυαλό όταν άλλοι άνθρωποι σκεφτούν αυτό το άτομο:

Επομένως, εάν θέλετε οι άνθρωποι που αγαπούν τη φύση να αγοράσουν το προϊόν σας, χρησιμοποιήστε πράσινο στον χρωματικό συνδυασμό HTML. Θέλετε να προσελκύσετε ανθρώπους που νιώθουν νέοι και με αυτοπεποίθηση; Χρησιμοποιήστε κίτρινο. Εάν ενδιαφέρεστε για άτομα που θέλουν να δείχνουν διακεκριμένοι και πλούσιοι, χρησιμοποιήστε το μαύρο.

Είναι ξεκάθαρο τώρα;

Σκεφτείτε το ιδανικό κοινό-στόχο σας. Πώς θέλει να φαίνεται στους άλλους;

Ναι, επηρεάζει την ψυχολογία. Αλλά πρέπει να το καταλάβετε αυτό για να δημιουργήσετε μια επιτυχημένη επωνυμία.

Πώς να χρησιμοποιήσετε ένα κύριο χρώμα στον ιστότοπό σας

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

Χρησιμοποιήστε το κυρίαρχο χρώμα μόνο σε εκείνα τα μέρη όπου θέλετε να τραβήξετε την προσοχή των χρηστών ή να τους ενθαρρύνετε να κάνουν μια συγκεκριμένη ενέργεια.

Για παράδειγμα, καλέστε έναν αριθμό τηλεφώνου, συμπληρώστε μια φόρμα, εγγραφείτε σε ενημερώσεις κ.λπ.

Το κυρίαρχο χρώμα πρέπει να τραβήξει τα βλέμματα, τονίζοντας εκείνες τις λεπτομέρειες στις οποίες θέλετε να επιστήσετε την προσοχή των χρηστών:

Πού να χρησιμοποιήσετε το κυρίαρχο χρώμα στον ιστότοπο;

• Λογότυπο?
• Καρτέλες μενού.
• Κουμπί "Κλήση"
• Σημαντικές πληροφορίες.
• Επικεφαλίδες και τίτλοι.
• Κουμπιά.

2. Επιλογή χρωμάτων έμφασης

Για να κάνετε το σχέδιό σας πιο ενδιαφέρον και επαγγελματικό, πρέπει να χρησιμοποιήσετε έτοιμα σχέδια χρωμάτων για τον ιστότοπο. Μπορούν να τονίσουν σημαντικά μέρη του ιστότοπού σας: εισαγωγικά, κουμπιά ή υποτίτλους.

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

Υπάρχει ένας ευκολότερος τρόπος διαθέσιμος σε όλους. Αυτό είναι ένα πρόγραμμα αντιστοίχισης χρωμάτων που θα σας βοηθήσει να επιλέξετε συνδυασμούς χρωμάτων όπως κάνουν οι επαγγελματίες!

Πώς να χρησιμοποιήσετε ένα πρόγραμμα για να επιλέξετε χρώματα έμφασης

Αφού αποφασίσετε για ένα κυρίαρχο χρώμα, δεν θα ήταν ευκολότερο να επιλέξετε χρώματα έμφασης χρησιμοποιώντας προγράμματα όπως το Adobe Color CC Tool:

Ακολουθεί ένα σύντομο σεμινάριο που θα σας δείξει πώς να δημιουργήσετε ένα συνδυασμό χρωμάτων με έναν από τους δύο τρόπους:

1. Με βάση το κυρίαρχο χρώμα

Βήμα 1: Αρχικά, μάθετε τον κωδικό για το χρώμα που κυριαρχεί. Για παράδειγμα, στον ιστότοπο ColorPicker.com. Ο κωδικός χρώματος υποδεικνύεται στο ορθογώνιο ακριβώς πάνω από το τετράγωνο της παλέτας χρωμάτων.

Αφού αντιγράψετε τον κώδικα από το ColorPicker.com, επικολλήστε τον στο " ΓΟΗΤΕΥΩ» Εργαλείο Adobe Color. Βεβαιωθείτε ότι έχετε επικολλήσει τον κώδικα στη μεσαία στήλη:

Επικολλήστε τον κωδικό για το κυρίαρχο χρώμα του ιστότοπού σας στο πλαίσιο ΣΤΗ ΜΕΣΗ.

Μόλις καθορίσετε ένα χρώμα, το Adobe Color το εμφανίζει στην οθόνη μαζί με άλλα συμπληρωματικά χρώματα.

Βήμα 2. Στην επάνω αριστερή πλευρά θα δείτε ένα ορθογώνιο με τους παρακάτω συνδυασμούς χρωμάτων:

• Συνεπής;
• Μονόχρωμος;
• Τριγωνικός;
• Συμπληρωματικός;
• Σύνθετος;
• Αποχρώσεις.

Επιλέξτε ένα συνδυασμό χρωμάτων

Πειραματιστείτε με διαφορετικούς συνδυασμούς χρωμάτων για να δείτε ποιο είναι κατάλληλο για εσάς. Όλα τα χρώματα που προτείνει το πρόγραμμα ταιριάζουν μεταξύ τους.

Βήμα 3. Κάντε το χρωματικό σας συνδυασμό ακόμα πιο προσεγμένο μετακινώντας μία από τις επιλογές χρωμάτων.

Είναι σημαντικό να μην μετακινείτε τον κοντό δείκτη που βρίσκεται στη μέση έτσι ώστε το κυρίαρχο χρώμα σας να παραμένει σταθερό:

Το CMS και τα προγράμματα δημιουργίας ιστότοπων σάς επιτρέπουν να εισαγάγετε κωδικούς χρώματος ( ΓΟΗΤΕΥΩ) για να επισημάνετε οποιοδήποτε μέρος του ιστότοπού σας:

Αντιγράψτε τους χρωματικούς κωδικούς ( ΓΟΗΤΕΥΩ) για το χρωματικό σας συνδυασμό για τον ιστότοπο.

1. Με βάση την αγαπημένη σας φωτογραφία

Μερικές φορές είναι πιο εύκολο να αναζητήσετε λύσεις χρώματος στο Διαδίκτυο και να εμπνευστείτε από αυτές.

Μπορείτε να ανεβάσετε όποια φωτογραφία σας αρέσει στο Adobe Color και το πρόγραμμα θα δημιουργήσει αυτόματα έναν συνδυασμό χρωμάτων με βάση αυτό.

Βήμα 1. Ανεβάστε μια φωτογραφία:

Κάντε κλικ στο εικονίδιο της κάμερας για να ανεβάσετε μια εικόνα.

Βήμα 2. Επιλέξτε μία από τις πέντε χρωματικές διαθέσεις:

• Γραφικός;
• Ευφυής;
• Φιμωμένος?
• Κορεσμένα;
• Σκοτάδι.

Πειραματιστείτε με τις χρωματικές διαθέσεις για να δείτε ποιο σας ταιριάζει καλύτερα:

Επιλέξτε μια χρωματική διάθεση.

Βήμα 3: Κάντε το συνδυασμό χρωμάτων ακόμα πιο προσεκτικό μετακινώντας μία από τις επιλογές χρωμάτων στην εικόνα:

Μετακινήστε τους δείκτες εάν θέλετε να επιλέξετε άλλα συμπληρωματικά χρώματα.

Βήμα 4. Η προτεινόμενη παλέτα χρωμάτων βρίσκεται κάτω από την εικόνα. Δείτε πώς να επιλέξετε έναν συνδυασμό χρωμάτων για το σχεδιασμό ιστοσελίδων σας.

Για να δείτε τους κωδικούς ( ΓΟΗΤΕΥΩ) χρώματα, κάντε κλικ στον χρωματικό κύκλο που βρίσκεται στην επάνω δεξιά γωνία:

Κάντε κλικ στον τροχό χρωμάτων για να δείτε τους χρωματικούς κωδικούς:
Αντιγράψτε τους χρωματικούς κωδικούς ( ΓΟΗΤΕΥΩ) για το χρωματικό σας συνδυασμό.

Πού να τοποθετήσετε βοηθητικά χρώματα

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

Επιλέξτε ένα ή δύο συμπληρωματικά χρώματα. Εάν υπάρχουν περισσότερα από αυτά, θα είναι δύσκολο για τους χρήστες να επικεντρωθούν σε ένα πράγμα:

Πού να χρησιμοποιήσετε υποστηρικτικά χρώματα στον ιστότοπό σας;

• Ενεργό κουμπί μενού.
• Υπότιτλοι;
• Επισήμανση δευτερευουσών πληροφοριών.

1. Επιλογή χρώματος φόντου

Χρειάστηκε ποτέ να βάψετε τους τοίχους του σπιτιού σας;

Αν ναι, τότε έχετε κάποια εμπειρία και γνωρίζετε ότι η επιλογή χρωμάτων δεν είναι εύκολη.

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

Η επιλογή ενός χρώματος φόντου για τον ιστότοπό σας δεν διαφέρει πολύ από την επιλογή χρώματος για το δωμάτιό σας!

Πώς να επιλέξετε το σωστό χρώμα φόντου

Αν επιλέγατε μπογιά για ένα μοντέρνο κατάστημα ρούχων και ένα εξοχικό σπίτι, θα επιλέγατε το ίδιο χρώμα;
Προφανώς όχι. Αυτά τα δύο δωμάτια εξυπηρετούν διαφορετικούς σκοπούς.

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

Και για σύγκριση: όταν φτάσετε στο εξοχικό σας, μάλλον σκοπεύετε να χαλαρώσετε. Θέλετε το χρώμα των τοίχων και ο σχεδιασμός του σπιτιού σας να έχει ένα ηρεμιστικό και χαλαρωτικό αποτέλεσμα.

Το χρώμα φόντου του ιστότοπού σας εξαρτάται από το τι θέλετε να προσέξουν οι χρήστες.

Με απλά λόγια, το χρώμα φόντου εξαρτάται άμεσα από τον στόχο που επιδιώκετε όταν δημιουργείτε έναν ιστότοπο.

Τύπος 1 – Πόροι με πολύ περιεχόμενο ή ηλεκτρονικό εμπόριο

Έχετε παρατηρήσει ότι οι πόροι πληροφοριών και τα ηλεκτρονικά καταστήματα χρησιμοποιούν συχνά λευκούς ή ουδέτερους συνδυασμούς χρωμάτων για τους ιστότοπούς τους;

Αυτό συμβαίνει επειδή ο σκοπός αυτών των πόρων είναι η προώθηση ιδεών ή προϊόντων.

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