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

Μετατροπή μεταξύ HEX, RGB, HSL, HSV και CMYK. Ζωντανή προεπισκόπηση. Έλεγχος αντίθεσης WCAG για προσβασιμότητα. Τίποτα δεν εγκαταλείπει το πρόγραμμα περιήγησής σας.

Πώς λειτουργεί το Μετατροπέας Χρωμάτων

Το Color Converter μεταφράζει οποιοδήποτε χρώμα μεταξύ μορφών HEX, RGB, HSL, HSV και CMYK αμέσως καθώς πληκτρολογείτε. Εκτελεί επίσης έναν έλεγχο αντίθεσης WCAG μεταξύ δύο χρωμάτων που επιλέγετε, δείχνοντας την αναλογία αντίθεσης και το αποτέλεσμα επιτυχίας ή αποτυχίας AA/AAA για κανονικό κείμενο, μεγάλο κείμενο και στοιχεία διεπαφής. Όλοι οι υπολογισμοί γίνονται στο πρόγραμμα περιήγησης χωρίς να στέλνονται δεδομένα πουθενά, τίποτα από όσα πληκτρολογείτε δεν φεύγει από τη συσκευή σας.

Η κατανόηση του πώς φαίνεται το ίδιο χρώμα σε διάφορα χρωματικά μοντέλα είναι χρήσιμη στις παραδόσεις σχεδίασης. Ένας σχεδιαστής μπορεί να ορίσει ένα χρώμα μάρκας ως HEX #1A4F8C, ένας προγραμματιστής CSS χρειάζεται το ισοδύναμο HSL για τη θεματοποίηση, μια ομάδα εκτύπωσης χρειάζεται την ανάλυση CMYK. Αυτό το εργαλείο κάνει τη μετατροπή προς όλες τις κατευθύνσεις ταυτόχρονα ώστε να μην χρειάζεται ποτέ να τρέξετε πολλούς ξεχωριστούς μετατροπείς.

Συγγραφή από Bastien Sulyan

Μετατροπέας Χρωμάτων: οδηγός βήμα προς βήμα

Πληκτρολογήστε μια τιμή HEX, κάντε κλικ σε ένα δείγμα χρώματος, ή εισαγάγετε τιμές RGB, HSL, HSV ή CMYK στα αντίστοιχα πεδία.
Όλες οι άλλες αναπαραστάσεις μορφής ενημερώνονται αμέσως για να δείξουν το ισοδύναμο χρώμα.
Για να τρέξεις έναν έλεγχο αντίθεσης, επίλεξε ένα χρώμα προσκηνίου και ένα χρώμα φόντου χρησιμοποιώντας τους δύο επιλογείς χρώματος.
Διαβάστε την αναλογία αντίθεσης WCAG και τα σήματα επιτυχίας ή αποτυχίας για τα επίπεδα συμμόρφωσης AA και AAA.
Αντιγράψτε οποιαδήποτε τιμή χρώματος χρησιμοποιώντας το εικονίδιο αντιγραφής δίπλα σε κάθε πεδίο.

Συνήθεις περιπτώσεις χρήσης

Ένας σχεδιαστής διεπαφής μετατρέπει έναν κωδικό HEX μάρκας σε HSL για να γράψει μια προσαρμοσμένη ιδιότητα CSS για ένα σύστημα θεματοποίησης.
Ένας προγραμματιστής ιστού ελέγχει την αναλογία αντίθεσης μεταξύ του χρώματος κειμένου και του φόντου του πριν αποστείλει ένα στοιχείο για να επιβεβαιώσει τη συμμόρφωση WCAG AA.
Ένας σχεδιαστής εκτύπωσης λαμβάνει ένα χρώμα HEX ιστού και χρειάζεται το ισοδύναμο CMYK για να το ταιριάξει σε ένα τυπωμένο φυλλάδιο.
Ένας προγραμματιστής χρειάζεται την ανάλυση RGB ενός διακριτικού σχεδίασης για να περάσει τις μεμονωμένες τιμές καναλιού σε μια συνάρτηση σχεδίασης καμβά.

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

Υποστηρίζει το εργαλείο τιμές άλφα (διαφάνεια);

Ο τρέχων μετατροπέας λειτουργεί με πλήρως αδιαφανή χρώματα (άλφα = 1). Το HEXA (δεκαεξαδικό 8 ψηφίων) και το RGBA δεν είναι ακόμη στο πεδίο. Για αδιαφάνεια, ορίστε το κανάλι άλφα στο CSS σας ξεχωριστά χρησιμοποιώντας τη σημειογραφία rgba() ή oklch().

Αποθηκεύονται ή στέλνονται κάπου τα χρώματα που εισάγω;

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

Ποια επίπεδα αντίθεσης WCAG υποστηρίζει ο ελεγκτής;

Το εργαλείο αναφέρει έναντι των κριτηρίων επιτυχίας WCAG 2.1: το AA απαιτεί ελάχιστη αναλογία αντίθεσης 4.5:1 για κανονικό κείμενο (κάτω από 18pt ή 14pt έντονο) και 3:1 για μεγάλο κείμενο και στοιχεία διεπαφής. Το AAA απαιτεί 7:1 για κανονικό κείμενο και 4.5:1 για μεγάλο κείμενο.

Γιατί οι τιμές CMYK διαφέρουν μεταξύ αυτού του εργαλείου και του επαγγελματικού λογισμικού σχεδίασης;

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

Μπορώ να μετατρέψω ένα όνομα χρώματος CSS όπως «cornflowerblue» εδώ;

Τα ονομασμένα χρώματα CSS δεν πληκτρολογούνται απευθείας στα πεδία του μετατροπέα. Για να μετατρέψεις ένα ονομασμένο χρώμα, βρες πρώτα την τιμή HEX του σε μια αναφορά CSS (το cornflowerblue είναι #6495ED), μετά επικόλλησε αυτό το HEX στο πεδίο HEX για να δεις όλες τις άλλες μορφές.

Λειτουργεί το εργαλείο εκτός σύνδεσης αφού φορτωθεί η σελίδα;

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

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

Κρατήστε τα πάντα τοπικά, εξερευνήστε συμπληρωματικά εργαλεία.

Όλα τα εργαλεία για προγραμματιστές