Δημιουργία χρωματικών τόνων
Δημιουργήστε τόνους ενός χρώματος αναμειγνύοντάς το με ουδέτερο γκρι σε ίσα βήματα, μειώνοντας έτσι τον κορεσμό χωρίς να αλλάζει η απόχρωση. Εισαγάγετε ένα χρώμα σε οποιαδήποτε μορφή CSS, επιλέξτε 2 έως 20 βήματα και έναν χώρο ανάμειξης και λάβετε έναν πίνακα με τιμές HEX, RGB, HSL και OKLCH για κάθε τόνο, ξεκινώντας από το αρχικό χρώμα. Χρήσιμο για απαλές παλέτες, ανενεργές καταστάσεις, διακριτικές επιφάνειες και πιο ήπιες παραλλαγές επωνυμίας.
Συχνές ερωτήσεις
Τι είναι ο τόνος;
Τόνος είναι ένα χρώμα αναμεμειγμένο με γκρι. Διατηρεί την απόχρωσή του και γίνεται πιο απαλό, σε αντίθεση με τη φωτεινότητα, που προκύπτει από ανάμειξη με λευκό, ή τη σκίαση, που προκύπτει από ανάμειξη με μαύρο.
Ποιο γκρι χρησιμοποιείται;
Χρησιμοποιείται το μεσαίο γκρι του sRGB #808080, rgb(128 128 128). Έτσι, τα ανοιχτά χρώματα γίνονται ελαφρώς πιο σκούρα και τα σκούρα ελαφρώς πιο ανοιχτά καθώς πλησιάζουν σε αυτό. Για ανάμειξη με άλλο γκρι, χρησιμοποιήστε τον Αναμεικτή Χρωμάτων με το δικό σας γκρι.
Πώς κατανέμονται τα βήματα;
Με N βήματα, η γραμμή k αναμειγνύει το χρώμα με ποσοστό γκρι (k - 1) / N, επομένως 10 βήματα δίνουν 0%, 10%, 20% και ούτω καθεξής έως το 90%. Η πρώτη γραμμή είναι πάντα το αρχικό σας χρώμα και το καθαρό γκρι δεν περιλαμβάνεται ποτέ στη λίστα.
Σε τι διαφέρει ένας τόνος από τη μείωση του κορεσμού HSL;
Η μείωση του κορεσμού HSL διατηρεί τη φωτεινότητα HSL, ενώ η ανάμειξη με γκρι μετακινεί επίσης τη φωτεινότητα προς τη μέση τιμή. Έτσι, οι τόνοι μοιάζουν σαν να βλέπετε το χρώμα μέσα από ένα γκρι φίλτρο, κάτι που ταιριάζει σε απαλό φόντο και ανενεργές καταστάσεις.
Ποια είναι η διαφορά ανάμεσα στην ανάμειξη sRGB και OKLab;
Η ανάμειξη sRGB υπολογίζει τον μέσο όρο των τιμών των καναλιών με κωδικοποίηση γάμμα, την κλασική προσέγγιση στους χρωματικούς πίνακες τύπου ζωγραφικής και στο Sass mix(). Η ανάμειξη OKLab γίνεται σε έναν αντιληπτικό χώρο, οπότε η χρωματικότητα μειώνεται πιο ομοιόμορφα από βήμα σε βήμα.
Ποιες μορφές εισόδου μπορώ να χρησιμοποιήσω;
Δεκαεξαδικοί κωδικοί με ή χωρίς #, ονόματα χρωμάτων CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() και cmyk(). Εισαγάγετε ένα χρώμα κάθε φορά.
Πόσους τόνους μπορώ να δημιουργήσω;
Από 2 έως 20 ανά εκτέλεση, με προεπιλογή τις 10. Η μέτρηση περιλαμβάνει το αρχικό χρώμα στην πρώτη γραμμή.
Ποιες τιμές εμφανίζει ο πίνακας;
Για κάθε βήμα εμφανίζονται το ποσοστό γκρι, ο δεκαεξαδικός κωδικός, τα rgb(), hsl() και oklch() στη σύγχρονη σύνταξη CSS. Τα κανάλια RGB είναι ακέραιοι αριθμοί, τα ποσοστά HSL έχουν έως δύο δεκαδικά ψηφία, ενώ η φωτεινότητα και η χρωματικότητα OKLCH έχουν έως τέσσερα.
Τι συμβαίνει με τα διαφανή χρώματα και τα χρώματα ευρείας γκάμας;
Η άλφα τιμή εισόδου διατηρείται για κάθε τόνο, επομένως οι δεκαεξαδικοί κωδικοί έχουν 8 ψηφία. Τα βήματα εκτός της χρωματικής γκάμας αντιστοιχίζονται στο sRGB με τον αλγόριθμο CSS Color 4 στις στήλες HEX, RGB και HSL, ενώ η στήλη OKLCH διατηρεί την τιμή χωρίς αντιστοίχιση.
Πώς μπορώ να αναδημιουργήσω έναν τόνο στο CSS;
Αντιγράψτε την τιμή HEX ή oklch() ή αφήστε το πρόγραμμα περιήγησης να κάνει την ανάμειξη με color-mix(in oklab, var(--brand) 70%, #808080) για τον τόνο 30% της ρύθμισης OKLab. Το color-mix() λειτουργεί σε όλα τα σύγχρονα μεγάλα προγράμματα περιήγησης.