Δημιουργός Παλέτας Χρωμάτων

Διαφήμιση

Δημιουργήστε όμορφές παλέτες με αρμονίες, τόνους Material Design και πολλαπλές μορφές εξαγωγής.

?Δημιουργεί παλέτες χρησιμοποιώντας σχέσεις χρώματικού κύκλου (συμπληρωματικό, ανάλογο, τριαδικό, κλπ.). Τα χρώματα σχετίζονται μαθηματικά για οπτική ισορροπία.
?Δημιουργήστε παλέτες κατά διάθεση, θέμα ή λέξη-κλειδί. Ρυθμίστε τα ρυθμιστικά θερμοκρασίας και ενέργειας.
?Δημιουργεί αισθητικά ευχάριστες τυχαίες παλέτες χρησιμοποιώντας κατανομή χρυσής αναλογίας. Ορίστε τιμή σπόρου για αναπαραγωγή.
?Δημιουργεί τονική παλέτα με 10 αποχρώσεις (50-900) βασισμένη στο Material Design. Ιδανική για σχεδιασμό UI με συνεπή εξέλιξη φωτεινού-σκούρου.
?Δημιουργεί παλέτα με σημασιολογικούς ρόλους: πρωτεύον, δευτερεύον, επιτυχία, προειδοποίηση, σφάλμα και πληροφορία. Τα χρώματα εναρμονίζονται προς το πρωτεύον βάσει αρχών Material Design 3 — κάθε τόνος προσαρμόζεται ελαφρά για οπτική συνοχή.
Πατήστε το πλήκτρο διαστήματος για αναδημιουργία με τυχαίο χρώμα
Ψυχρό Θερμό
Θερμοκρασία
Ήρεμο Ζωηρό
Ενέργεια
Ρόλοι Επιλογή όλων | Κανένας

Palette

?Κάντε κλικ σε οποιοδήποτε δείγμα χρώματος για να αντιγράψετε τον κωδικό HEX. Χρησιμοποιήστε αυτά τα χρώματα σε CSS, εργαλεία σχεδίασης ή οδηγούς στυλ.

Προσβασιμότητα

?Ελέγξτε αν οι συνδυασμοί χρωμάτων πληρούν τις οδηγίες WCAG (4,5:1 για AA). Χρησιμοποιήστε την προσομοίωση αχρώματοψίας για όλους τους χρήστες.
Αναλογία: Διαφορά φωτεινότητας μεταξύ χρωμάτων (υψηλότερη = καλύτερη αναγνωσιμότητα) AA: Ελάχιστο 4,5:1 για κανονικό κείμενο, 3:1 για μεγάλο κείμενο (WCAG Επίπεδο AA) AAA: Βελτιωμένο: 7:1 για κανονικό κείμενο, 4,5:1 για μεγάλο κείμενο (WCAG Επίπεδο AAA)
?Κανονική χρώματική όραση (τριχρώματισμός). Δείχνει πώς εμφανίζεται η παλέτα σε άτομα με τυπική αντίληψη χρωμάτων.
?Τυφλότητα στο κόκκινο (πρωτανοπία). Επηρεάζει ~1% των ανδρών. Το κόκκινο εμφανίζεται πιο σκούρο.
?Τυφλότητα στο πράσινο (δευτερανοπία). Η πιο κοινή μορφή, επηρεάζει ~6% των ανδρών. Μειωμένη αντίληψη πράσινου.
?Τυφλότητα στο μπλε (τριτανοπία). Σπάνια, επηρεάζει <0.01% των ανθρώπων. Σύγχυση μπλε-κίτρινο.

Πρότυπα Σκίασης

?Οι αποχρώσεις προσθέτουν λευκό (πιο ανοιχτό), οι σκιές μαύρο (πιο σκούρο), η αδιαφάνεια δημιουργεί διαφανείς παραλλαγές. Για hover, φόντα και οπτική ιεραρχία.
Εμφάνιση:
Συμπερίληψη στην εξαγωγή: ?Επιλέξτε ποιες πληροφορίες να συμπεριληφθούν κατά την εξαγωγή σε PNG, PDF ή HTML. Οι εξαγωγές κώδικα (CSS, SCSS, JSON) περιλαμβάνουν πάντα τις επιλεγμένες επιλογές.
Διαφήμιση

Σχετικά με αυτό το εργαλείο

Ο δημιουργός παλετών χρωμάτων είναι ένα επαγγελματικό εργαλείο σχεδιασμού που δίνει τη δυνατότητα σε σχεδιαστές, πρόγραμματιστές και καλλιτέχνες να δημιουργούν οπτικά αρμονικά χρώματικά σχήματα βασισμένα σε αιώνες θεωρίας χρωμάτων. Υποστηρίζει εννέα διακριτές σχέσεις χρώματικής αρμονίας από τον χρώματικό κύκλο: συμπληρωματικό, ανάλογο, τριαδικό, τετραδικό, διαιρεμένο συμπληρωματικό, μονοχρώματικό, διπλό συμπληρωματικό, σύγκρουση και πενταδικό. Κάθε τύπος αρμονίας παράγει μαθηματικά ακριβείς συνδυασμούς χρωμάτων για οπτική ισορροπία. Η θεωρία χρωμάτων ως τυπική επιστήμη έχει τις ρίζες της στη δημοσίευση του Sir Isaac Newton "Opticks" το 1704, όπου οργάνωσε για πρώτη φορά τα χρώματα σε κυκλικό διάγραμμα. Ο σύγχρόνος χρώματικός κύκλος βελτιώθηκε από καλλιτέχνες και επιστήμονες όπως ο Goethe, ο Chevreul και ο Itten στη σχολή Bauhaus. Εξερευνήστε περισσότερα στους πόρους θεωρίας χρωμάτων του Interaction Design Foundation και τις κατευθυντήριες γραμμές αντίθεσης WCAG 2.1 του W3C. Πέρα από τις παραδοσιακές αρμονίες, αυτό το εργαλείο δημιουργεί τονικές παλέτες Material Design με 10 βαθμονομημένες αποχρώσεις (50 έως 900), τυχαίες παλέτες με κατανομή χρυσής αναλογίας και πλήρη σημασιολογικά συστήματα σχεδιασμού. Ο ενσωματωμένος έλεγχος προσβασιμότητας WCAG διασφαλίζει ότι οι χρώματικές σας επιλογές πληρούν τις απαιτήσεις αντίθεσης, ενώ η προσομοίωση αχρώματοψίας αποκαλύπτει πώς περίπου το 8% των ανδρών και το 0,5% των γυναικών θα αντιληφθούν την παλέτα σας. Εξαγωγή σε CSS, SCSS, Tailwind, JSON, Markdown, PNG, PDF ή DOCX. Όλη η επεξεργασία γίνεται τοπικά στο πρόγραμμα περιήγησής σας.

Πηγές: W3C

Πώς να Χρησιμοποιήσετε

  1. Επιλέξτε λειτουργία δημιουργίας: Αρμονία (σχέσεις χρώματικού κύκλου), Τυχαίο (χρυσή αναλογία), Material (τονικές αποχρώσεις) ή Σημασιολογικό (σύστημα σχεδιασμού).
  2. Ορίστε το βασικό σας χρώμα χρησιμοποιώντας τον επιλογέα χρώματος ή εισάγοντας κωδικό HEX. Για τυχαίες παλέτες, προαιρετικά ορίστε τιμή σπόρου για αναπαραγώγιμα αποτελέσματα.
  3. Ελέγξτε την παλέτα σας, επιβεβαιώστε τις αναλογίες αντίθεσης προσβασιμότητας και εξάγετε στη μορφή της επιλογής σας (CSS, SCSS, Tailwind, JSON, HTML, PDF ή PNG).

Η Επιστήμη της Χρωματικής Αρμονίας

Η ανθρώπινη αντίληψη της χρώματικής αρμονίας μελετάται εδώ και αιώνες, γεφυρώνοντας τέχνη, φυσική και νευροεπιστήμη. Όταν ο Isaac Newton διέσπασε το λευκό φως μέσω πρίσματος το 1666, αποκάλυψε το ορατό φάσμα και έθεσε τα θεμέλια για την κατανόηση του πώς τα χρώματα σχετίζονται μεταξύ τους. Η διάταξη αυτών των φασματικών χρωμάτων σε κύκλο έγινε η βάση όλων των συστημάτων χρώματικής αρμονίας. Στις αρχές του 19ου αιώνα, ο Γάλλος χημικός Michel Eugene Chevreul ανακάλυψε τον νόμο της ταυτόχρονης αντίθεσης εργαζόμενος στο εργοστάσιο ταπισερί Gobelins. Παρατήρησε ότι τα γειτονικά χρώματα επηρεάζουν την αντιληπτή εμφάνιση του άλλου, κάνοντας τα γειτονικά χρώματα να μετατοπίζονται προς το συμπλήρωμα του άλλου. Αυτή η ανακάλυψη επηρέασε βαθιά τους Ιμπρεσιονιστές ζωγράφους και παραμένει θεμελιώδης. Η σχολή Bauhaus (1919-1933) τυποποίησε τη θεωρία χρωμάτων για την εκπαίδευση σχεδιασμού μέσω του έργου των Johannes Itten, Josef Albers και Wassily Kandinsky. Οι επτά χρώματικές αντιθέσεις του Itten (απόχρωση, φωτεινό-σκοτεινό, ψυχρό-θερμό, συμπληρωματικό, ταυτόχρονο, κορεσμός και έκταση) παρείχαν ένα σύστηματικό πλαίσιο. Ο Albers απέδειξε αργότερα στο "Interaction of Color" ότι το χρώμα είναι εγγενώς σχετικό. Η σύγχρονη επιστήμη χρωμάτων βασίζεται στο χρώματικό χώρο CIE 1931, που χαρτογραφεί μαθηματικά την ανθρώπινη αντίληψη χρωμάτων. Ο χρώματικός χώρος CIELAB του 1976 μοντελοποιεί την αντιληπτική ομοιομορφία. Αυτή η επιστήμη στηρίζει εργαλεία όπως ο έλεγχος αντίθεσης WCAG, όπου ο τύπος σχετικής φωτεινότητας εξασφαλίζει επαρκή αναγνωσιμότητα. Σήμερα, αυτές οι αρχές καθοδηγούν τη δημιουργία συστημάτων σχεδιασμού που χρησιμοποιούνται από δισεκατομμύρια ανθρώπους σε εταιρείες όπως η Google, η Apple και η Microsoft.

Κατανόηση των Αποτελεσμάτων σας

Κατά την αξιολόγηση μιας δημιουργημένης παλέτας, λάβετε υπόψη το οπτικό βάρος και τον συναισθηματικό αντίκτυπο κάθε χρώματος. Τα θερμά χρώματα (κόκκινα, πορτοκαλί, κίτρινα) τείνουν να προβάλλονται οπτικά και να δημιουργούν ενέργεια, ενώ τα ψυχρά χρώματα (μπλε, πράσινα, μοβ) υποχωρούν και προκαλούν ηρεμία. Μια ισορροπημένη παλέτα χρησιμοποιεί τυπικά ένα κυρίαρχο χρώμα για το 60% του σχεδιασμού, ένα δευτερεύον για το 30% και μια πινελιά για το 10%. Οι αριθμοί αναλογίας αντίθεσης στον πίνακα προσβασιμότητας δείχνουν την αναγνωσιμότητα. Αναλογία 4,5:1 ή υψηλότερη (επιτυχία AA) σημαίνει ότι το ζεύγος χρωμάτων είναι ασφαλές για κείμενο σώματος. Αναλογίες μεταξύ 3:1 και 4,5:1 είναι κατάλληλες μόνο για μεγάλο κείμενο (18pt ή 14pt bold). Αναλογίες κάτω από 3:1 πρέπει να αποφεύγονται για κείμενο. Κατά την εξέταση προσομοιώσεων αχρώματοψίας, δώστε ιδιαίτερη προσοχή στο αν οι βασικές διακρίσεις της παλέτας σας παραμένουν ορατές. Αν δύο σημασιολογικά διαφορετικά χρώματα (όπως πράσινο επιτυχίας και κόκκινο σφάλματος) εμφανίζονται πανομοιότυπα στη δευτερανοπία, εξετάστε το ενδεχόμενο προσθήκης δευτερευόντων ενδείξεων.

Πώς να Χρησιμοποιήσετε

  1. Επιλέξτε λειτουργία δημιουργίας: Αρμονία (σχέσεις χρώματικού κύκλου), Τυχαίο (χρυσή αναλογία), Material (τονικές αποχρώσεις) ή Σημασιολογικό (σύστημα σχεδιασμού).
  2. Ορίστε το βασικό σας χρώμα χρησιμοποιώντας τον επιλογέα χρώματος ή εισάγοντας κωδικό HEX. Για τυχαίες παλέτες, προαιρετικά ορίστε τιμή σπόρου για αναπαραγώγιμα αποτελέσματα.
  3. Ελέγξτε την παλέτα σας, επιβεβαιώστε τις αναλογίες αντίθεσης προσβασιμότητας και εξάγετε στη μορφή της επιλογής σας (CSS, SCSS, Tailwind, JSON, HTML, PDF ή PNG).

Μεθοδολογία

Οι χρώματικές αρμονίες υπολογίζονται χρησιμοποιώντας ακριβείς μετασχηματισμούς HSL (Απόχρωση, Κορεσμός, Φωτεινότητα) στον χρώματικό κύκλο. Η συνιστώσα της απόχρωσης περιστρέφεται κατά συγκεκριμένα διαστήματα μοιρών για κάθε τύπο αρμονίας: 180 μοίρες για συμπληρωματικό, 30 μοίρες για ανάλογο, 120 μοίρες για τριαδικό, 90 μοίρες για τετραδικό και 72 μοίρες για πενταδικό. Το διαιρεμένο συμπληρωματικό συνδυάζει τη βάση με δύο χρώματα δίπλα στο συμπλήρωμά της στις 150 και 210 μοίρες. Οι τονικές παλέτες Material Design δημιουργούνται προσαρμόζοντας σύστηματικά τη φωτεινότητα και τον κορεσμό του βασικόύ χρώματος σε δέκα βαθμονομημένα βήματα. Οι πιο ανοιχτές αποχρώσεις (50-300) μειώνουν ελαφρά τον κορεσμό αυξάνοντας τη φωτεινότητα, και οι πιο σκούρες (600-900) μειώνουν τη φωτεινότητα διατηρώντας τον κορεσμό. Η δημιουργία τυχαίων παλετών χρησιμοποιεί τη χρυσή γωνία (περίπου 137,5 μοίρες), που προέρχεται από τη χρυσή αναλογία (phi = 1,618), για ομοιόμορφή κατανομή αποχρώσεων. Η επικύρωση προσβασιμότητας ακολουθεί τον τύπο σχετικής φωτεινότητας WCAG 2.1, υπολογίζοντας αναλογίες αντίθεσης. Η προσομοίωση αχρώματοψίας εφαρμόζει κλινικά επικυρωμένους πίνακες μετασχηματισμού που μοντελοποιούν τις συναρτήσεις απόκρισης κωνίων πρωτανοπίας, δευτερανοπίας και τριτανοπίας.

Πρακτικά Παραδείγματα

Μια τεχνολογική startup μπορεί να χρησιμοποιήσει μια τριαδική παλέτα με ένα ζωντανό μπλε (#2563EB), θερμό πορτοκαλί τόνο (#EA580C) και φρέσκο πράσινο για καταστάσεις επιτυχίας (#16A34A). Αυτό δημιουργεί μια δυναμική ταυτότητα μάρκας διατηρώντας σαφή οπτική ιεραρχία. Ένα ηλεκτρονικό κατάστημα μόδας θα μπορούσε να χρησιμοποιήσει μια ανάλογη παλέτα απαλών ροζ και μοβ για πολυτελή αίσθηση, με έναν μοναδικό συμπληρωματικό χρυσό τόνο για κουμπιά δράσης. Μια εφαρμογή υγειονομικής περίθαλψης ωφελείται από μια μονοχρώματική μπλε παλέτα που μεταδίδει εμπιστοσύνη, με σημασιολογικό κόκκινο αποκλειστικά για κρίσιμες ειδοποιήσεις.

Συμβουλές και Βέλτιστες Πρακτικές

Ξεκινήστε με το κύριο χρώμα της μάρκας σας και επεκταθείτε χρησιμοποιώντας αρμονίες. Οι ανάλογες παλέτες αισθάνονται συνεκτικές και ήρεμες, ενώ οι συμπληρωματικές δημιουργούν ζωηρή αντίθεση. Για τα περισσότερα web projects, μια παλέτα 5-7 χρωμάτων αρκεί σε συνδυασμό με αποχρώσεις και σκιές. Πάντα δοκιμάζετε την παλέτα σας τόσο σε λευκό όσο και σε σκούρο φόντο. Ένα χρώμα τέλειο στο λευκό μπορεί να χάσει αντίκτυπο στο dark mode. Χρησιμοποιήστε τα πρότυπα σκίασης για να δημιουργήσετε αποχρώσεις που λειτουργούν και στα δύο πλαίσια. Περιορίστε τα κορεσμένα χρώματα σε στοιχεία έμφασης όπως κουμπιά και συνδέσμους. Μεγάλες περιοχές υψηλόύ κορεσμού προκαλούν οπτική κόπωση. Αντίθετα, χρησιμοποιήστε αποκορεσμένες εκδοχές για φόντα, διατηρώντας τον πλήρη κορεσμό για διαδραστικά στοιχεία.

Πηγές

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

Ενσωμάτωση εργαλείου

Λήψη κώδικα →

Σας φάνηκε χρήσιμο αυτό το εργαλείο;
Θέλετε να μας πείτε περισσότερα;
0/500
Θέλετε να επικοινωνήσουμε μαζί σας;
Ευχαριστούμε για τα σχόλιά σας!

Συχνές ερωτήσεις
Τι είναι οι χρώματικές αρμονίες;
Οι χρώματικές αρμονίες είναι συνδυασμοί βασισμένοι σε θέσεις στον χρώματικό κύκλο. Προσφέρουμε 9 τύπους: Συμπληρωματικό (180°), Ανάλογο (±30°), Τριαδικό (120°), Τετραδικό (90°), Διαιρεμένο-Συμπληρωματικό, Μονοχρώματικό, Διπλό-Συμπληρωματικό, Σύγκρουση (90°) και Πενταδικό (72°).
Τι είναι μια τονική παλέτα Material Design;
Οι τονικές παλέτες Material Design αποτελούνται από 10 αποχρώσεις ενός μόνο χρώματος, αριθμημένες από 50 (πιο ανοιχτό) έως 900 (πιο σκούρο). Περιλαμβάνουν: 50, 100, 200, 300, 400, 500 (βάση), 600, 700, 800 και 900.
Πώς διασφαλίζω ότι τα χρώματά μου είναι προσβάσιμα;
Χρησιμοποιήστε τον πίνακα προσβασιμότητας για να ελέγξετε τις αναλογίες αντίθεσης WCAG. Για κανονικό κείμενο, στοχεύστε τουλάχιστον 4,5:1 (επίπεδο AA). Για μεγάλο κείμενο (18pt+), το 3:1 είναι αποδεκτό. Για συμμόρφωση AAA, στοχεύστε 7:1.
Ποιες μορφές εξαγωγής είναι διαθέσιμες;
Εξάγετε την παλέτα σας ως: προσαρμοσμένες ιδιότητες CSS (μεταβλητές :root), μεταβλητές SCSS/Sass, config Tailwind CSS, δεδομένα JSON, τεκμηρίωση Markdown, εικόνα PNG δείγματος, έγγραφο PDF με λεπτομέρειες χρώματος, ή έγγραφο Word DOCX.
Αποστέλλονται τα δεδομένα μου σε server;
Όχι. Όλη η δημιουργία παλέτας και οι υπολογισμοί χρωμάτων γίνονται εξ ολοκλήρου στον browser σας χρησιμοποιώντας JavaScript. Δεν μεταδίδονται δεδομένα χρωμάτων, προτιμήσεις ή παλέτες σε κανέναν server. Οι επιλογές χρωμάτων σας παραμένουν απόλυτα ιδιωτικές στη συσκευή σας.
Μπορώ να αναπαράγω την ίδια παλέτα αργότερα;
Ναι. Για παλέτες βασισμένες σε αρμονία, εισάγετε απλά το ίδιο βασικό χρώμα και επιλέξτε τον ίδιο τύπο αρμονίας για πανομοιότυπα αποτελέσματα. Για τυχαίες παλέτες, χρησιμοποιήστε τη δυνατότητα τιμής σπόρου για να αναπαράγετε την ίδια ακριβώς παλέτα ανά πάσα στιγμή. Μπορείτε επίσης να εξάγετε την παλέτα σας ως JSON ή CSS.