Γεννήτρια παλέτας χρωμάτων

Πώς να χρησιμοποιήσετε τη γεννήτρια παλέτας χρωμάτων

1. Επιλέξτε ένα Βασικό χρώμα από το δείγμα χρώματος ή πληκτρολογήστε οποιονδήποτε κωδικό στο Κωδικός βασικού χρώματος (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), ένα όνομα CSS…).
2. Διαλέξτε μια Αρμονία: Συμπληρωματική, Αναλογική, Τριαδική, Διαιρεμένη συμπληρωματική, Τετραδική (ορθογώνιο), Τετράγωνο ή Μονοχρωματική.
3. Επιλέξτε τον Χρωματικός τροχός: HSL (κλασικός) ή OKLCH (αντιληπτικός). Η παλέτα ενημερώνεται όταν αλλάζετε οποιαδήποτε επιλογή· το Δημιουργία παλέτας την ανανεώνει επίσης.
4. Αντιγράψτε ένα μεμονωμένο χρώμα με το κουμπί Αντιγραφή κάτω από το δείγμα του ή διαλέξτε μορφή στο Εξαγωγή ως (Λίστα HEX, Μεταβλητές CSS, Μεταβλητές SCSS, Πίνακας JSON ή Χρώματα Tailwind) και χρησιμοποιήστε Αντιγραφή ή Λήψη για ολόκληρη την παλέτα.

Κάθε δείγμα δείχνει τον κωδικό HEX του σε μαύρο ή λευκό, όποιο έχει καλύτερη αντίθεση, και τη θέση του σε σχέση με το βασικό χρώμα (για παράδειγμα +120°).

Οι χρωματικές αρμονίες

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

• Συμπληρωματική (0°, 180°): το αντίθετο χρώμα. Μέγιστη αντίθεση, εξαιρετική για ένα κουμπί πρόσκλησης προς δράση απέναντι στο κύριο χρώμα της επωνυμίας.
• Αναλογική (−60°, −30°, 0°, +30°, +60°): γειτονικά χρώματα στον τροχό. Ήρεμοι, φυσικοί συνδυασμοί που ταιριάζουν σε φόντα και εικονογραφήσεις.
• Τριαδική (0°, 120°, 240°): τρεις ισαπέχουσες αποχρώσεις. Ζωντανή και ισορροπημένη· συνήθως κυριαρχεί ένα χρώμα και τα άλλα δύο είναι τονισμοί.
• Διαιρεμένη συμπληρωματική (0°, 150°, 210°): οι δύο γείτονες του συμπληρωματικού χρώματος. Ισχυρή αντίθεση με λιγότερη ένταση από ένα καθαρό συμπληρωματικό ζεύγος.
• Τετραδική (ορθογώνιο) (0°, 60°, 180°, 240°): δύο συμπληρωματικά ζεύγη. Πλούσιες παλέτες που χρειάζονται ένα κυρίαρχο χρώμα για να παραμείνουν συνεκτικές.
• Τετράγωνο (0°, 90°, 180°, 270°): τέσσερις ισαπέχουσες αποχρώσεις.
• Μονοχρωματική: μία απόχρωση σε πέντε βαθμίδες φωτεινότητας, από σκούρα έως ανοιχτή. Ιδανική για καταστάσεις διεπαφής, γραφήματα και διακριτικά σχέδια.

Τροχός HSL ή OKLCH;

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

Ο τροχός OKLCH (αντιληπτικός) περιστρέφει την απόχρωση στο χρωματικό μοντέλο Oklab, που έχει σχεδιαστεί ώστε η φωτεινότητα να φαίνεται συνεπής. Οι παλέτες που βασίζονται σε αυτό έχουν χρώματα με παρόμοιο οπτικό βάρος, κάτι που βοηθά στην προσβάσιμη αντίθεση. Ορισμένα χρώματα που προκύπτουν από την περιστροφή μπορεί να βγαίνουν εκτός όσων μπορεί να εμφανίσει μια οθόνη· τότε το εργαλείο μειώνει ελαφρά τον κορεσμό τους ώστε να μπορούν να εμφανιστούν.

Χρήση της εξαγόμενης παλέτας

Οι Μεταβλητές CSS παράγουν ένα μπλοκ :root με --color-1, --color-2… που μπορείτε να επικολλήσετε σε ένα φύλλο στυλ. Οι Μεταβλητές SCSS δίνουν γραμμές $color-1: …;, ο Πίνακας JSON δίνει μια λίστα με συμβολοσειρές HEX για σενάρια και τα Χρώματα Tailwind δίνουν ένα αντικείμενο colors με κλειδιά 100, 200, 300… για επικόλληση στη ρύθμιση του Tailwind.

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