Δημιουργία αποχρώσεων χρώματος
Δημιουργήστε πιο σκούρες αποχρώσεις ενός χρώματος αναμειγνύοντάς το με μαύρο σε ισόποσα βήματα. Εισαγάγετε ένα χρώμα σε οποιαδήποτε μορφή CSS, επιλέξτε 2 έως 20 βήματα και έναν χώρο ανάμειξης και λάβετε έναν πίνακα με τιμές HEX, RGB, HSL και OKLCH για κάθε απόχρωση, ξεκινώντας από το αρχικό χρώμα. Η ανάμειξη sRGB ταιριάζει με τα κλασικά εργαλεία δημιουργίας αποχρώσεων και το Sass, ενώ το OKLab δίνει βήματα με ομοιόμορφη οπτική αντίληψη. Ιδανικό για τη δημιουργία χρωματικών κλιμάκων UI.
Συχνές ερωτήσεις
Τι είναι μια απόχρωση;
Απόχρωση είναι ένα χρώμα αναμεμειγμένο με μαύρο. Διατηρεί την ίδια χρωματική απόχρωση και γίνεται πιο σκούρο, σε αντίθεση με έναν χρωματικό τόνο, που αναμειγνύεται με λευκό, ή μια τονική παραλλαγή, που αναμειγνύεται με γκρι.
Πώς κατανέμονται τα βήματα;
Με N βήματα, η γραμμή k αναμειγνύει το χρώμα με (k - 1) / N μαύρο, οπότε 10 βήματα δίνουν 0%, 10%, 20% και ούτω καθεξής έως το 90%. Η πρώτη γραμμή περιέχει πάντα το αρχικό σας χρώμα και το καθαρό μαύρο δεν περιλαμβάνεται ποτέ στη λίστα.
Ποια είναι η διαφορά ανάμεσα στην ανάμειξη 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 ψηφία και οι συναρτήσεις CSS τελειώνουν με την τιμή άλφα μετά από κάθετο.
Τι συμβαίνει με τα χρώματα εκτός sRGB;
Η ανάμειξη χρησιμοποιεί ολόκληρο το χρώμα, αλλά τα HEX, RGB και HSL μπορούν να εμφανίσουν μόνο sRGB. Επομένως, τα βήματα εκτός χρωματικής γκάμας αντιστοιχίζονται στο sRGB με τον αλγόριθμο Color 4 CSS σε αυτές τις στήλες. Η στήλη OKLCH διατηρεί την τιμή χωρίς αντιστοίχιση.
Πώς χρησιμοποιώ τις αποχρώσεις στο CSS;
Αντιγράψτε τις τιμές hex ή oklch() σε προσαρμοσμένες ιδιότητες, όπως --brand-600 και --brand-700. Για ανάμειξη στο πρόγραμμα περιήγησης, το color-mix(in oklab, var(--brand) 80%, black) δίνει την ίδια απόχρωση 20% με τη ρύθμιση OKLab.
Είναι οι πιο σκούρες αποχρώσεις αυτόματα προσβάσιμες;
Όχι. Ελέγξτε την αντίθεση του κειμένου σε σχέση με κάθε απόχρωση με ένα εργαλείο ελέγχου αντίθεσης, επειδή μια απόχρωση που φαίνεται σκούρα μπορεί και πάλι να μην φτάνει το 4.5:1 απέναντι σε ένα άλλο σκούρο χρώμα ή σε έγχρωμο κείμενο.