Δημιουργός Χρωματικής Παλέτας - Δημιουργία Αρμονικών Χρωματικών Συνδυασμών

Τι είναι μια γεννήτρια χρωματικής παλέτας;

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

Πώς δημιουργεί μια παλέτα το εργαλείο

Το εργαλείο μετατρέπει το κύριο χρώμα από δεκαεξαδικό κωδικό (όπως το #3B82F6) στο χρωματικό μοντέλο HSL. Το HSL περιγράφει ένα χρώμα με τρεις αριθμούς:

• Απόχρωση: η θέση του χρώματος στον τροχό χρωμάτων των 360 μοιρών (0° είναι κόκκινο, 120° είναι πράσινο, 240° είναι μπλε).
• Κορεσμός: πόσο έντονο είναι το χρώμα, από 0% (γκρι) έως 100% (καθαρό χρώμα).
• Φωτεινότητα: πόσο κοντά βρίσκεται το χρώμα στο μαύρο ή στο λευκό, από 0% (μαύρο) έως 100% (λευκό).

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

Πώς υπολογίζονται τα συμπληρωματικά χρώματα

Ο τύπος:

$h' = (h + 180) \bmod 360$

όπου h είναι η απόχρωση του κύριου χρώματος σε μοίρες και h′ η νέα απόχρωση. Το βήμα mod επαναφέρει στον τροχό ένα αποτέλεσμα που ξεπερνά μια πλήρη περιστροφή.

Ο κορεσμός και η φωτεινότητα παραμένουν ίδια.

Παράδειγμα υπολογισμού: Το καθαρό μπλε, #0000FF, έχει απόχρωση 240°, κορεσμό 100% και φωτεινότητα 50%. Η προσθήκη 180° δίνει απόχρωση 60°. Η μετατροπή της απόχρωσης 60° ξανά σε δεκαεξαδικό, με τον ίδιο κορεσμό και την ίδια φωτεινότητα, παράγει το #FFFF00, ένα κίτρινο χρώμα. Έτσι, το εργαλείο συνδυάζει το μπλε με το κίτρινο και όχι με το πορτοκαλί.

Αυτό μπορεί να προκαλεί σύγχυση, επειδή στα μαθήματα τέχνης συχνά διδάσκεται ένας διαφορετικός τροχός χρωμάτων, ο χρωστικός τροχός RYB (κόκκινο-κίτρινο-μπλε), όπου το αντίθετο του μπλε είναι το πορτοκαλί. Το εργαλείο λειτουργεί με τον τροχό HSL που βασίζεται στο RGB και χρησιμοποιείται στις οθόνες, επομένως τα συμπληρωματικά ζεύγη του διαφέρουν από εκείνα του τροχού ανάμειξης χρωμάτων.

Πώς υπολογίζονται τα ανάλογα χρώματα

Τα ανάλογα χρώματα βρίσκονται κοντά στο κύριο χρώμα στον τροχό. Το εργαλείο δημιουργεί δύο αποχρώσεις σε απόσταση 30° και δύο αποχρώσεις σε απόσταση 60° από την κύρια απόχρωση, όλες με τον ίδιο κορεσμό και την ίδια φωτεινότητα.

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

όπου h είναι η απόχρωση του κύριου χρώματος.

Παράδειγμα υπολογισμού: Το μπλε, #0000FF (απόχρωση 240°), παράγει την απόχρωση 270° (#8000FF), την απόχρωση 210° (#0080FF), την απόχρωση 300° (#FF00FF) και την απόχρωση 180° (#00FFFF). Μαζί με το κύριο χρώμα, η παλέτα περιέχει πέντε χρώματα.

Πώς υπολογίζονται τα τριαδικά χρώματα

Τα τριαδικά χρώματα απέχουν 120° μεταξύ τους στον τροχό, σχηματίζοντας ένα ομοιόμορφα κατανεμημένο τρίο μαζί με το κύριο χρώμα.

$h + 120^{\circ}, \qquad h + 240^{\circ}$

Παράδειγμα υπολογισμού: Το κόκκινο, #FF0000 (απόχρωση 0°), παράγει την απόχρωση 120° (#00FF00, πράσινο) και την απόχρωση 240° (#0000FF, μπλε). Το σύνολο των τριών χρωμάτων είναι το κόκκινο, το πράσινο και το μπλε, δηλαδή οι ίδιες τρεις αποχρώσεις που χρησιμοποιούνται ως βασικά χρώματα στις ψηφιακές οθόνες.

Πώς υπολογίζονται τα μονοχρωματικά χρώματα

Τα μονοχρωματικά χρώματα διατηρούν την ίδια απόχρωση και τον ίδιο κορεσμό και αλλάζουν μόνο τη φωτεινότητα. Το εργαλείο μετατοπίζει τη φωτεινότητα κατά 15 και 30 ποσοστιαίες μονάδες προς κάθε κατεύθυνση, με όρια μεταξύ 5% και 95%.

$l \pm 15, \qquad l \pm 30$

όπου l είναι η φωτεινότητα του κύριου χρώματος, σε ποσοστιαίες μονάδες.

Παράδειγμα υπολογισμού: Το μπλε, #0000FF (φωτεινότητα 50%), παράγει φωτεινότητα 65% (#4D4DFF), φωτεινότητα 35% (#0000B3), φωτεινότητα 80% (#9999FF) και φωτεινότητα 20% (#000066).

Εξαιτίας των ορίων 5% και 95%, ένα κύριο χρώμα που είναι ήδη πολύ φωτεινό ή πολύ σκοτεινό μπορεί να φτάσει δύο φορές στο ίδιο όριο. Το μαύρο, #000000, δίνει φωτεινότητα 15% (#262626), 5% (#0D0D0D), 30% (#4D4D4D) και ξανά 5% (#0D0D0D), επομένως ένα χρώμα επαναλαμβάνεται.

Χρήση του εργαλείου

1. Επιλέξτε ένα κύριο χρώμα με τον επιλογέα χρωμάτων ή πληκτρολογήστε έναν δεκαεξαδικό κωδικό, όπως #3B82F6.
2. Επιλέξτε έναν τύπο αρμονίας: συμπληρωματική, ανάλογη, τριαδική ή μονοχρωματική.
3. Δείτε την παλέτα που δημιουργήθηκε. Κάθε δείγμα χρώματος εμφανίζει τον δεκαεξαδικό κωδικό του σε ένα κουμπί.
4. Κάντε κλικ σε αυτό το κουμπί για να αντιγράψετε τον δεκαεξαδικό κωδικό ή χρησιμοποιήστε την επιλογή «Copy All Colors» για να αντιγράψετε ολόκληρη την παλέτα ταυτόχρονα.

Έλεγχος αντίθεσης για προσβασιμότητα

Κάθε δείγμα χρώματος εμφανίζει δύο μικρές ενδείξεις: μία για την αντίθεση με το λευκό και μία για την αντίθεση με το μαύρο. Το εργαλείο υπολογίζει έναν λόγο αντίθεσης χρησιμοποιώντας τον τύπο WCAG (Οδηγίες προσβασιμότητας περιεχομένου ιστού):

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

όπου C είναι ο λόγος αντίθεσης.

Το L1 είναι η σχετική φωτεινότητα του πιο ανοιχτού χρώματος και το L2 η σχετική φωτεινότητα του πιο σκούρου χρώματος. Η φωτεινότητα προκύπτει από τις τιμές κόκκινου, πράσινου και μπλε του χρώματος. Μια ένδειξη εμφανίζει «AA» όταν ο λόγος είναι 4,5 ή μεγαλύτερος, δηλαδή το ελάχιστο όριο WCAG για κείμενο κανονικού μεγέθους. Εμφανίζει «!» όταν ο λόγος είναι μικρότερος από 4,5. Όταν τοποθετείτε τον δείκτη πάνω από μια ένδειξη, εμφανίζεται ο ακριβής λόγος. Το μαύρο κείμενο σε λευκό φόντο έχει λόγο 21, τη μεγαλύτερη δυνατή τιμή.

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

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

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

Γιατί το εργαλείο συνδυάζει το μπλε με το κίτρινο αντί για το πορτοκαλί στα συμπληρωματικά χρώματα; Το εργαλείο περιστρέφει την απόχρωση κατά 180° στον τροχό HSL, ο οποίος βασίζεται στον τρόπο με τον οποίο οι οθόνες αναμειγνύουν κόκκινο, πράσινο και μπλε φως. Ο τροχός χρωμάτων κόκκινο-κίτρινο-μπλε που διδάσκεται στα μαθήματα τέχνης παράγει διαφορετικά συμπληρωματικά ζεύγη, επειδή αναμειγνύει χρωστικές ουσίες και όχι φως.

Πόσα χρώματα παράγει κάθε τύπος αρμονίας; Η συμπληρωματική αρμονία παράγει συνολικά 2 χρώματα, μαζί με το κύριο. Η τριαδική παράγει 3. Η ανάλογη παράγει 5. Η μονοχρωματική παράγει 5.

Ποιο χρωματικό μοντέλο χρησιμοποιεί εσωτερικά το εργαλείο; Το HSL (απόχρωση, κορεσμός, φωτεινότητα). Μετατρέπει τον δεκαεξαδικό κωδικό εισόδου σε HSL, εκτελεί τους υπολογισμούς και, στη συνέχεια, μετατρέπει το αποτέλεσμα ξανά σε δεκαεξαδικό.

Ελέγχει το εργαλείο αν τα χρώματα είναι προσβάσιμα; Ναι. Κάθε δείγμα χρώματος δείχνει αν έχει επαρκή αντίθεση με το λευκό και το μαύρο ώστε να πληροί το πρότυπο WCAG AA για κανονικό κείμενο, το οποίο απαιτεί λόγο τουλάχιστον 4,5.

Μπορώ να χρησιμοποιήσω περισσότερους από έναν τύπους αρμονίας σε ένα έργο; Ναι. Πολλά σχέδια συνδυάζουν τύπους αρμονίας, για παράδειγμα ένα σύνολο ανάλογων χρωμάτων για τα κύρια χρώματα και ένα συμπληρωματικό χρώμα για ένα κουμπί ή μια επισήμανση.

Μορφές χρωμάτων

Το εργαλείο γράφει κάθε χρώμα που δημιουργείται ως εξαψήφιο δεκαεξαδικό κωδικό, ο οποίος προηγείται από το σύμβολο # (για παράδειγμα #ff0000 για το κόκκινο). Οι δεκαεξαδικοί κωδικοί αντιστοιχούν απευθείας σε τιμές κόκκινου, πράσινου και μπλε από 0 έως 255 η καθεμία. Το κύριο χρώμα εμφανίζεται ακριβώς όπως καταχωρίστηκε, επομένως μια τριψήφια συντομογραφία όπως #F00 παραμένει σε σύντομη μορφή. Οι τριψήφιοι κωδικοί αντιστοιχούν στο ίδιο χρώμα με την εξαψήφια μορφή: κάθε ψηφίο διπλασιάζεται, επομένως #F00 είναι #FF0000. Το HSL είναι ένας εναλλακτικός τρόπος περιγραφής των ίδιων χρωμάτων, με χρήση της απόχρωσης, του κορεσμού και της φωτεινότητας αντί για τις ποσότητες κόκκινου, πράσινου και μπλε.