Μετατροπέας χρωμάτων CSS

Τι είναι αυτό το εργαλείο

Ο μετατροπέας χρωμάτων CSS είναι ένα εργαλείο ιστού που μετατρέπει ένα χρώμα από μία μορφή εγγραφής σε αρκετές άλλες. Εισάγετε μια τιμή σε μορφή HEX, rgb(), hsl() ή απλώς το όνομα ενός χρώματος και λαμβάνετε μια πλήρη εικόνα: πώς μοιάζει το χρώμα, σε ποιες μορφές μπορεί να καταγραφεί και πώς να αντιγράψετε την επιθυμητή έκδοση.

Ο μετατροπέας χρωμάτων CSS είναι ιδιαίτερα χρήσιμος για frontend developers, web designers και σχεδιαστές. Στα μακέτα τα χρώματα είναι συνήθως σε HEX, στον κώδικα του έργου συχνά χρησιμοποιούνται μεταβλητές HSL και στην τεκμηρίωση μερικές φορές είναι πιο βολικό να αναφέρεται το όνομα του χρώματος. Η χειροκίνητη εναλλαγή μεταξύ αυτών των εγγραφών απαιτεί χρόνο και δημιουργεί περιθώρια για λάθη, ειδικά όταν πρόκειται για διαφάνεια ή μη τυποποιημένες αποχρώσεις.

Το εργαλείο λειτουργεί τοπικά στον περιηγητή σας. Το χρώμα αναλύεται μέσω canvas ή style, επομένως δεν πραγματοποιούνται αιτήματα στον διακομιστή. Αυτό είναι πρακτικό όταν εργάζεστε με μακέτες πελατών και δεν θέλετε να μεταφέρετε τα δεδομένα τους σε τρίτες υπηρεσίες. Το αποτέλεσμα είναι προβλέψιμο: είναι το ίδιο σε κάθε συσκευή που υποστηρίζει τα ίδια πρότυπα ιστού.

Δυνατότητες

• Εισαγωγή χρώματος σε οποιαδήποτε δημοφιλή μορφή: HEX, rgb(), rgba(), hsl(), hsla(), καθώς και ονόματα όπως το rebeccapurple ή το tomato.
• Ενσωματωμένο color picker: μπορείτε να επιλέξετε το χρώμα οπτικά από την παλέτα, χωρίς να πληκτρολογήσετε χαρακτήρες χειροκίνητα.
• Ανάλυση της τιμής μέσω του περιηγητή, χωρίς επικοινωνία με το backend.
• Μεγάλο δείγμα προεπισκόπησης που δείχνει πώς φαίνεται το χρώμα στην πράξη.
• Πίνακας με όλες τις μορφές: HEX, RGB, HSL, HWB, όνομα χρώματος.
• Ξεχωριστό κουμπί «Αντιγραφή» δίπλα σε κάθε μορφή.
• Κουμπί «Αντιγραφή όλων» που συγκεντρώνει όλες τις τιμές σε μια λίστα για επικόλληση στην τεκμηρίωση.
• Υποστήριξη διαφάνειας: το alpha κανάλι εμφανίζεται στις μορφές RGBA και HSLA.
• Εμφάνιση HWB, εάν αυτή η μορφή υποστηρίζεται από τον τρέχοντα περιηγητή.

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

Η χρήση περιορίζεται σε μερικές απλές ενέργειες. Αρχικά ανοίξτε τη σελίδα του εργαλείου και στη συνέχεια ακολουθήστε τα παρακάτω βήματα.

1. Πληκτρολογήστε το χρώμα στο πεδίο κειμένου ή χρησιμοποιήστε το color picker. Μπορείτε να γράψετε την τιμή σε οποιαδήποτε μορφή: #f8a, #f8a100, rgb(248, 161, 0), hsl(39, 100%, 49%), orange.
2. Περιμένετε το εργαλείο να αναγνωρίσει την τιμή. Η ανάλυση γίνεται τοπικά, οπότε το αποτέλεσμα εμφανίζεται αμέσως μετά την εισαγωγή.
3. Δείτε την προεπισκόπηση. Εάν το χρώμα διαφέρει από αυτό που αναμενόσασταν, ελέγξτε αν η τιμή είναι σωστή, ειδικά αν χρησιμοποιήσατε συντομευμένο HEX.
4. Στον παρακάτω πίνακα βρείτε τη μορφή που χρειάζεστε. Πατήστε «Αντιγραφή» δίπλα της για να αντιγράψετε αυτή την τιμή.
5. Εάν χρειάζεστε όλες τις μορφές ταυτόχρονα, πατήστε «Αντιγραφή όλων». Αυτό είναι χρήσιμο για τη δημιουργία tokens ή σχολίων στον κώδικα.
6. Εάν το χρώμα έχει διαφάνεια, προσέξτε τις γραμμές RGBA και HSLA. Το HWB θα εμφανιστεί στον πίνακα μόνο εάν ο περιηγητής υποστηρίζει αυτή τη μορφή.

Το εργαλείο δεν αποθηκεύει το ιστορικό εισαγωγής και δεν στέλνει τίποτα στον διακομιστή. Όλη η μετατροπή γίνεται εντός της σελίδας, οπότε μετά την ανανέωση του περιηγητή μπορείτε να ξεκινήσετε από την αρχή.

Τυπικά σενάρια

Μετάβαση από HEX σε HSL για διαχείριση διαφάνειας. Στη μακέτα το χρώμα είναι ορισμένο ως #2c6e49. Όμως στον κώδικα είναι πιο εύκολο να χρησιμοποιηθεί το HSL για να αλλάξετε τη φωτεινότητα ή τον κορεσμό χωρίς να ξαναϋπολογίσετε τα κανάλια. Ο μετατροπέας δείχνει αμέσως την αντίστοιχη τιμή hsl(). Προσθέτοντας το alpha κανάλι, θα έχετε μια ημιδιαφανή έκδοση της ίδιας απόχρωσης για overlays ή σκιές.

Έλεγχος ονοματισμένων χρωμάτων. Μερικές φορές στο CSS θέλουμε να γράψουμε απλώς tomato ή gold. Αλλά δεν είναι πάντα ξεκάθαρο πώς θα φαίνονται στην πράξη. Εισάγετε το όνομα στον μετατροπέα και δείτε το αποτέλεσμα.