Παλέτες χρωμάτων Ιστού

Τι είναι οι χρωματικές παλέτες Ιστού;

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

Τι σημαίνει ο Hex code στα χρώματα;

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

Οι δεκαεξαδικοί χρωματικοί κωδικοί ξεκινούν με το σύμβολο λίρας ή το hashtag (#) ακολουθούμενο από έξι γράμματα ή αριθμούς. Τα δύο πρώτα γράμματα/αριθμοί αντιστοιχούν σε κόκκινο, τα επόμενα δύο σε πράσινο και τα δύο τελευταία σε μπλε. Οι τιμές χρώματος ορίζονται σε τιμές μεταξύ 00 και FF.

Οι αριθμοί χρησιμοποιούνται όταν η τιμή είναι 1-9. Τα γράμματα χρησιμοποιούνται όταν η τιμή είναι μεγαλύτερη από 9. Π.χ:

• Α = 10
• Β = 11
• C = 12
• D = 13
• Ε = 14
• F = 15

Hex χρωματικοί κωδικοί και ισοδύναμα RGB

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

• Κόκκινο = #FF0000 = RGB (255, 0, 0)
• Πράσινο = #008000 = RGB (1, 128, 0)v
• Μπλε = #0000FF = RGB (0, 0, 255)
• Λευκό = #FFFFFF = RGB (255.255.255)
• Ivory = #FFFFFF0 = RGB (255, 255, 240)
• Μαύρο = #000000 = RGB (0, 0, 0)
• Γκρι = #808080 = RGB (128, 128, 128)
• Ασήμι = #C0C0C0 = RGB (192, 192, 192)
• Κίτρινο = #FFFF00 = RGB (255, 255, 0)
• Μωβ = #800080 = RGB (128, 0, 128)
• Πορτοκαλί = #FFA500 = RGB (255, 165, 0)
• Βουργουνδία = #800000 = RGB (128, 0, 0)
• Φούξια = #FF00FF = RGB (255, 0, 255)
• Lime = #00FF00 = RGB (0, 255, 0)
• Aqua = #00FFFF = RGB (0, 255, 255)
• Teal = #008080 = RGB (0, 128, 128)
• Ελιά = #808000 = RGB (128, 128, 0)
• Navy Blue = #000080 = RGB (0, 0, 128)

Γιατί είναι σημαντικά τα χρώματα του ιστότοπου;

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

Για παράδειγμα, η Beamax, μια εταιρεία που κατασκευάζει οθόνες προβολής, παρατήρησε μια τεράστια αύξηση 53,1% στα κλικ σε κόκκινους συνδέσμους σε σύγκριση με τους μπλε συνδέσμους.

Τα χρώματα έχουν τεράστιο αντίκτυπο όχι μόνο στα κλικ αλλά και στην αναγνώριση της επωνυμίας. Μια μελέτη σχετικά με τη νοητική επίδραση των χρωμάτων διαπίστωσε ότι τα χρώματα αυξάνουν την αναγνώριση της επωνυμίας κατά μέσο όρο κατά 80%. Για παράδειγμα, όταν σκέφτεστε την Coca-Cola, πιθανότατα θα φανταστείτε ζωηρά κόκκινα κουτάκια.

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

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

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

Τώρα "Πώς να επιλέξετε έναν συνδυασμό χρωμάτων για ιστότοπους και εφαρμογές web;" Ας το δούμε βήμα βήμα:

1. Επιλέξτε τα βασικά σας χρώματα.

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

Παρακάτω παραθέτουμε μερικά παραδείγματα για εσάς:

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

2. Επιλέξτε τα επιπλέον χρώματα σας.

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

3. Επιλέξτε ένα χρώμα φόντου.

Επιλέξτε ένα χρώμα φόντου που θα είναι λιγότερο «επιθετικό» από το βασικό σας χρώμα.

4. Επιλέξτε το χρώμα της γραμματοσειράς.

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

Οι καλύτερες χρωματικές παλέτες Ιστού για σχεδιαστές

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

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

1. Paletton

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

2. Χρώμα Ασφαλές

Εάν το WCAG σας απασχολεί στη διαδικασία σχεδιασμού σας, το Color Safe είναι το καλύτερο εργαλείο για χρήση. Με αυτήν την εφαρμογή web, μπορείτε να δημιουργήσετε συνδυασμούς χρωμάτων που συνδυάζονται τέλεια και προσφέρουν πλούσια αντίθεση σύμφωνα με τις οδηγίες του WCAG.

Χρησιμοποιώντας την εφαρμογή Web Color Safe, διασφαλίζετε ότι ο ιστότοπός σας συμμορφώνεται με τις οδηγίες WCAG και είναι πλήρως προσβάσιμος σε όλους.

3. Adobe Color CC

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

4. Ατμόσφαιρα

Το Ambiance, μια δωρεάν εφαρμογή Ιστού, προσφέρει προκατασκευασμένες παλέτες χρωμάτων ιστού από άλλους ιστότοπους χρωμάτων στον Ιστό. Λειτουργεί σαν μια παραδοσιακή εφαρμογή web όπου μπορείτε να αποθηκεύσετε χρώματα στο προφίλ σας και να δημιουργήσετε τα δικά σας σχέδια από την αρχή. Όλες αυτές οι χρωματικές παλέτες ιστού προέρχονται από την Colorlovers. Η διεπαφή Ambiance διευκολύνει την περιήγηση και δίνει μεγαλύτερη έμφαση στην αλληλεπίδραση χρωμάτων για τη σχεδίαση διεπαφής χρήστη.

5. 0 έως 255

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

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

Οι καλύτερες χρωματικές παλέτες Ιστού

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

1. Οδόποδ

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

2. Tori's Eye

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

3. Cheese Survival Kit

Το κόκκινο είναι ένα εξαιρετικά δημοφιλές χρώμα για μια χρωματική παλέτα ιστότοπου. Μπορεί να μεταφέρει ένα πλούσιο μείγμα συναισθημάτων, καθιστώντας το ευέλικτο. Όπως μπορείτε να δείτε στον ιστότοπο Cheese Survival Kit, είναι ιδιαίτερα ισχυρό όταν χρησιμοποιείται σε μικρές δόσεις. Το κόκκινο απαλύνεται από πιο ουδέτερα χρώματα και το μπλε βοηθά με τα CTA και άλλους τομείς όπου η επιχείρηση θέλει να τραβήξει την προσοχή του επισκέπτη.

4. Ahrefs

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

Οι πιο συχνές ερωτήσεις σχετικά με τα χρώματα

1. Ποιο είναι το καλύτερο χρώμα για έναν ιστότοπο;

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

2. Πόσα χρώματα πρέπει να έχει η ιστοσελίδα;

Σκεφτείτε ότι το 51% των εμπορικών σημάτων έχουν μονόχρωμα λογότυπα, το 39% χρησιμοποιεί δύο χρώματα και μόνο το 19% των εταιρειών προτιμά τα έγχρωμα λογότυπα. Από εδώ, μπορείτε να δείτε ότι οι ιστότοποι με 1, 2 και 3 χρώματα έχουν περισσότερο νόημα από την προσπάθεια δημιουργίας ιστότοπου με χρώματα ουράνιου τόξου. Ωστόσο, μάρκες όπως η Microsoft και η Google πιστεύουν στο πλεονέκτημα της εργασίας με περισσότερα χρώματα καθώς χρησιμοποιούν τουλάχιστον 4 συμπαγή χρώματα στα σχέδιά τους.

3. Πού πρέπει να χρησιμοποιήσω τα χρώματα;

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