Utilia
Κατηγορίες ▾
Γλώσσα: el ▾

Γεννήτρια ανοιχτών και σκούρων αποχρώσεων

Δημιουργήστε ανοιχτότερες και σκουρότερες αποχρώσεις κάθε χρώματος με βήμα 5, 10, 20 ή 25% και εξαγάγετέ τες ως μεταβλητές CSS ή Tailwind.

Ανοιχτές αποχρώσεις (tints, ανάμειξη με λευκό)

    Σκούρες αποχρώσεις (shades, ανάμειξη με μαύρο)

      Πώς να χρησιμοποιήσετε τη γεννήτρια ανοιχτών και σκούρων αποχρώσεων

      1. Επιλέξτε ένα Βασικό χρώμα από το δείγμα ή πληκτρολογήστε μια τιμή στον Κωδικός χρώματος: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) ή ένα όνομα CSS όπως teal.
      2. Διαλέξτε ένα Βήμα: 5%, 10%, 20% ή 25%. Με 10%, παίρνετε ανοιχτές αποχρώσεις στο 10%, 20% … 100% και τον ίδιο αριθμό σκούρων.
      3. Επιλέξτε πώς γίνεται η Ανάμειξη σε: OKLCH (αντιληπτικός) ή sRGB (κλασικός). Οι δύο σειρές ενημερώνονται ταυτόχρονα: Ανοιχτές αποχρώσεις (tints, ανάμειξη με λευκό) και Σκούρες αποχρώσεις (shades, ανάμειξη με μαύρο), καθεμία ξεκινώντας από τη βάση.
      4. Πατήστε Αντιγραφή κάτω από οποιοδήποτε δείγμα για να αντιγράψετε τον κωδικό HEX του.
      5. Στο Εξαγωγή ως, επιλέξτε Μεταβλητές CSS, Ρύθμιση Tailwind (v3), Tailwind @theme (v4), Μεταβλητές SCSS ή JSON, ορίστε ένα Όνομα όπως primary ή brand και μετά πατήστε Αντιγραφή ή Λήψη για τον κώδικα.

      Ανοιχτές αποχρώσεις, σκούρες αποχρώσεις και τόνοι

      Στη θεωρία του χρώματος, μια ανοιχτή απόχρωση (tint) είναι ένα χρώμα αναμεμειγμένο με λευκό, μια σκούρα απόχρωση (shade) είναι ένα χρώμα αναμεμειγμένο με μαύρο και ένας τόνος (tone) είναι ένα χρώμα αναμεμειγμένο με γκρι. Το ποσοστό δείχνει πόσο λευκό ή μαύρο προστίθεται: μια ανοιχτή απόχρωση 30% είναι 70% βασικό χρώμα και 30% λευκό. Στο 100% φτάνετε σε καθαρό λευκό ή καθαρό μαύρο, γι’ αυτό το τελευταίο δείγμα κάθε σειράς είναι πάντα #FFFFFF ή #000000· σηματοδοτεί το τέλος της κλίμακας.

      Οι ανοιχτές και οι σκούρες αποχρώσεις είναι ο ταχύτερος τρόπος να φτιάξετε μια συνεπή κλίμακα από ένα μόνο χρώμα επωνυμίας: ανοιχτά φόντα και καταστάσεις hover από τις ανοιχτές αποχρώσεις, περιγράμματα, καταστάσεις πατήματος και σκούρο κείμενο από τις σκούρες.

      Ανάμειξη OKLCH ή sRGB;

      Το sRGB (κλασικός) αναμειγνύει απευθείας τις τιμές κόκκινου, πράσινου και μπλε. Είναι αυτό που κάνουν οι περισσότερες παλαιότερες γεννήτριες και ταιριάζει με το color-mix(in srgb, …) του CSS. Ο τύπος για μια ανοιχτή απόχρωση είναι απλά κανάλι + (255 − κανάλι) × p και για μια σκούρα κανάλι × (1 − p). Είναι προβλέψιμο, αλλά τα βήματα δεν είναι αντιληπτικά ομοιόμορφα: τα μπλε τείνουν να γέρνουν προς το μοβ καθώς ανοίγουν και οι σκούρες αποχρώσεις συχνά φαίνονται λασπωμένες.

      Το OKLCH (αντιληπτικός) αναμειγνύει στον χρωματικό χώρο OKLCH που σχεδίασε ο Björn Ottosson το 2020, όπως το color-mix(in oklch, …) του CSS. Η φωτεινότητα, ο κορεσμός και η απόχρωση παρεμβάλλονται χωριστά. Το λευκό και το μαύρο δεν έχουν απόχρωση, οπότε η βασική απόχρωση διατηρείται σε όλη τη διαδρομή και κάθε βήμα αλλάζει τη φωτεινότητα κατά οπτικά παρόμοιο ποσό. Τα χρώματα που θα έπεφταν εκτός της γκάμας sRGB επιστρέφουν μειώνοντας τον κορεσμό και όχι κόβοντας κανάλια, οπότε η απόχρωση μένει σταθερή. Για συστήματα σχεδίασης, αυτό συνήθως δίνει καθαρότερες και πιο ομοιόμορφες κλίμακες.

      Χρήση της εξαγωγής

      • Οι Μεταβλητές CSS παράγουν ένα μπλοκ :root όπως --primary-tint-20 και --primary-shade-40, έτοιμο για επικόλληση σε φύλλο στυλ.
      • Η Ρύθμιση Tailwind (v3) δίνει ένα αντικείμενο colors για το theme.extend.colors· στη συνέχεια γράφετε κλάσεις όπως bg-primary-tint-20 ή text-primary-shade-60. Το DEFAULT κρατά τη βάση, οπότε λειτουργεί και το bg-primary.
      • Το Tailwind @theme (v4) δίνει μεταβλητές --color-… για τη ρύθμιση με πρώτο το CSS του Tailwind 4.
      • Οι Μεταβλητές SCSS και το JSON ταιριάζουν σε άλλα εργαλεία build και design tokens.

      Τα ονόματα γράφονται με πεζά και τα κενά γίνονται παύλες, οπότε το «Brand Blue» γίνεται brand-blue.

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

      Ποια η διαφορά ανάμεσα σε ανοιχτή και σκούρα απόχρωση;

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

      Ποιο βήμα να επιλέξω;

      Το 10% δίνει εννέα χρήσιμα βήματα σε κάθε πλευρά, αρκετά για τις περισσότερες διεπαφές. Χρησιμοποιήστε 20% ή 25% για σύντομη κλίμακα σε παρουσίαση και 5% όταν χρειάζεστε πολύ λεπτές παραλλαγές για hover ή περιγράμματα.

      Γιατί οι ανοιχτές αποχρώσεις sRGB μου φαίνονται μοβ;

      Η ανάμειξη μπλε με λευκό σε sRGB μετατοπίζει την αντιληπτή απόχρωση προς το βιολετί (γνωστό φαινόμενο του χώρου sRGB). Αλλάξτε σε OKLCH (αντιληπτικός) για να μένει σταθερή η απόχρωση.

      Είναι αυτά τα χρώματα προσβάσιμα;

      Η γεννήτρια δεν ελέγχει την αντίθεση. Δοκιμάστε τα ζεύγη που σκοπεύετε να χρησιμοποιήσετε, όπως κείμενο σε ανοιχτή απόχρωση, με έναν έλεγχο αντίθεσης: το WCAG απαιτεί 4,5:1 για κανονικό κείμενο.

      Μπορώ να χρησιμοποιήσω την έξοδο με την κλίμακα 50–950 του Tailwind;

      Η εξαγωγή χρησιμοποιεί ονόματα με ποσοστά (tint-10, shade-30) ώστε το νόημα να μένει σαφές. Αν προτιμάτε αριθμημένα κλειδιά, μετονομάστε μερικά βήματα στον εξαγόμενο κώδικα, για παράδειγμα την ανοιχτή απόχρωση 90% ως 50 και τη σκούρα απόχρωση 80% ως 950.

      Σχετικά εργαλεία