# Δημιουργία ανοιχτότερων χρωματικών τόνων

Δημιουργήστε πιο ανοιχτούς χρωματικούς τόνους αναμειγνύοντας ένα χρώμα με λευκό σε ισόποσα βήματα. Εισαγάγετε ένα χρώμα σε οποιαδήποτε μορφή CSS, επιλέξτε 2 έως 20 βήματα και έναν χώρο ανάμειξης και λάβετε έναν πίνακα με τιμές HEX, RGB, HSL και OKLCH για κάθε τόνο, ξεκινώντας από το αρχικό χρώμα. Η ανάμειξη sRGB ταιριάζει με τα κλασικά εργαλεία δημιουργίας χρωματικών τόνων και το Sass, ενώ το OKLab δίνει βήματα με ομοιόμορφη οπτική αντίληψη. Ιδανικό για φόντα, καταστάσεις κατάδειξης και κλίμακες.

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

### Τι είναι ένας χρωματικός τόνος;

Χρωματικός τόνος είναι ένα χρώμα αναμεμειγμένο με λευκό. Διατηρεί την ίδια χρωματική απόχρωση και γίνεται πιο ανοιχτό και απαλό, σε αντίθεση με μια απόχρωση που αναμειγνύεται με μαύρο ή μια τονική παραλλαγή που αναμειγνύεται με γκρι.

### Πώς κατανέμονται τα βήματα;

Με 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-100 και --brand-200. Για ανάμειξη στο πρόγραμμα περιήγησης, το color-mix(in oklab, var(--brand) 80%, white) δίνει τον ίδιο χρωματικό τόνο 20% με τη ρύθμιση OKLab.

### Μπορώ να βάλω λευκό κείμενο πάνω σε ανοιχτό χρωματικό τόνο;

Συνήθως όχι, επειδή οι ανοιχτοί χρωματικοί τόνοι έχουν μικρή αντίθεση με το λευκό. Χρησιμοποιήστε σκούρο κείμενο σε ανοιχτούς τόνους και ελέγξτε κάθε συνδυασμό με ένα εργαλείο ελέγχου αντίθεσης. Το κανονικό κείμενο χρειάζεται τουλάχιστον 4.5:1 για WCAG AA.

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

[Στείλτε μας 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)