Φτιάξτε μια παλέτα χρωμάτων brand από τις δικές σας φωτογραφίες προϊόντων
Εξάγετε τα πραγματικά χρώματα από τις φωτογραφίες του προϊόντος και της συσκευασίας σας, δώστε σε κάθε ένα έναν ρόλο και ελέγξτε κάθε συνδυασμό κειμένου με τον έλεγχο αντίθεσης WCAG πριν μπει σε διαφήμιση, λεζάντα ή end card.
Πολλά μικρά brands έχουν ένα αρχείο λογότυπου και καμία λίστα χρωμάτων. Τα χρώματα ζουν στο ίδιο το προϊόν: το μπουκάλι, η ετικέτα, το κουτί, το ύφασμα. Όταν έρχεται η ώρα για μια διαφήμιση, μια μικρογραφία ή ένα στυλ λεζάντας, κάποιος κοιτάζει με το μάτι έναν κωδικό hex από μια φωτογραφία και ελπίζει.
Μπορείτε να κάνετε καλύτερα σε περίπου δέκα λεπτά. Εξάγετε τα χρώματα από φωτογραφίες του πραγματικού προϊόντος, δώστε σε καθένα έναν ρόλο και ελέγξτε ποια ζεύγη διαβάζονται ως κείμενο. Ο δωρεάν εξαγωγέας παλέτας χρωμάτων κάνει την εξαγωγή και τον έλεγχο στον browser σας, χωρίς να ανεβαίνει τίποτα.
Γιατί να ξεκινάτε από το προϊόν και όχι από ένα mood board
Οι άνθρωποι αναγνωρίζουν το προϊόν σας από το πώς φαίνεται στο ράφι ή στο χέρι τους. Μια διαφήμιση με χρώματα που ταιριάζουν με τη συσκευασία μοιάζει με το ίδιο brand με μία ματιά, ενώ μια που ξεφεύγει μοιάζει με απομίμηση. Μια παλέτα από το προϊόν είναι επίσης ειλικρινής για το τι πουλάτε πραγματικά, κάτι που σπάνια κάνει ένα mood board.
Ισχύει και για υπηρεσίες. Αν δεν έχετε φυσικό προϊόν, χρησιμοποιήστε τα καλύτερα στιγμιότυπα οθόνης σας, τη βιτρίνα σας ή φωτογραφίες της ομάδας σας, ό,τι ήδη συνδέουν οι άνθρωποι με εσάς.
Βήμα 1: επιλέξτε και κόψτε τις φωτογραφίες
Διαλέξτε δύο ή τρεις καθαρές φωτογραφίες: το προϊόν σε απλό φόντο, την πρόσοψη της συσκευασίας και μία λιφστάιλ φωτογραφία που σας αρέσει. Μετά κόψτε δυνατά. Ο εξαγωγέας μετράει κάθε pixel που του δίνετε, οπότε ένα μπουκάλι πάνω σε ξύλινο τραπέζι θα επιστρέψει το τραπέζι ως ένα από τα χρώματα του brand σας. Κόψτε στο προϊόν και στην ετικέτα, και η παλέτα θα είναι το προϊόν.
Φωτογραφίστε με φυσικό φως ή τουλάχιστον ομοιόμορφο φως, αν μπορείτε. Ένας θερμός λαμπτήρας κάνει την άσπρη συσκευασία κρεμ, και κάθε χρώμα που θα εξάγετε θα έχει αυτή την απόχρωση.
Βήμα 2: εξάγετε πέντε έως οκτώ χρώματα
Σύρετε κάθε φωτογραφία στον εξαγωγέα και ζητήστε 5 ή 6 χρώματα για μια καθαρή φωτογραφία προϊόντος, ή 8 για μια πολύπλοκη. Ομαδοποιεί παρόμοια pixel και εμφανίζει τον μέσο όρο κάθε ομάδας, από το μεγαλύτερο στο μικρότερο, με το ποσοστό της εικόνας που καλύπτει το καθένα. Το σημείο εκκίνησης είναι σταθερό, οπότε η ίδια φωτογραφία δίνει πάντα την ίδια παλέτα, και ένα μικρό λαμπερό accent, όπως ένα κόκκινο καπάκι σε άσπρο μπουκάλι, παίρνει το δικό του δείγμα αντί να χάνεται στον μέσο όρο.
Περάστε όλες τις φωτογραφίες σας και κοιτάξτε για τα χρώματα που επαναλαμβάνονται. Αυτά είναι το brand. Ένα χρώμα που εμφανίζεται μόνο σε μία λήψη είναι συνήθως το φόντο ή το φως.
Βήμα 3: δώστε σε κάθε χρώμα έναν ρόλο
Μια παλέτα είναι χρήσιμη μόνο όταν κάθε χρώμα έχει έναν ρόλο. Τα περισσότερα brands χρειάζονται τέσσερα:
- Φόντο: το χρώμα πάνω στο οποίο κάθεται το μεγαλύτερο μέρος μιας διάταξης. Συχνά το βασικό χρώμα της συσκευασίας ή ένα ανοιχτό ουδέτερο.
- Κείμενο: ένα σκούρο χρώμα αναγνώσιμο πάνω στο φόντο. Το σχεδόν μαύρο δουλεύει. Ένα βαθύ χρώμα brand δουλεύει καλύτερα, αν περνάει τον έλεγχο αντίθεσης.
- Accent: το έντονο, για ένα κουμπί, μια ετικέτα τιμής ή μία επισημασμένη λέξη.
- Υποστηρικτικό: ένα ή δύο ουδέτερα για κουτιά, διαχωριστικές γραμμές και δευτερεύον κείμενο.
Μην χρησιμοποιείτε όλα όσα σας έδωσε η φωτογραφία. Πέντε ονομασμένα χρώματα με σαφείς ρόλους θα κρατήσουν συνεπείς εκατό διαφημίσεις. Δώδεκα δεν θα το κάνουν.
Βήμα 4: ελέγξτε την αντίθεση πριν μπει σε οτιδήποτε
Ζεύγη χρωμάτων που φαίνονται καλά σε μεγάλη οθόνη μπορεί να είναι δύσκολα στην ανάγνωση σε κινητό στον ήλιο, και πολύ πιο δύσκολα για άτομα με χαμηλή όραση. Οι κατευθυντήριες γραμμές προσβασιμότητας περιεχομένου ιστού του W3C (WCAG) δίνουν έναν αριθμό γι' αυτό, τον λόγο αντίθεσης, που κυμαίνεται από 1:1 (το ίδιο χρώμα δύο φορές) έως 21:1 (μαύρο σε λευκό). Τα όρια είναι:
| Κανονικό κείμενο | Μεγάλο κείμενο | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
Μεγάλο κείμενο σημαίνει τουλάχιστον 18 pt, ή 14 pt έντονα, σύμφωνα με τον ορισμό του WCAG. Και οι αριθμοί είναι σκληρά όρια: η καθοδήγηση του W3C για το 1.4.3 λέει ότι ένας υπολογισμένος λόγος δεν πρέπει να στρογγυλοποιείται, οπότε το 4.499:1 δεν πληροί το 4.5:1.
Το WCAG γράφτηκε για περιεχόμενο ιστού, όχι για διαφημίσεις, αλλά η λογική ισχύει για κάθε κείμενο σε οθόνη, συμπεριλαμβανομένων των λεζαντών που ενσωματώνονται σε βίντεο και των λέξεων σε ένα end card.
Ένα παράδειγμα
Ας πούμε ότι η συσκευασία σας δίνει ένα σκούρο μπλε #1a3c6e, ένα κρεμ #fdf6e3 και ένα πορτοκαλί #e07a2e.
Ο τύπος είναι (L1 + 0.05) / (L2 + 0.05), όπου το L1 είναι η σχετική φωτεινότητα του πιο ανοιχτού χρώματος και το L2 του πιο σκούρου. Η σχετική φωτεινότητα κυμαίνεται από 0 για το μαύρο έως 1 για το λευκό. Το μπλε βγαίνει περίπου 0.046, το κρεμ περίπου 0.923 και το πορτοκαλί περίπου 0.300.
- Σκούρο μπλε κείμενο σε κρεμ: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096, περίπου 10.1 με αυτούς τους στρογγυλοποιημένους αριθμούς, και 10.16:1 ακριβώς. Αυτό περνάει το AAA σε κάθε μέγεθος. Είναι το κύριο ζεύγος σας.
- Πορτοκαλί κείμενο σε κρεμ: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350, περίπου 2.78:1. Αυτό αποτυγχάνει ακόμη και για μεγάλο κείμενο. Το πορτοκαλί δεν πρέπει να φέρει λέξεις πάνω στο κρεμ.
- Μαύρο κείμενο σε πορτοκαλί: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05, που είναι 7.0 με αυτούς τους στρογγυλοποιημένους αριθμούς αλλά 6.99:1 ακριβώς. Αυτό περνάει το AA για όλα τα κείμενα αλλά μένει λίγο κάτω από το AAA. Καλό για ετικέτα κουμπιού.
- Κρεμ κείμενο σε σκούρο μπλε: το ίδιο ζεύγος με το πρώτο, άρα το ίδιο 10.16:1. Η αντιστροφή ενός ζεύγους δεν αλλάζει ποτέ τον λόγο.
Έτσι οι ρόλοι σχεδόν επιλέγονται μόνοι τους: κρεμ φόντο, σκούρο μπλε κείμενο, πορτοκαλί ως σχήμα accent με μαύρες λέξεις πάνω του (το σκούρο μπλε σε πορτοκαλί είναι μόνο 3.65:1, που είναι AA μόνο για μεγάλο κείμενο). Ο εξαγωγέας δείχνει ολόκληρο αυτό το πλέγμα μαζί, κάθε χρώμα απέναντι σε κάθε άλλο συν λευκό και μαύρο, με κάθε κελί βαθμολογημένο AAA, AA, AA για μεγάλο κείμενο ή Fail.
Βήμα 5: γράψτε το μία φορά
Εξάγετε την παλέτα ως CSS custom properties ή JSON και κρατήστε την δίπλα στα αρχεία του λογότυπου. Μετονομάστε τις μεταβλητές βάσει ρόλου αφού αποφασίσετε: τα --brand-bg, --brand-text, --brand-accent διαβάζονται καλύτερα από το --color-3 έναν μήνα αργότερα. Προσθέστε μία γραμμή κάτω από κάθε χρώμα που λέει ποια ζεύγη πέρασαν, ώστε κανείς να μην χρειάζεται να επαναλάβει τον έλεγχο.
Μετά ελέγξτε τους αριθμούς με ό,τι επίσημο έχετε ήδη. Μια φωτογραφία σας δίνει το χρώμα που είδε η κάμερα, που είναι κοντά στη τυπωμένη συσκευασία, όχι ακριβώς ίδιο με την προδιαγραφή μελανιού. Αν ο εκτυπωτής ή ο designer σας έχουν ακριβείς τιμές, αυτές υπερισχύουν.
Χρήση της παλέτας σε διαφημίσεις και αναρτήσεις
- Λεζάντες και υπότιτλοι: το κείμενό σας σε κουτί με το χρώμα φόντου σας, ή το αντίστροφο. Ελέγξτε πρώτα το ζεύγος.
- End cards: το χρώμα φόντου με το λογότυπο και μία γραμμή στο χρώμα κειμένου σας. Το accent μπορεί να γεμίσει ένα σχήμα κουμπιού πίσω από μια σύντομη έκκληση για δράση.
- Μικρογραφίες και covers: ένα accent, μία μεγάλη ευανάγνωστη λέξη, πολύ φόντο.
- QR codes στη συσκευασία: ένα χρώμα brand δουλεύει αν είναι εμφανώς πιο σκούρο από τη συσκευασία. Η γεννήτρια QR code μας προειδοποιεί όταν η αντίθεση είναι χαμηλή.
Πού μπαίνει το Hermoso
Η Hermoso είναι ένας AI marketing agent. Ερευνά τις διαφημίσεις που ήδη αποδίδουν στην αγορά σας, φτιάχνει on-brand εικόνα και βίντεο διαφημίσεις, δημοσιεύει και προγραμματίζει στους δικούς σας λογαριασμούς κοινωνικής δικτύωσης, και τρέχει καμπάνιες με πληρωμή στους δικούς σας διαφημιστικούς λογαριασμούς. Όταν προσθέτετε το brand σας από τον ιστότοπό σας, μαθαίνει τα προϊόντα, το λογότυπο και την παλέτα σας. Οι λεζάντες και τα end cards μένουν εκτός, εκτός αν τα ζητήσετε, και όταν τα ζητάτε μπορείτε να ορίσετε το κείμενο, το κουτί και τα χρώματα του end card με κωδικούς hex, ώστε τα ζεύγη που ελέγξατε εδώ να είναι αυτά που θα βγουν. Δουλεύει στην web εφαρμογή, ή μέσα στο Claude, το ChatGPT και το Cursor μέσω του MCP server της.
Συχνές ερωτήσεις
Πώς βρίσκω τους κωδικούς hex των χρωμάτων του προϊόντος μου;
Κόψτε μια καθαρή φωτογραφία στο προϊόν ή τη συσκευασία και σύρετέ την σε έναν εξαγωγέα παλέτας χρωμάτων. Εμφανίζει τα κύρια χρώματα ως HEX, RGB και HSL. Περάστε δύο ή τρεις φωτογραφίες και κρατήστε τα χρώματα που επαναλαμβάνονται.
Ποιον λόγο αντίθεσης χρειάζεται το κείμενο;
Σύμφωνα με το WCAG 2.2, το επίπεδο AA θέλει 4.5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο, ενώ το AAA θέλει 7:1 και 4.5:1. Μεγάλο κείμενο είναι τουλάχιστον 18 pt, ή 14 pt έντονα.
Είναι το 4.49:1 αρκετό για AA;
Όχι. Ο W3C λέει ότι ο λόγος δεν πρέπει να στρογγυλοποιείται όταν συγκρίνεται με το όριο, οπότε το 4.499:1 δεν πληροί το 4.5:1.
Πόσα χρώματα πρέπει να έχει μια παλέτα brand;
Αρκετά ώστε να δώσετε σε καθένα έναν ρόλο: συνήθως ένα φόντο, ένα χρώμα κειμένου, ένα accent και ένα ή δύο ουδέτερα. Πέντε ονομασμένα χρώματα με σαφείς ρόλους κρατούν τις διαφημίσεις πιο συνεπείς από μια μακριά λίστα.
Είναι τα χρώματα από φωτογραφία ακριβή;
Όχι. Είναι αυτό που κατέγραψε η κάμερα κάτω από εκείνο το φως, κοντά στο προϊόν αλλά όχι το ίδιο με μια προδιαγραφή εκτύπωσης ή μελανιού. Αν έχετε επίσημες τιμές, χρησιμοποιήστε αυτές.