Δημιουργός Χρωμάτων Tailwind
Δημιουργήστε παλέτα 11 σκιών Tailwind CSS 50–950 και κώδικα ρυθμίσεων από ένα Hex code
Χαρακτηριστικά
Αυτόματη δημιουργία 11 σκιών από 1 χρώμα
Υπολογίστε τις σκιές 50–950 θέτοντας το εισαγόμενο χρώμα στο 500
Υποστήριξη μορφών v3 και v4
Εναλλαγή μεταξύ config και @theme με καρτέλες
Αντιγραφή Hex ανά σκιά
Αντιγράψτε τα χρωματικά κωδικά ένα προς ένα με κουμπί για κάθε δείγμα χρώματος
Ενημέρωση παλέτας κατά την εισαγωγή
Χωρίς κουμπί εκτέλεσης, δοκιμάστε και συγκρίνετε χρώματα
Τρόπος χρήσης
Εισαγάγετε το Hex του χρώματος αναφοράς
Εισαγάγετε το Hex code ή κάντε κλικ στο δείγμα χρώματος αριστερά και επιλέξτε με το χρωματοδείκτη
Εισαγάγετε ένα όνομα χρώματος κατά περίπτωση
Εισαγάγετε το όνομα χρώματος σε αγγλικά πεζά για χρήση στον κώδικα. Εάν είναι κενό, χρησιμοποιήστε primary
Επαληθεύστε τα δείγματα χρώματος 11 σκιών
Επαληθεύστε τα δείγματα και τα Hex κωδικά 50–950 και αντιγράψτε ένα προς ένα με το κουμπί αντιγραφής
Επιλέξτε τη μορφή εξόδου και αντιγράψτε
Επιλέξτε v3 ή v4, κάντε κλικ στο «Αντιγραφή κώδικα» και επικολλήστε σε tailwind.config.js ή αρχείο CSS
Περιπτώσεις χρήσης
Δημιουργία σκιών χρώματος ιδιοκτησίας
Ευθυγραμμίστε τις σκιές για hover κουμπιών και φόντο από ένα χρώμα ιδιοκτησίας
Προσθήκη χρώματος που δεν υπάρχει στην τυπική παλέτα
Προσθέστε χρώματα ιδιόκτητων έργων με 11 σκιές στο αρχείο ρυθμίσεων εάν δεν υπάρχουν στα τυπικά χρώματα Tailwind
Δημιουργία ρυθμίσεων @theme v4
Εγγράψτε τις μεταβλητές CSS Tailwind v4 μαζικά από το κύριο χρώμα του ιστότοπου
Προετοιμασία υλοποίησης σχεδιαστικού mock-up
Προετοιμάστε κώδικα 11 σκιών από το καθορισμένο χρώμα του mock-up και μεταφέρετε επίσης στο εργαλείο σχεδιασμού
Βασικές γνώσεις
Τι αντιπροσωπεύουν τα 50–950 του Tailwind
Τα χρώματα Tailwind CSS εκφράζονται με 11 αριθμητικές σκιές 50–950 που αντιπροσωπεύουν τη φωτεινότητα, με το 50 να είναι το πιο ανοιχτό και το 950 το πιο σκούρο, ενώ το 500 είναι το χρώμα αναφοράς. Χρησιμοποιούνται προσθέτοντας τον αριθμό στο τέλος του ονόματος κλάσης, όπως «bg-primary-500» ή «text-primary-700».
- Σκιές 50–300：Οι σκιές 50–300 είναι ανοιχτά χρώματα που χρησιμοποιούνται συχνά για χρώματα φόντου ή ανοιχτές γεμίσεις και είναι αρκετά ευδιάκριτα ακόμη και με σκούρο κείμενο επάνω τους.
- Σκιές 600–950：Οι σκιές 600–950 είναι σκούρα χρώματα που χρησιμοποιούνται συχνά για hover κουμπιών ή χρώματα κειμένου επικεφαλίδων και είναι ευδιάκριτα ακόμη και σε ανοιχτό φόντο.
Διαφορές στη μέθοδο ορισμού χρώματος μεταξύ v3 και v4
Στο Tailwind CSS v3, τα χρώματα ορίζονται σε JavaScript στο tailwind.config.js, ενώ στο v4 ορίζονται ως μεταβλητές CSS στο @theme του αρχείου CSS. Με οποιαδήποτε μέθοδο, τα ορισμένα χρώματα μπορούν να χρησιμοποιηθούν με το ίδιο όνομα κλάσης όπως «bg-primary-500».
- Μέθοδος v3：Η μέθοδος v3 είναι μορφή όπου γράφετε τα χρώματα και τις σκιές ένθετα στο theme.extend.colors, όπως «primary: { 500: '#3B82F6' }».
- Μέθοδος v4：Η μέθοδος v4 είναι μορφή όπου γράφετε τα χρώματα και τις σκιές με ονόματα μεταβλητών συνδεδεμένα με παύλα στο @theme, όπως «--color-primary-500: #3B82F6;».
Ασφάλεια και Απόρρητο
Επεξεργασία στο πρόγραμμα περιήγησης
Τα δεδομένα που εισάγετε επεξεργάζονται μόνο μέσα στο πρόγραμμα περιήγησής σας και δεν αποστέλλονται προς τα έξω.
Επεξεργασία μόνο στο πρόγραμμα περιήγησης
Το Υπολογισμός παλέτας και δημιουργία κώδικα εκτελείται ολοκληρωτικά στο πρόγραμμα περιήγησής σας και τα δεδομένα εισόδου δεν αποστέλλονται σε κανέναν διακομιστή.
Η επικοινωνία είναι κρυπτογραφημένη μέσω HTTPS
Η φόρτωση της σελίδας είναι επίσης κρυπτογραφημένη με TLS και το περιεχόμενο δεν μπορεί να διαβαστεί από τρίτους.
Καμία αποστολή σε τρίτους
Τα δεδομένα εισόδου δεν αποστέλλονται σε εξωτερικές υπηρεσίες όπως δίκτυα διαφημίσεων ή ιχνηλάτες.
Χωρίς αυτόματη αποθήκευση αποτελεσμάτων
Το Το χρώμα ή το όνομα χρώματος που εισάγατε και οι υποδείξεις εισόδου δεν αποθηκεύονται στον διακομιστή.
Ακολουθήστε το RAKKOTOOLS στην Αναζήτηση Google
187 χρήσιμα εργαλεία γίνονται πιο εύκολο να βρεθούν στην Αναζήτηση Google και τις αναζητήσεις AI!
- Εμφανίζεται στην αναζήτηση
- Εμφανίζεται και στην αναζήτηση AI
- Ανακαλύψτε νέα εργαλεία
Πληροφορίες ενημερώσεων
- update #318
Προστέθηκε δημιουργία χρωμάτων Tailwind, δημιουργήστε 11 αποχρώσεις και κώδικα διαμόρφωσης από 1 χρώμα