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

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

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

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

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

Πώς διαβάζεται ο πίνακας αντίθεσης

Κάθε χρώμα συνδυάζεται με κάθε άλλο, καθώς και με απλό λευκό και μαύρο, και κάθε κελί δείχνει τον λόγο αντίθεσης για κείμενο στο χρώμα της γραμμής πάνω σε φόντο στο χρώμα της στήλης. Ο λόγος ακολουθεί τον ορισμό του WCAG: (L1 + 0.05) / (L2 + 0.05), όπου L1 και L2 είναι η σχετική φωτεινότητα του πιο ανοιχτού και του πιο σκούρου χρώματος. Κυμαίνεται από 1:1 (το ίδιο χρώμα δύο φορές) έως 21:1 (μαύρο σε λευκό).

Οι ετικέτες είναι τα όρια που ορίζει το WCAG:

• AA: τουλάχιστον 4.5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο (Κριτήριο Επιτυχίας 1.4.3).
• AAA: τουλάχιστον 7:1 για κανονικό κείμενο και 4.5:1 για μεγάλο κείμενο (Κριτήριο Επιτυχίας 1.4.6).
• Μεγάλο κείμενο σημαίνει τουλάχιστον 18 στιγμές, ή 14 στιγμές έντονα (ο ορισμός του WCAG για τη μεγάλη κλίμακα).

Ένα κελί με σήμανση AA large είναι κατάλληλο για μεγάλο τίτλο και πολύ αχνό για λεζάντα. Η επεξήγηση του 1.4.3 από το W3C αναφέρει επίσης ότι ο λόγος δεν πρέπει να στρογγυλοποιείται, οπότε το 4.499:1 δεν πληροί το 4.5:1. Το εργαλείο κρίνει με βάση τον ακριβή αριθμό και τον εμφανίζει κομμένο στα δύο δεκαδικά, ποτέ στρογγυλοποιημένο προς τα πάνω.

Ένα λυμένο παράδειγμα

Ας πούμε ότι η φωτογραφία σάς δίνει ένα μπλε του ναυτικού #1a3c6e και ένα κρεμ #fdf6e3. Η σχετική φωτεινότητα του μπλε βγαίνει περίπου 0.046 και του κρεμ περίπου 0.923. Ο λόγος είναι (0.923 + 0.05) / (0.046 + 0.05), δηλαδή περίπου 10.1:1 με αυτά τα στρογγυλοποιημένα νούμερα και 10.16:1 με τα ακριβή. Αυτό περνά το AAA για κάθε κείμενο, οπότε μπλε κείμενο σε κρεμ end card είναι ασφαλές σε οποιοδήποτε μέγεθος. Βάλτε ένα μεσαίο πορτοκαλί όπως το #e07a2e στο ίδιο κρεμ και ο λόγος πέφτει στο 2.78:1, που αποτυγχάνει ακόμη και για μεγάλο κείμενο. Κρατήστε το πορτοκαλί για ένα κουμπί με μαύρο κείμενο πάνω του (6.99:1, που είναι AA αλλά λίγο κάτω από το AAA), ή για ένα σχήμα χωρίς λέξεις.

Χρήση της εξαγωγής

Η εξαγωγή CSS είναι ένα μπλοκ :root με προσαρμοσμένες ιδιότητες, --color-1 για το χρώμα που καλύπτει το μεγαλύτερο μέρος της εικόνας και ούτω καθεξής προς τα κάτω. Το JSON περιέχει το hex, RGB, HSL κάθε χρώματος και το μερίδιό του στην εικόνα, το οποίο εύκολα επικολλάτε σε ένα αρχείο design token ή δίνετε σε ένα script. Μετονομάστε τις μεταβλητές μόλις μάθετε ποιο χρώμα είναι το φόντο, ποιο το κείμενο και ποιο η πινελιά τονισμού.

Τι δεν κάνει αυτό το εργαλείο

Δεν ξέρει ποια χρώματα είναι του brand σας. Μια φωτογραφία του προϊόντος σας πάνω σε ξύλινο τραπέζι θα περιλαμβάνει και το τραπέζι. Περικόψτε πρώτα στο προϊόν ή τη συσκευασία αν θέλετε μόνο τα δικά τους χρώματα. Επίσης δεν μπορεί να σας πει τα ακριβή χρώματα εκτύπωσης: τα νούμερα είναι τα pixel του αρχείου, μετά την κάμερά σας και οποιαδήποτε επεξεργασία, οπότε ελέγξτε τα με τον οδηγό του brand σας πριν τα δημοσιεύσετε. Και κρίνει μόνο την αντίθεση κειμένου. Το WCAG έχει ξεχωριστούς κανόνες για εικονίδια και στοιχεία διεπαφής, τους οποίους αυτός ο πίνακας δεν βαθμολογεί.

Αν προτιμάτε να μην το κάνετε με το χέρι

Το Hermoso είναι μάρκετινγκ στον αυτόματο πιλότο: ερευνά τις διαφημίσεις που ήδη αποδίδουν στην αγορά σας, φτιάχνει διαφημίσεις εικόνας και βίντεο στο ύφος του brand σας, προγραμματίζει τις αναρτήσεις και τρέχει πληρωμένες καμπάνιες στους δικούς σας διαφημιστικούς λογαριασμούς. Όταν προσθέτετε το brand σας από τον ιστότοπό σας, μαθαίνει τα προϊόντα, το λογότυπο και την παλέτα σας, και μπορείτε να ορίσετε χρώματα λεζάντας και end card με κωδικούς hex. Λειτουργεί στην εφαρμογή web, ή μέσα στο Claude, το ChatGPT και το Cursor μέσω του MCP server του.

Δωρεάν εργαλεία: Οδηγός μεγεθών για social media · Δημιουργία grid για Instagram · Δημιουργία Open Graph

Συχνές ερωτήσεις

Πώς παίρνω μια παλέτα χρωμάτων από μια φωτογραφία;

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

Ποια αναλογία αντίθεσης χρειάζομαι για το κείμενο;

Το WCAG 2.2 επίπεδο AA ζητά τουλάχιστον 4.5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο. Το επίπεδο AAA ζητά 7:1 και 4.5:1. Μεγάλο κείμενο είναι τουλάχιστον 18 στιγμές, ή 14 στιγμές με έντονη γραφή.

Είναι το 4.49:1 αρκετά κοντά για να περάσει το AA;

Όχι. Το W3C λέει ότι η υπολογισμένη αναλογία δεν πρέπει να στρογγυλοποιείται όταν συγκρίνεται με ένα όριο, οπότε το 4.499:1 δεν πληροί το 4.5:1. Το εργαλείο κρίνει τον ακριβή αριθμό.

Γιατί παίρνω την ίδια παλέτα κάθε φορά;

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

Ανεβαίνει η εικόνα μου;

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