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

Τα HEX και RGB είναι οι δύο πιο κοινές μορφές χρωμάτων στο διαδίκτυο. Οι κώδικες HEX (#RRGGBB) είναι συμπαγείς και χρησιμοποιούνται ευρέως στη CSS, ενώ οι τιμές RGB (0-255 ανά κανάλι) χρησιμοποιούνται στη JavaScript και σε εργαλεία σχεδίασης.

Ο μετατροπέας hex σε rgb μετατρέπει άμεσα αυτές τις μορφές, διευκολύνοντας την εργασία σε διαφορετικά εργαλεία και κώδικες.

Το HSL (Απόχρωση, Κορεσμός, Φωτεινότητα) είναι το πιο διαισθητικό χρωματικό μοντέλο για σχεδιαστές. Ρυθμίστε:

• Απόχρωση για να αλλάξετε το χρώμα
• Κορεσμό για ζωντάνια
• Φωτεινότητα για λαμπρότητα

Ο μετατροπέας χρωμάτων HSL διευκολύνει τη δημιουργία παραλλαγών χρώματος, τη δημιουργία παλετών και τη μετατροπή τιμών HSL σε HEX ή RGB για εφαρμογή.

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

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

Για να μετατρέψετε ένα χρώμα HEX σε RGB, χωρίστε τον εξαψήφιο κώδικα (#RRGGBB) σε τρία ζεύγη δύο χαρακτήρων και μετατρέψτε καθένα από τη βάση 16 (δεκαεξαδικό) στη βάση 10 (δεκαδικό): R = 16 × d1 + d2, και ούτω καθεξής για το πράσινο και το μπλε.

Για παράδειγμα, το #FF5733 δίνει FF = 255, 57 = 87, 33 = 51, ή rgb(255, 87, 51). Και οι δύο συμβολισμοί περιγράφουν τον ίδιο χρωματικό χώρο sRGB που ορίζεται από το IEC 61966-2-1 και αναφέρεται στις προδιαγραφές W3C CSS Color.

Κάθε κανάλι κυμαίνεται από 0 έως 255 (8 bits), παράγοντας 256³ = 16.777.216 πιθανά χρώματα. Η σύντομη μορφή HEX (#F53) απλά διπλασιάζει κάθε ψηφίο σε ένα ζεύγος.

Το RGB μετατρέπεται σε HSL και HSV χρησιμοποιώντας το ίδιο πρώτο βήμα: κανονικοποιήστε κάθε κανάλι σε 0–1 (διαιρέστε με το 255) και, στη συνέχεια, βρείτε το μέγιστο (max) και το ελάχιστο (min). Η Απόχρωση (Hue) είναι η ίδια και στα δύο μοντέλα, υπολογιζόμενη από το ποιο κανάλι είναι το μεγαλύτερο.

Για το HSL, Φωτεινότητα (Lightness) = (max + min) / 2· για το HSV, Τιμή (Value) = max. Ο Κορεσμός (Saturation) υπολογίζεται διαφορετικά: το HSL διαιρεί το χρώμα (chroma) με το 1 − |2L − 1|, ενώ το HSV διαιρεί το χρώμα με το max.

Το HSL και το HSV είναι κυλινδρικές αναχαρτογραφήσεις του κύβου RGB, τυποποιημένες στο W3C CSS Color Module. Οι σχεδιαστές τα προτιμούν επειδή η Απόχρωση, ο Κορεσμός και η Φωτεινότητα αντιστοιχούν στον τρόπο με τον οποίο οι άνθρωποι περιγράφουν το χρώμα.

Ένας κωδικός χρώματος HEX είναι μια δεκαεξαδική σύντομη μορφή για τις τιμές καναλιών RGB, με πρόθεμα το #.

• Η κοινή εξαψήφια μορφή (#RRGGBB) κωδικοποιεί το κόκκινο, το πράσινο και το μπλε ως δύο δεκαεξαδικά ψηφία το καθένα.
• Η τριψήφια σύντομη μορφή (#RGB) επεκτείνει κάθε ψηφίο σε ζεύγος, επομένως το #F53 ισούται με #FF5533.
• Η οκταψήφια μορφή (#RRGGBBAA) και η τετραψήφια σύντομη μορφή προσθέτουν ένα κανάλι άλφα (αδιαφάνεια), όπως ορίζεται στο W3C CSS Color Module Level 4.

Το δεκαεξαδικό σύστημα έχει βάση το 16, χρησιμοποιώντας ψηφία 0–9 και γράμματα A–F, όπου A = 10 και F = 15. Αυτή η συμπαγής σημειογραφία είναι ο λόγος για τον οποίο το HEX κυριαρχεί στο CSS και στα επιλογέα χρωμάτων των εργαλείων σχεδίασης.

Οι περισσότερες τιμές HEX και RGB που χρησιμοποιείτε στο διαδίκτυο είναι sRGB, ο τυπικός χρωματικός χώρος που ορίζεται από το πρότυπο IEC 61966-2-1 και θεωρείται προεπιλογή από το CSS εκτός εάν δηλωθεί άλλος χώρος. Το sRGB καλύπτει ένα περιορισμένο εύρος χρωμάτων που μπορεί να δει το ανθρώπινο μάτι, γι' αυτό υπάρχουν χώροι ευρύτερου φάσματος όπως το Display P3 και το Rec. 2020 για σύγχρονες οθόνες.

Το CSS Color Module Level 4 από το W3C προσθέτει συναρτήσεις όπως οι color() και oklch() για την προσέγγιση αυτών των φασμάτων. Αυτός ο μετατροπέας λειτουργεί σε sRGB, το οποίο παραμένει ο ασφαλέστερος και πιο συμβατός χώρος για καθημερινές εργασίες ιστού και UI σε όλα τα προγράμματα περιήγησης και τις συσκευές.

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

• Οι προγραμματιστές ιστού μετατρέπουν το HEX σε RGB ή RGBA για να προσθέσουν αδιαφάνεια στο CSS.
• Οι σχεδιαστές UI χρησιμοποιούν το HSL για να δημιουργήσουν ανοιχτότερες και σκουρότερες αποχρώσεις ενός χρώματος εταιρικής ταυτότητας προσαρμόζοντας μόνο τη Φωτεινότητα (Lightness).
• Οι ομάδες εκτυπώσεων μετατρέπουν το RGB σε CMYK πριν στείλουν ένα εικαστικό στο τυπογραφείο, καθώς το μελάνι είναι αφαιρετικό.
• Τα εργαλεία οπτικοποίησης δεδομένων και προσβασιμότητας χρησιμοποιούν αυτές τις τιμές για να ελέγξουν τις αναλογίες αντίθεσης σύμφωνα με τις οδηγίες WCAG του W3C.

Ένας μετατροπέας απαλλάσσει από τους χειροκίνητους δεκαεξαδικούς υπολογισμούς και διατηρεί το χρώμα συνεπές σε κώδικα, αρχεία σχεδίασης και εκτυπώσεις.

Το CSS ορίζει 148 ονοματισμένα χρώματα, όπως το tomato (#FF6347), το dodgerblue (#1E90FF) και το rebeccapurple (#663399), καθένα από τα οποία αποτελεί ακριβές ψευδώνυμο για μια συγκεκριμένη τιμή HEX στο sRGB. Αυτά τα ονόματα είναι τυποποιημένα στο W3C CSS Color Module και υποστηρίζονται από κάθε σύγχρονο πρόγραμμα περιήγησης.

Είναι βολικά για τη δημιουργία πρωτοτύπων, αλλά αντιπροσωπεύουν μόνο ένα μικρό υποσύνολο από τα 16,7 εκατομμύρια χρώματα που είναι προσβάσιμα μέσω HEX και RGB.

Επειδή ένα ονοματισμένο χρώμα ισούται με έναν σταθερό κωδικό HEX, οι μετατροπείς μπορούν να εμφανίσουν το πλησιέστερο ονοματισμένο χρώμα για οποιαδήποτε εισαγωγή. Τα ονόματα χρωμάτων δεν εξαρτώνται από πεζά/κεφαλαία στο CSS, επομένως το 'DodgerBlue' και το 'dodgerblue' αποδίδονται πανομοιότυπα.

Αποφύγετε αυτά τα συχνά λάθη μετατροπής χρωμάτων:

• Το πιο συχνό λάθος είναι η παράλειψη του προθέματος # ή ο εσφαλμένος διαχωρισμός των ζευγών HEX, γεγονός που αλλοιώνει το αποτέλεσμα RGB.
• Ένα άλλο είναι να θεωρείτε το HSL και το HSV ταυτόσημα: η τρίτη τους συνιστώσα (Lightness έναντι Value) διαφέρει, επομένως το 50% Lightness δεν είναι 50% Value.
• Η προσδοκία ότι η μετατροπή RGB σε CMYK είναι ακριβής προκαλεί εκπλήξεις στην εκτύπωση, επειδή το αποτέλεσμα CMYK εξαρτάται από τον εκτυπωτή, το μελάνι και το χαρτί, και οι υπολογισμοί είναι μόνο μια προσέγγιση σύμφωνα με τα πρότυπα sRGB και προφίλ εκτύπωσης.
• Η πολύ πρόωρη στρογγυλοποίηση κατά τη μετατροπή μέσω HSL και πίσω μπορεί επίσης να αλλοιώσει το χρώμα.
• Τέλος, η παράλειψη του καναλιού άλφα καταργεί τη διαφάνεια κατά τη μετακίνηση μεταξύ RGB και RGBA ή #RRGGBBAA.

Κάθε μορφή χρώματος εξυπηρετεί διαφορετικό σκοπό.

• Το HEX (#RRGGBB) είναι η πιο συμπαγής μορφή και αποτελεί την προεπιλογή για το CSS και την παράδοση σχεδίων.
• Το RGB (0–255 ανά κανάλι) είναι το πιο εύκολο στην ανάγνωση και την επεξεργασία στη JavaScript και αντικατοπτρίζει τον τρόπο με τον οποίο οι οθόνες εκπέμπουν φως προσθετικά.
• Το HSL (Hue, Saturation, Lightness) είναι το καλύτερο για τη δημιουργία παλετών και τη διαίσθηση κατά τη ρύθμιση των αποχρώσεων.
• Το CMYK (Cyan, Magenta, Yellow, Key) προορίζεται για εκτυπώσεις, όπου το χρώμα είναι αφαιρετικό μελάνι στο χαρτί.

Όλες οι μορφές οθόνης μοιράζονται τον χώρο sRGB που ορίζεται από το IEC 61966-2-1 και το W3C CSS Color Module, επομένως τα HEX, RGB και HSL είναι πλήρως εναλλάξιμα· μόνο το CMYK απαιτεί μια προσεγγιστική μετατροπή που εξαρτάται από τη συσκευή.