Το Color Palette σαρώνει κάθε στοιχείο σε ιστοσελίδα και εξάγει το πλήρες σύνολο χρωμάτων που χρησιμοποιούνται — από κείμενο και φόντα έως περιγράμματα, σκιές και accent χρώματα. Τα χρώματα εμφανίζονται ως οπτικά swatches ταξινομημένα κατά συχνότητα (πιο χρησιμοποιούμενα πρώτα), καθένα εμφανίζοντας την τιμή HEX και τον αριθμό χρήσης. Κάντε κλικ σε οποιοδήποτε swatch για αντιγραφή ή εξαγάγετε ολόκληρη την παλέτα ως λίστα κωδικών χρωμάτων.
Κάθε καλοσχεδιασμένος ιστότοπος έχει σταθερή παλέτα χρωμάτων — συνήθως 3-8 κύρια χρώματα συν μερικά ουδέτερα. Το Color Palette εξάγει αυτήν την παλέτα αυτόματα σαρώνοντας τις υπολογισμένες τιμές color, background-color, border-color και box-shadow κάθε στοιχείου. Το αποτέλεσμα είναι μια ταξινομημένη κατά συχνότητα συλλογή κάθε χρώματος στη σελίδα, δίνοντάς σας την πλήρη εικόνα του χρωματικού συστήματος του ιστότοπου. Τα κυρίαρχα χρώματα (το κύριο brand color, χρώμα φόντου, χρώμα κειμένου) εμφανίζονται πρώτα με υψηλούς αριθμούς χρήσης. Accent χρώματα και μεμονωμένες τιμές εμφανίζονται πιο κάτω. Αυτό είναι ανεκτίμητο για έρευνα σχεδιασμού — επισκεφθείτε οποιονδήποτε ιστότοπο και εξάγετε την ακριβή παλέτα του σε δευτερόλεπτα. Είναι επίσης χρήσιμο για έλεγχο του δικού σας ιστότοπου: υπάρχουν χρώματα που δεν ανήκουν στο design system σας; Χρησιμοποιείτε 5 ελαφρώς διαφορετικές αποχρώσεις γκρι όταν η προδιαγραφή ορίζει μόνο 3;
Σαρώνει κάθε ορατό στοιχείο στη σελίδα και εξάγει χρώματα από υπολογισμένες ιδιότητες: color, background-color, border-color, χρώμα box-shadow, outline-color και text-decoration-color. Κάθε χρώμα που χρησιμοποιείται στη σελίδα καταγράφεται.
Τα χρώματα ταξινομούνται κατά αριθμό χρήσης — το πιο χρησιμοποιούμενο χρώμα εμφανίζεται πρώτο. Τα κυρίαρχα brand χρώματα και φόντα ανεβαίνουν στην κορυφή, ενώ τα μεμονωμένα accent χρώματα εμφανίζονται τελευταία. Δείτε άμεσα τα κύρια, δευτερεύοντα και accent χρώματα της σελίδας.
Κάθε χρώμα αποδίδεται ως μεγάλο οπτικό swatch με τον κωδικό HEX και τον αριθμό χρήσης εμφανιζόμενο από κάτω. Τα swatches είναι αρκετά μεγάλα για διάκριση λεπτών διαφορών απόχρωσης (όπως #333 έναντι #2a2a2a).
Κάντε κλικ σε οποιοδήποτε color swatch για άμεση αντιγραφή της τιμής HEX στο πρόχειρό σας. Δεν χρειάζεται να ανοίξετε πίνακα χρωμάτων ή δευτερεύον παράθυρο — ένα κλικ, αντιγράφηκε, τελείωσε.
Κάντε κλικ στο «Εξαγωγή Όλων» για να αντιγράψετε ολόκληρη την παλέτα ως μορφοποιημένη λίστα κωδικών HEX. Επικολλήστε σε εργαλείο σχεδιασμού, αρχείο CSS variables ή τεκμηρίωση χρωμάτων. Η λίστα διατηρεί τη σειρά ταξινόμησης κατά συχνότητα.
Τα χρώματα κανονικοποιούνται (αναπαραστάσεις rgb και hex του ίδιου χρώματος συγχωνεύονται) και αποεπαναληψιοποιούνται. Η παλέτα εμφανίζει μόνο μοναδικά χρώματα, με συνδυασμένους αριθμούς χρήσης για διπλές αναπαραστάσεις.
Επισκεφθείτε ιστότοπους με όμορφα χρωματολόγια και εξάγετε την ακριβή παλέτα τους. Χρησιμοποιήστε τα χρώματα ως αφετηρία για τον δικό σας σχεδιασμό — ή απλά τεκμηριώστε ποιοι συνδυασμοί χρωμάτων λειτουργούν καλά μαζί.
Εκτελέστε Color Palette στον δικό σας ιστότοπο για επαλήθευση χρωματικής συνέπειας brand. Υπάρχουν 4 ελαφρώς διαφορετικά μπλε εκεί που θα έπρεπε να υπάρχει 1; Εισχωρούν χρώματα εκτός brand; Η ταξινόμηση κατά συχνότητα κάνει τις ασυνέπειες προφανείς.
Εξάγετε την παλέτα και μετατρέψτε την σε CSS custom properties (--color-primary, --color-secondary κ.λπ.). Η έξοδος ταξινομημένη κατά συχνότητα σάς λέει ποια χρώματα αξίζουν τους ρόλους primary, secondary και accent.
Εξάγετε παλέτες χρωμάτων από ιστότοπους ανταγωνιστών για να κατανοήσετε τη θέση brand τους. Ζεστά χρώματα έναντι ψυχρών, υψηλή αντίθεση έναντι αμυδρών — η παλέτα αποκαλύπτει σκόπιμες αποφάσεις σχεδιασμού.
Δείτε όλα τα χρώματα κειμένου δίπλα στα χρώματα φόντου. Υπάρχουν συνδυασμοί κειμένου-φόντου με πολύ χαμηλή αντίθεση; Η παλέτα σάς δίνει το πλήρες σύνολο χρωμάτων για έλεγχο έναντι απαιτήσεων αντίθεσης WCAG.
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο Color Palette. Το εργαλείο σαρώνει κάθε στοιχείο στη σελίδα και εξάγει όλες τις τιμές χρωμάτων.
Εμφανίζεται πλέγμα color swatches, ταξινομημένο κατά συχνότητα χρήσης. Τα πιο χρησιμοποιούμενα χρώματα είναι στην κορυφή. Κάθε swatch εμφανίζει τον κωδικό HEX και τον αριθμό στοιχείων που χρησιμοποιούν αυτό το χρώμα.
Κάντε κλικ σε οποιοδήποτε swatch για να αντιγράψετε την τιμή HEX του στο πρόχειρό σας. Εμφανίζεται σύντομη επιβεβαίωση.
Κάντε κλικ στο «Εξαγωγή Όλων» για να αντιγράψετε κάθε χρώμα ως μορφοποιημένη λίστα. Επικολλήστε στο αρχείο CSS variables, εργαλείο σχεδιασμού ή τεκμηρίωση.
Πλοηγηθείτε σε διαφορετικές σελίδες του ίδιου ιστότοπου και εξάγετε παλέτες για επαλήθευση χρωματικής συνέπειας σε ολόκληρο τον ιστότοπο.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
