CodeKitHubΤι είναι αυτό το εργαλείο;
Μια κλίμακα αποχρώσεων είναι μια σειρά παραλλαγών ενός χρώματος σε διαφορετικά επίπεδα φωτεινότητας, που χρησιμοποιείται σε όλο το σχεδιασμό διεπαφής χρήστη για πράγματα όπως καταστάσεις hover, απενεργοποιημένες καταστάσεις, περιγράμματα και φόντα που πρέπει να σχετίζονται με ένα χρώμα επωνυμίας χωρίς να είναι πανομοιότυπα με αυτό.
Αυτό το εργαλείο μετατρέπει το βασικό σας χρώμα σε HSL, διατηρεί την απόχρωση και τον κορεσμό σταθερά και μεταβάλλει τη φωτεινότητα από περίπου 95% (σχεδόν λευκή απόχρωση) έως περίπου 10% (σχεδόν μαύρη σκιά), με το αρχικό σας χρώμα τοποθετημένο στη φυσική του θέση στη μέση της κλίμακας.
Γιατί να το χρησιμοποιήσετε;
- Δημιουργεί μια κλίμακα στιλ συστήματος σχεδίασης (όπως η κλίμακα 50/100/200.../900 του Tailwind) από οποιοδήποτε μεμονωμένο χρώμα, όχι μόνο από μια σταθερή προκαθορισμένη παλέτα.
- Επιλέξτε 7, 9 ή 11 βήματα ανάλογα με το πόσο λεπτομερή χρειάζεστε την κλίμακα.
- Κάθε βήμα εμφανίζει τον ακριβή κωδικό HEX και το ποσοστό φωτεινότητάς του — κάντε κλικ για αντιγραφή.
- Διατηρεί την απόχρωση και τον κορεσμό σταθερά σε όλη την κλίμακα, ώστε όλες οι αποχρώσεις να φαίνονται σαφώς σχετιζόμενες με το βασικό χρώμα αντί να μετατοπίζονται προς το γκρι.
- Δωρεάν, άμεσο και εντελώς τοπικό.
Πώς χρησιμοποιείται
- Επιλέξτε το βασικό σας χρώμα χρησιμοποιώντας τον επιλογέα χρωμάτων ή πληκτρολογώντας έναν κωδικό HEX.
- Επιλέξτε πόσα βήματα θέλετε στην κλίμακα (7, 9 ή 11).
- Διαβάστε τον κωδικό HEX και το ποσοστό φωτεινότητας κάθε απόχρωσης απευθείας στο δείγμα της.
- Κάντε κλικ σε οποιοδήποτε δείγμα για να αντιγράψετε τον κωδικό HEX του.
Παράδειγμα
Είσοδος
#3B82F6 (ένα μεσαίο μπλε), 9 βήματαΈξοδος
9 αποχρώσεις από μια σχεδόν λευκή απόχρωση (~95% φωτεινότητα) έως μια σχεδόν μαύρη σκιά (~10% φωτεινότητα), με το #3B82F6 να τοποθετείται ως το μεσαίο βήμαΗ απόχρωση και ο κορεσμός παραμένουν σταθερά σε όλα τα 9 βήματα — μόνο η φωτεινότητα αλλάζει — έτσι κάθε απόχρωση φαίνεται σαφώς ότι ανήκει στην ίδια οικογένεια χρωμάτων.
Συχνές ερωτήσεις
Είναι αυτό το ίδιο σύστημα που χρησιμοποιεί το Tailwind CSS για τις κλίμακες χρωμάτων του;
Είναι η ίδια βασική ιδέα (σταθερή απόχρωση/κορεσμός, μεταβλητή φωτεινότητα) αλλά όχι ακριβές αντίγραφο της συγκεκριμένης παλέτας του Tailwind — οι κλίμακες 50-900 του Tailwind ρυθμίστηκαν χειροκίνητα από σχεδιαστές, δεν δημιουργήθηκαν από έναν ενιαίο τύπο. Αυτό το εργαλείο σας δίνει μια συγκρίσιμη δομή που δημιουργείται από οποιοδήποτε χρώμα επιλέξετε, το οποίο είναι χρήσιμο όταν το βασικό σας χρώμα δεν είναι ένα από τα προκαθορισμένα του Tailwind.
Γιατί το χρώμα μου φαίνεται σχεδόν ίδιο σε δύο διαδοχικά βήματα;
Αυτό μπορεί να συμβεί κοντά στα πολύ ανοιχτά ή πολύ σκούρα άκρα της κλίμακας, όπου η αντιληπτή φωτεινότητα αλλάζει πιο αργά από ό,τι υποδηλώνει το αριθμητικό ποσοστό (μια γνωστή ιδιότητα της ανθρώπινης αντίληψης χρώματος, όχι ειδική για αυτό το εργαλείο). Η επιλογή λιγότερων βημάτων (7 αντί για 11) εξαπλώνει τις τιμές φωτεινότητας περισσότερο μεταξύ τους και μειώνει τα σχεδόν πανομοιότυπα δείγματα.
Μπορώ να χρησιμοποιήσω αυτές τις αποχρώσεις απευθείας ως προσαρμοσμένες ιδιότητες CSS;
Ναι — αντιγράψτε κάθε κωδικό HEX και επικολλήστε τον στις μεταβλητές CSS σας (π.χ. --color-brand-100 έως --color-brand-900), αντιστοιχίζοντας τη θέση στην κλίμακα με όποια κλίμακα ονομασίας χρησιμοποιεί το έργο σας.
Πρέπει να χρησιμοποιήσω αυτό ή το Color Mixer;
Αν φτιάχνετε πιο ανοιχτές και πιο σκούρες εκδοχές ενός χρώματος — καταστάσεις hover, διακριτικά φόντα, περιγράμματα που σχετίζονται με ένα χρώμα επωνυμίας — χρησιμοποιήστε αυτόν τον δημιουργό αποχρώσεων. Αν αντίθετα χρειάζεστε το χρώμα ανάμεσα σε δύο διαφορετικά χρώματα (ας πούμε, ένα βήμα ανάμεσα στο κύριο μπλε σας και ένα δευτερεύον πορτοκαλί), χρησιμοποιήστε το Color Mixer, το οποίο παρεμβάλλει τα κανάλια RGB δύο χρωμάτων σε οποιαδήποτε αναλογία αντί να μεταβάλλει τη φωτεινότητα ενός χρώματος.
Τι συμβαίνει αν το βασικό μου χρώμα είναι ήδη πολύ ανοιχτό ή πολύ σκούρο;
Το βασικό χρώμα βρίσκεται πάντα στη μεσαία σειρά, με τις αποχρώσεις να ανεβαίνουν έως περίπου 95% φωτεινότητα επάνω από αυτό και τις σκιές να κατεβαίνουν έως περίπου 10% κάτω από αυτό. Αν το βασικό σας χρώμα είναι ήδη σχεδόν λευκό, το μισό της κλίμακας με τις ανοιχτόχρωμες αποχρώσεις συμπιέζεται σε ένα στενό εύρος φωτεινότητας (σχεδόν πανομοιότυπες σειρές) ενώ το μισό με τις σκιές εξαπλώνεται ευρέως — και αντίστροφα για ένα πολύ σκούρο βασικό χρώμα. Για την πιο ομοιόμορφα κατανεμημένη κλίμακα, ξεκινήστε από μια εκδοχή του χρώματός σας με μεσαία φωτεινότητα (περίπου 40-60% φωτεινότητα).
Μπορεί επίσης να δημιουργήσει τόνους (το χρώμα αναμεμειγμένο με γκρι);
Όχι — αυτό το εργαλείο μεταβάλλει μόνο τη φωτεινότητα διατηρώντας τον κορεσμό σταθερό, κάτι που παράγει αποχρώσεις και σκιές αλλά όχι τόνους. Αν θέλετε μια πιο απαλή κλίμακα, αποκορεστείτε πρώτα το βασικό σας χρώμα (επιλέξτε μια πιο γκρίζα εκδοχή του στον επιλογέα χρωμάτων) και δημιουργήστε την κλίμακα από αυτό· κάθε βήμα θα κληρονομήσει τον χαμηλότερο κορεσμό.