tigtools

Γεννήτρια Χρωματικής Παλέτας

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

Εκτελείται στον περιηγητή σας Χωρίς εγγραφή

Παλέτα

  • #3366cc
  • #8c6500

Τα κλειδωμένα χρώματα παραμένουν ίδια όταν αλλάζετε το βασικό χρώμα.

Εξαγωγή ως

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

  1. Εισαγάγετε ένα βασικό χρώμα ή επιλέξτε ένα. Το «Νέο τυχαίο βασικό» επιλέγει ένα για εσάς.
  2. Επιλέξτε μια αρμονία. Οι «Αποχρώσεις και τόνοι» δημιουργούν μια κλίμακα 11 βημάτων από πολύ ανοιχτό έως πολύ σκούρο.
  3. Κλειδώστε όποιο χρώμα θέλετε να κρατήσετε και συνεχίστε να εξερευνάτε άλλα βασικά χρώματα.
  4. Επιλέξτε HEX, προσαρμοσμένες ιδιότητες CSS ή JSON, ορίστε ένα όνομα και αντιγράψτε τον κώδικα.

Πώς λειτουργεί

Οι αρμονίες βρίσκονται περιστρέφοντας την απόχρωση γύρω από τον χρωματικό κύκλο: η συμπληρωματική προσθέτει την αντίθετη απόχρωση (180°), η αναλογική προσθέτει γειτονικές αποχρώσεις 30° και 60° μακριά από κάθε πλευρά, η τριαδική χρησιμοποιεί τρεις αποχρώσεις με απόσταση 120°, η τετραδική τέσσερις αποχρώσεις με απόσταση 90° και η διπλή συμπληρωματική τις δύο αποχρώσεις δίπλα στη συμπληρωματική (150° και 210°).

Η περιστροφή γίνεται σε OKLCH αντί για HSL. Το OKLCH διατηρεί σταθερή την αντιληπτή φωτεινότητα, έτσι ένα κίτρινο και ένα μπλε στην ίδια παλέτα δείχνουν παρόμοια φωτεινά αντί να «καίει» το κίτρινο. Όταν ένα περιστραμμένο χρώμα βρίσκεται εκτός του εύρους που μπορούν να εμφανίσουν οι οθόνες sRGB, η χρωματικότητά του μειώνεται μέχρι να χωρέσει, διατηρώντας φωτεινότητα και απόχρωση.

Η κλίμακα σκουρότερων και ανοιχτότερων αποχρώσεων χρησιμοποιεί σταθερά βήματα φωτεινότητας OKLCH με ονόματα από 50 έως 950, παρόμοια με την ονοματολογία του Tailwind CSS, με μειωμένη χρωματικότητα κοντά στο λευκό και το μαύρο ώστε οι πιο ανοιχτοί τόνοι να μη δείχνουν σαν νέον. Οι αρμονίες είναι ένα σημείο εκκίνησης: ελέγξτε τους συνδυασμούς κειμένου και φόντου με ένα εργαλείο ελέγχου αντίθεσης πριν τους χρησιμοποιήσετε σε περιεχόμενο.

Παραδείγματα

Χρώμα επωνυμίας με τόνο έμφασης

Η βάση #3366cc με την επιλογή «Συμπληρωματική» προσθέτει το #8c6500, μια ζεστή ώχρα με την ίδια φωτεινότητα OKLCH. Οι συνδυασμοί μπλε και πορτοκαλοκίτρινου είναι μια συνηθισμένη επιλογή για στοιχεία έμφασης δίπλα σε μια μπλε επωνυμία.

Design tokens για μια βιβλιοθήκη components

Επιλέξτε «Σκούροι και ανοιχτοί τόνοι», ορίστε το όνομα σε «primary» και εξάγετε μεταβλητές CSS. Θα πάρετε από --primary-50 έως --primary-950, έτοιμες για φόντο (50–100), περιγράμματα (200–300) και κείμενο (700–900).

Διατήρηση ενός χρώματος κατά την εξερεύνηση

Κλειδώστε το δεύτερο χρώμα μιας τριαδικής παλέτας και δοκιμάστε διαφορετικά βασικά χρώματα. Το κλειδωμένο δείγμα διατηρεί την τιμή HEX του ενώ τα υπόλοιπα αλλάζουν.

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

Γιατί τα χρώματά μου διαφέρουν από ένα εργαλείο χρωματικού κύκλου HSL;

Αυτό το εργαλείο περιστρέφει την απόχρωση στο OKLCH, έναν αντιληπτικό χρωματικό χώρο. Οι γωνίες απόχρωσης δεν συμπίπτουν ακριβώς με το HSL, επομένως το «απέναντι» ενός χρώματος μπορεί να είναι μια ελαφρώς διαφορετική απόχρωση από αυτή που δίνει ένα εργαλείο HSL.

Μπορώ να χρησιμοποιήσω το JSON στο Tailwind CSS;

Το JSON αντιστοιχίζει ονόματα σε τιμές HEX, την ίδια μορφή που δέχεται το Tailwind για ένα χρώμα στη διαμόρφωση του θέματός του. Στο Tailwind 4 μπορείτε επίσης να επικολλήσετε τις μεταβλητές CSS σε ένα μπλοκ @theme αφού τις μετονομάσετε σε --color-…

Είναι οι παραγόμενες παλέτες προσβάσιμες;

Όχι αυτόματα. Μια αρμονία δεν λέει τίποτα για την αντίθεση μεταξύ κειμένου και φόντου. Ελέγξτε κάθε ζεύγος που σκοπεύετε να χρησιμοποιήσετε με τον Ελεγκτή Αντίθεσης.

Απόρρητο

Οι παλέτες δημιουργούνται στο πρόγραμμα περιήγησής σας. Τα χρώματά σας δεν αποστέλλονται πουθενά ούτε αποθηκεύονται.