Μετατροπέας HEX σε XYZ

Τι σημαίνουν όλες αυτές οι μορφές χρωμάτων;

Ένα χρώμα στην οθόνη είναι ένα μείγμα κόκκινου, πράσινου και μπλε φωτός, και κάθε μορφή αναπαριστά αυτό το μείγμα με τον δικό της τρόπο. Τα CSS και τα εργαλεία σχεδίασης χρησιμοποιούν κωδικούς HEX και τιμές RGB. Τα HSL, HSV και HWB περιγράφουν ένα χρώμα με βάση την απόχρωσή του, δηλαδή τη γωνία του στον χρωματικό κύκλο, καθώς και το πόσο έντονο και φωτεινό είναι, κάτι που διευκολύνει τη χειροκίνητη προσαρμογή. Το CMYK δίνει τις ποσότητες κυανού, ματζέντα, κίτρινου και μαύρου μελανιού για εκτύπωση. Τα LAB, LCH, OKLab και OKLCH έχουν σχεδιαστεί έτσι ώστε ίσα αριθμητικά διαστήματα να φαίνονται ίσα στο μάτι, κάτι που βοηθά στη δημιουργία παλετών και διαβαθμίσεων, και τα σύγχρονα CSS υποστηρίζουν και τις τέσσερις μορφές. Τα τερματικά χρησιμοποιούν κωδικούς χρωμάτων ANSI, ενώ τα CSS περιλαμβάνουν επίσης ονομασμένα χρώματα, όπως το tomato.

Ακολουθεί το ίδιο πορτοκαλί χρώμα σε κάθε μορφή:

Περιγραφή εργαλείου

Αυτό το εργαλείο μετατρέπει ένα χρώμα ανάμεσα σε αυτές τις 17 μορφές και το εμφανίζει ως δείγμα κάτω από το αποτέλεσμα. Όλοι οι μετατροπείς χρωμάτων εδώ λειτουργούν με τον ίδιο τρόπο, από τον γενικό Μετατροπέα χρωμάτων έως εκείνους που καλύπτουν ένα συγκεκριμένο ζεύγος μορφών, όπως HEX σε RGB, RGB σε CMYK ή HEX σε όνομα χρώματος: ξεκινούν από τις μορφές που αναφέρονται στο όνομά τους, ενώ τα μενού «Πηγή» και «Στόχος» επιτρέπουν την επιλογή οποιασδήποτε άλλης. Επικολλήστε ένα χρώμα και το αποτέλεσμα εμφανίζεται καθώς πληκτρολογείτε, έτοιμο για αντιγραφή. Με επιλεγμένο τον «Αυτόματο εντοπισμό» ως πηγή, που είναι η προεπιλογή στον Μετατροπέα χρωμάτων, το εργαλείο προσδιορίζει τη μορφή από τον τρόπο γραφής του χρώματος. Το κουμπί εναλλαγής αντιστρέφει τη μετατροπή.

Παραδείγματα

Τι μπορείτε να επικολλήσετε

• Κωδικούς HEX με 3, 4, 6 ή 8 ψηφία, με ή χωρίς #. Ένα τέταρτο ψηφίο ή το τελευταίο ζεύγος καθορίζει την αδιαφάνεια.
• Συναρτήσεις όπως rgb(), hsl() ή oklch(), με κόμματα ή κενά ανάμεσα στις τιμές και προαιρετική αδιαφάνεια ως τέταρτη τιμή ή μετά από κάθετο: rgba(37, 99, 235, 0.5) ή rgb(37 99 235 / 50%).
• Ποσοστά για το κόκκινο, το πράσινο και το μπλε, όπως στο rgb(100%, 40%, 0%), και αποχρώσεις σε deg, rad, grad ή turn, όπως στο hsl(0.5turn, 100%, 50%).
• Απλούς αριθμούς χωρίς όνομα συνάρτησης, όπως 255, 102, 0. Ο Αυτόματος εντοπισμός θεωρεί ότι τρεις αριθμοί είναι RGB ή HSL όταν οι δύο τελευταίοι είναι ποσοστά, και ότι τέσσερις αριθμοί είναι CMYK, εκτός αν μοιάζουν με RGB με αδιαφάνεια.
• Ονόματα χρωμάτων με πεζούς ή κεφαλαίους χαρακτήρες, με ή χωρίς κενά: το Rebecca Purple γίνεται δεκτό.
• Τιμές HSB γραμμένες ως hsb() και χρώματα AppleScript μέσα σε άγκιστρα, όπως {65535, 26214, 0}.

Πώς λειτουργεί

Οι υπολογισμοί γίνονται από τη βιβλιοθήκη color-convert, μια βιβλιοθήκη JavaScript για τη μετατροπή χρωμάτων.

• Η αδιαφάνεια διατηρείται στις μορφές HEX, RGB, HSL, HWB, OKLab και OKLCH, οι οποίες μπορούν να την αναπαραστήσουν. Οι υπόλοιπες μορφές την παραλείπουν.
• Τα LAB, LCH και XYZ είναι τιμές CIE με λευκό σημείο D65. Οι συναρτήσεις CSS lab() και lch() χρησιμοποιούν λευκό σημείο D50, επομένως οι αριθμοί τους διαφέρουν ελαφρώς.
• Τα LAB, LCH, OKLab και OKLCH μπορούν να περιγράψουν χρώματα που οι οθόνες δεν μπορούν να εμφανίσουν. Όταν ένα τέτοιο χρώμα μετατρέπεται σε HEX, RGB ή άλλη μορφή για οθόνη, οι τιμές των καναλιών του περιορίζονται στο εύρος 0 έως 255, οπότε το oklch(70% 0.3 145) γίνεται #00c800.
• Ως αποτέλεσμα για το όνομα χρώματος επιλέγεται το πλησιέστερο από τα ονομασμένα χρώματα των CSS, επομένως είναι ακριβές μόνο για χρώματα που έχουν όνομα: το #ff6600 δίνει orangered, που είναι το #ff4500.
• Τα αποτελέσματα ANSI 16 και ANSI 256 είναι προσεγγιστικά, επειδή αυτές οι παλέτες περιλαμβάνουν μόνο 16 ή 256 χρώματα. Τα αποτελέσματα ANSI 16 είναι κωδικοί χρώματος προσκηνίου, από 30 έως 37 και από 90 έως 97, ενώ οι κωδικοί φόντου από 40 έως 47 και από 100 έως 107 ερμηνεύονται ως τα ίδια χρώματα.
• Το CMYK υπολογίζεται με τον βασικό τύπο, χωρίς προφίλ χρώματος εκτυπωτή, επομένως οι τιμές CMYK ενός τυπογραφείου για το ίδιο χρώμα μπορεί να διαφέρουν.
• Η κλίμακα του γκρι είναι ο μέσος όρος των τιμών κόκκινου, πράσινου και μπλε.

Συμβουλές

• Τα αποτελέσματα HEX, RGB, HSL, HWB, OKLab, OKLCH και ονόματος χρώματος είναι έγκυρα CSS, επομένως μπορείτε να τα επικολλήσετε απευθείας σε ένα φύλλο στυλ.
• Ο Αυτόματος εντοπισμός ερμηνεύει έναν τριψήφιο αριθμό, όπως το 208, ως σύντομο κωδικό HEX, επομένως επιλέξτε ANSI 256 ή ANSI 16 ως πηγή για κωδικούς τερματικού.
• Τα HSV και HSB είναι δύο ονομασίες για το ίδιο μοντέλο.