# Δημιουργία αποχρώσεων χρώματος

Δημιουργήστε πιο σκούρες αποχρώσεις ενός χρώματος αναμειγνύοντάς το με μαύρο σε ισόποσα βήματα. Εισαγάγετε ένα χρώμα σε οποιαδήποτε μορφή 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 απέναντι σε ένα άλλο σκούρο χρώμα ή σε έγχρωμο κείμενο.

Η διαφήμισή σας εδώ;

[Στείλτε μας email](mailto:hi@dennn.is?subject=%CE%94%CE%B9%CE%B1%CF%86%CE%AE%CE%BC%CE%B9%CF%83%CE%B7%20%CF%83%CF%84%CE%BF%20OneClick%20Pro)

[Διαφήμιση Η σουίτα πρόσθετων έτοιμη για πράκτορες του WordPress.](https://sleekwp.com/?ref=oneclickpro)