CodeKitHubΤι είναι αυτό το εργαλείο;
Ένας μείκτης χρωμάτων παρεμβάλλει γραμμικά τα κανάλια κόκκινου, πράσινου και μπλε δύο χρωμάτων σε μια επιλεγμένη αναλογία, ακριβώς τα ίδια μαθηματικά που χρησιμοποιεί εσωτερικά μια διαβάθμιση (gradient). Στο 0% το αποτέλεσμα είναι το Χρώμα Α, στο 100% είναι το Χρώμα Β, και στο 50% είναι ο αριθμητικός μέσος όρος κάθε καναλιού RGB.
Αυτό διαφέρει από την ανάμειξη φυσικής μπογιάς (που είναι αφαιρετική και εξαρτάται από τα χρωστικά υλικά), και δεν είναι το ίδιο με τη μέση τιμή στον χώρο HSL — η γραμμική παρεμβολή RGB είναι αυτή που χρησιμοποιούν οι διαβαθμίσεις CSS, τα εργαλεία σχεδίασης και τα περισσότερα εργαλεία τύπου «χρώμα ανάμεσα σε δύο χρώματα», οπότε το αποτέλεσμα ταιριάζει με αυτό που θα έβλεπες σε μια διαβάθμιση περιηγητή ανάμεσα στα ίδια δύο χρώματα.
Γιατί να το χρησιμοποιήσετε;
- Βρες ένα φυσικό χρώμα hover ή ενεργής κατάστασης που βρίσκεται ανάμεσα στο βασικό σου χρώμα και σε ένα χρώμα τονισμού — αντί να μαντεύεις μια τυχαία προσαρμογή.
- Δες τον ακριβή κωδικό HEX σε οποιαδήποτε αναλογία, όχι απλώς να τον υπολογίζεις κατά προσέγγιση από ένα στιγμιότυπο οθόνης μιας διαβάθμισης.
- Η κλίμακα 11 βημάτων σού δίνει μια πλήρη παλέτα από το ένα χρώμα στο άλλο με ένα κλικ, χρήσιμη για οπτικοποίηση δεδομένων ή διαβάθμιση με πολλαπλά σημεία στάσης.
- Κάνε κλικ σε οποιοδήποτε βήμα για να αντιγράψεις αμέσως τον κωδικό HEX του.
- Δωρεάν, άμεσο και πλήρως τοπικό — χωρίς μεταφόρτωση, χωρίς λογαριασμό.
Πώς χρησιμοποιείται
- Επίλεξε το Χρώμα Α και το Χρώμα Β χρησιμοποιώντας τους επιλογείς χρωμάτων ή πληκτρολογώντας έναν κωδικό HEX.
- Σύρε τον ρυθμιστή αναλογίας για να ορίσεις πόσο από το Χρώμα Β θα αναμειχθεί.
- Διάβασε τις τιμές HEX και RGB που προκύπτουν πάνω από το δείγμα χρώματος.
- Κάνε κλικ σε οποιοδήποτε δείγμα στην κλίμακα 11 βημάτων παρακάτω για να αντιγράψεις τον κωδικό HEX του.
Παράδειγμα
Είσοδος
Χρώμα Α #3B82F6 (μπλε), Χρώμα Β #F59E0B (κεχριμπαρί), αναλογία 50%Έξοδος
#9B9E7D — rgb(155, 158, 125)Στο ακριβές 50%, κάθε κανάλι RGB είναι ο αριθμητικός μέσος όρος των καναλιών των δύο αρχικών χρωμάτων.
Συχνές ερωτήσεις
Γιατί αυτό δεν ταιριάζει με αυτό που θα έπαιρνα αναμειγνύοντας πραγματική μπογιά;
Η ανάμειξη μπογιάς είναι αφαιρετική (τα χρωστικά υλικά απορροφούν το φως) και εξαρτάται από τα συγκεκριμένα χρωστικά υλικά που εμπλέκονται — η ανάμειξη μπλε και κίτρινης μπογιάς δίνει πράσινο, για παράδειγμα. Αυτό το εργαλείο αναμειγνύει φως (κανάλια RGB) προσθετικά/γραμμικά, όπως ακριβώς κάνουν οι οθόνες, οι διαβαθμίσεις CSS και τα περισσότερα ψηφιακά εργαλεία σχεδίασης. Τα δύο συστήματα παράγουν εγγενώς διαφορετικά αποτελέσματα εκ σχεδιασμού, όχι από σφάλμα.
Είναι το ίδιο με μια CSS linear-gradient ανάμεσα στα δύο χρώματα;
Ναι — μια CSS linear-gradient(colorA, colorB) παρεμβάλλει τα κανάλια RGB με τον ίδιο τρόπο όπως αυτό το εργαλείο, οπότε το χρώμα που θα έβλεπες στο μέσο αυτής της διαβάθμισης ταιριάζει με το αποτέλεσμα του 50% εδώ.
Γιατί το αναμεμειγμένο χρώμα μερικές φορές φαίνεται θολό ή γκριζωπό;
Η ανάμειξη δύο κορεσμένων αλλά πολύ διαφορετικών αποχρώσεων (όπως το μπλε και το πορτοκαλί, που είναι σχεδόν συμπληρωματικά) στον χώρο RGB παράγει συχνά ένα μέσο σημείο χαμηλού κορεσμού, γκριζοκάστανο — αυτό είναι μια πραγματική ιδιότητα της παρεμβολής RGB, όχι σφάλμα. Αν θέλεις ένα πιο ζωντανό μείγμα, δοκίμασε να αναμείξεις χρώματα που είναι πιο κοντά στον χρωματικό κύκλο, ή ανάμειξέ τα στον χώρο HSL προσαρμόζοντας την απόχρωση διατηρώντας υψηλό κορεσμό (κάτι που αυτός ο απλός μείκτης RGB δεν κάνει).
Μπορώ να αναμείξω περισσότερα από δύο χρώματα ταυτόχρονα;
Όχι σε ένα βήμα — το εργαλείο αναμειγνύει ακριβώς δύο χρώματα. Για να συνδυάσεις τρία, ανάμειξε τα πρώτα δύο στην αναλογία που θέλεις, αντίγραψε το αποτέλεσμα και επικόλλησέ το ως νέο Χρώμα Α απέναντι στο τρίτο χρώμα. Η σταδιακή διαδικασία σού δίνει επίσης έλεγχο στη βαρύτητα, κάτι που ένας απλός μέσος όρος τριών χρωμάτων δεν θα σου έδινε.
Να χρησιμοποιήσω αυτό ή τη Γεννήτρια Αποχρώσεων Χρωμάτων;
Αν χρειάζεσαι ένα χρώμα που βρίσκεται ανάμεσα σε δύο διαφορετικά χρώματα — ας πούμε, μια μεταβατική απόχρωση ανάμεσα στο μπλε της μάρκας σου και ένα κεχριμπαρί χρώμα τονισμού — χρησιμοποίησε αυτόν τον μείκτη. Αν χρειάζεσαι πιο ανοιχτές και πιο σκούρες παραλλαγές ενός χρώματος (καταστάσεις hover, φόντα, κλίμακα τύπου Tailwind 50-900), χρησιμοποίησε αντ' αυτού τη Γεννήτρια Αποχρώσεων Χρωμάτων: κρατά σταθερή την απόχρωση και τον κορεσμό και μεταβάλλει μόνο τη φωτεινότητα, οπότε κάθε αποτέλεσμα παραμένει ξεκάθαρα στην ίδια χρωματική οικογένεια.
Ποιες μορφές χρωμάτων μπορώ να πληκτρολογήσω στα πεδία εισαγωγής;
Τα πεδία κειμένου δέχονται κωδικούς HEX 6 ψηφίων, με ή χωρίς το αρχικό # (π.χ. 3B82F6 ή #3B82F6). Ο συντετμημένος hex 3 ψηφίων, ο συμβολισμός rgb() και τα ονόματα χρωμάτων CSS δεν αναλύονται εκεί — αλλά μπορείς να επιλέξεις οπτικά οποιοδήποτε χρώμα με τον εγγενή επιλογέα χρώματος δίπλα σε κάθε πεδίο, και το πεδίο HEX ενημερώνεται αντίστοιχα.