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

Τι κάνει αυτή η σελίδα και γιατί υπάρχει

Η σελίδα δέχεται έναν hex κωδικό χρώματος – είτε την πλήρη εξαψήφια μορφή όπως #1E90FF είτε την τριψήφια συντομογραφία όπως #abc – και επιστρέφει αμέσως την ισοδύναμη τιμή HSL (απόχρωση σε μοίρες, κορεσμός και φωτεινότητα σε ποσοστά). Ταυτόχρονα εμφανίζεται το χρώμα σε όλες τις άλλες υποστηριζόμενες μορφές (RGB, HSV, CMYK, LAB), ώστε να αντιγράψετε όποια χρειάζεστε. Ο μετατροπέας λειτουργεί εξ ολοκλήρου στο πρόγραμμα περιήγησής σας – τίποτα από όσα πληκτρολογείτε δεν ανεβαίνει ούτε αποθηκεύεται πουθενά.

Αυτό που κάνει τη σελίδα διαφορετική από έναν απλό υπολογιστή χρωμάτων είναι η εστίαση στη σχέση HEX και HSL. Το HEX είναι μια συμπαγής σημειογραφία που κωδικοποιεί απευθείας τις τρεις συνιστώσες RGB (κόκκινο, πράσινο, μπλε) σε δεκαεξαδική βάση. Το HSL, αντίθετα, έχει σχεδιαστεί για ανθρώπινη λογική: η απόχρωση μετριέται σε μοίρες (0–360) σε έναν χρωματικό τροχό, ο κορεσμός εκφράζει την ένταση του χρώματος και η φωτεινότητα το πόσο κοντά είναι στο λευκό ή στο μαύρο. Μια αλλαγή στη φωτεινότητα διατηρεί την απόχρωση ανέπαφη – πράγμα ανεκτίμητο όταν φτιάχνετε παλέτες ή θέματα.

Ούτε το HEX (εξαψήφιο ή τριψήφιο) ούτε το HSL περιλαμβάνουν κανάλι άλφα. Η μετατροπή αφορά πάντα πλήρως αδιαφανή χρώματα.

Πώς λειτουργεί η είσοδος και ποιες είναι οι απαιτήσεις

Η σελίδα δέχεται μόνο έγκυρα εξαψήφια ή τριψήφια hex codes, με ή χωρίς το σύμβολο #. Αν εισαγάγετε μια μη έγκυρη τιμή, εμφανίζεται το μήνυμα λάθους: "Εισαγάγετε ένα hex χρώμα όπως #4f46e5 ή #abc." Δεν γίνεται καμία αυτόματη διόρθωση ή εικασία.

Η τριψήφια συντομογραφία #abc αντιστοιχεί στο #aabbcc – κάθε ψηφίο διπλασιάζεται. Για παράδειγμα, #f00 γίνεται #ff0000 και μετατρέπεται σε HSL με απόχρωση 0°, κορεσμό 100% και φωτεινότητα 50%. Η σελίδα το κάνει αυτόματα.

Η μετατροπή από HEX σε HSL ακολουθεί την τυπική μαθηματική διαδικασία: πρώτα τα δεκαεξαδικά ψηφία μετατρέπονται σε δεκαδικές τιμές R, G, B (0–255). Στη συνέχεια αυτές κανονικοποιούνται σε κλάσματα (0–1). Υπολογίζονται η μέγιστη και η ελάχιστη τιμή, η διαφορά τους (delta) και, ανάλογα με το ποιο κανάλι είναι το μέγιστο, προκύπτει η γωνία απόχρωσης. Ο κορεσμός είναι delta / (1 - |2*L - 1|) όπου L = (max + min)/2, και η φωτεινότητα είναι απλώς ο μέσος όρος του max και min. Όλες οι πράξεις γίνονται με αριθμητική ακρίβεια κινητής υποδιαστολής.

Πίνακας παραδειγμάτων μετατροπής

Ακρότατες περιπτώσεις και όρια

Η σελίδα ελέγχει αυστηρά την εγκυρότητα της εισόδου. Δεν αποδέχεται τιμές HEX με 4 ή 5 ψηφία, ούτε δεκαεξαδικές συμβολοσειρές που περιέχουν χαρακτήρες εκτός του 0–9 και A–F (μη πεζογράμματη), ούτε τιμές με κανάλι άλφα (π.χ. #1E90FF80). Αν δώσετε έναν κωδικό που αντιστοιχεί σε χρώμα εκτός του ορατού φάσματος RGB – κάτι που μπορεί να συμβεί όταν εισάγετε τιμές από άλλους χρωματικούς χώρους όπως LAB ή CMYK – η σελίδα προσαρμόζει το χρώμα στο πλησιέστερο εμφανίσιμο. Η επιστροφή στο HEX μπορεί να έχει μικρή απόκλιση. Αυτή η συμπεριφορά είναι συνηθισμένη σε εργαλεία μετατροπής, αλλά είναι σημαντικό να την γνωρίζετε αν δουλεύετε με ακρίβεια.

Επιπλέον, οι τιμές CMYK που εμφανίζονται είναι μια εκτίμηση βασισμένη σε αλγόριθμο μετατροπής RGB->CMYK και όχι σε προφίλ εκτύπωσης. Δεν πρέπει να χρησιμοποιούνται για επαγγελματική εκτύπωση χωρίς βαθμονόμηση. Κάθε συσκευή εκτύπωσης έχει το δικό της χρωματικό χώρο, και μια απλή αριθμητική μετατροπή δεν αρκεί.

Ποιοι χρειάζονται αυτή τη σελίδα και γιατί

Οι χρήστες που θα ωφεληθούν περισσότερο είναι:

• Front‑end developers που γράφουν CSS και θέλουν να μετατρέψουν ένα χρώμα από ένα σχέδιο σε HSL για να προσαρμόσουν εύκολα τη φωτεινότητα σε hover states ή εναλλακτικές παραλλαγές θέματος. Για παράδειγμα, αν ένα κουμπί έχει χρώμα #4f46e5, μπορούν να το μετατρέψουν σε hsl(245°, 77%, 59%) και να μειώσουν τη φωτεινότητα στο 40% για μια σκούρα παραλλαγή χωρίς να αλλάξει η απόχρωση.

• UI/UX σχεδιαστές που σκέφτονται με όρους απόχρωσης, κορεσμού και φωτεινότητας. Αν μια μάρκα δίνει ένα hex χρώμα, ο σχεδιαστής το μετατρέπει σε HSL και από εκεί μπορεί να δημιουργήσει συμπληρωματικές, ανάλογες ή μονοχρωματικές παλέτες αλλάζοντας μόνο την απόχρωση ή τον κορεσμό.

• Όποιος χτίζει μια χρωματική παλέτα – το HSL διευκολύνει τη δημιουργία συστημάτων με σταθερή απόχρωση και μεταβαλλόμενη φωτεινότητα.

• Ελεγκτές προσβασιμότητας που χρειάζονται να εξετάσουν αναλογίες αντίθεσης για WCAG. Το HSL καθιστά εύκολο να διατηρήσετε την απόχρωση αυξάνοντας παράλληλα την αντίθεση, κάτι που είναι δυσκολότερο με ακατέργαστες τιμές HEX ή RGB.

Σχέση HEX και HSL: γιατί το HSL κερδίζει στην πράξη

Το HEX είναι μια βολική σύνταξη για το μηχάνημα: έξι δεκαεξαδικά ψηφία, δύο για κάθε κανάλι RGB. Ο προγραμματιστής το αντιγράφει από ένα εργαλείο σχεδίασης και το βάζει απευθείας στο CSS. Αλλά μόλις χρειαστεί να κάνει μια μικρή προσαρμογή – π.χ. να φωτίσει ελαφρά το χρώμα ενός κουμπιού για την κατάσταση hover – αναγκάζεται να μετατρέψει νοερά ή με δοκιμές. Το HSL λύνει αυτό το πρόβλημα: η φωτεινότητα είναι μια ξεκάθαρη παράμετρος.

Η ίδια η φύση του HSL το καθιστά πιο διαισθητικό για ανθρώπινες εργασίες χρώματος. Η δημιουργία παλετών, η ανάπτυξη θεμάτων (dark/light mode) και οι έλεγχοι αντίθεσης βασίζονται σε μεγάλο βαθμό σε μεταβολές φωτεινότητας και κορεσμού, όχι σε μεταβολές των απόλυτων τιμών RGB. Εδώ η σελίδα γεφυρώνει το χάσμα: δέχεται ένα hex από έναν συνάδελφο ή ένα σύστημα σχεδίασης και δίνει HSL για περαιτέρω επεξεργασία.

Η διαφορά μεταξύ HSL και HSV (ή HSB) είναι επίσης σημαντική. Και τα δύο μοντέλα χρησιμοποιούν απόχρωση, αλλά το τρίτο κανάλι διαφέρει: στο HSV είναι η φωτεινότητα (value/brightness), ενώ στο HSL είναι η φωτεινότητα (lightness). Στο HSV, το λευκό και τα καθαρά χρώματα έχουν value=100%, αλλά το μαύρο έχει 0%. Στο HSL, η φωτεινότητα 100% δίνει πάντα λευκό, 0% δίνει μαύρο, και 50% δίνει το καθαρό χρώμα. Αυτή η διαφορά επηρεάζει τον τρόπο που δημιουργούνται οι κλίμακες.

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

Μπορώ να εισάγω hex code χωρίς το σύμβολο #;

Ναι. Η σελίδα δέχεται και #4f46e5 και 4f46e5. Το ίδιο ισχύει και για την τριψήφια συντομογραφία.

Γιατί η τιμή CMYK που βλέπω διαφέρει από αυτή του εκτυπωτή μου;

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

Τι σημαίνει η ένδειξη "εκτός γκάμας" όταν αλλάζω χρωματικό χώρο;

Αν εισαγάγετε μια τιμή HSL, LAB ή CMYK που αντιστοιχεί σε ένα χρώμα που η οθόνη σας δεν μπορεί να εμφανίσει (εκτός του ορατού φάσματος RGB), η σελίδα προσαρμόζει αυτόματα το χρώμα στο πλησιέστερο δυνατό. Αυτή η προσαρμογή μπορεί να προκαλέσει μια μικρή μετατόπιση όταν επιστρέψετε σε HEX.

Υπάρχει υποστήριξη για hex με άλφα (π.χ. #RRGGBBAA);

Όχι. Η σελίδα λειτουργεί μόνο με πλήρως αδιαφανή χρώματα, όπως ακριβώς και το τυπικό HSL που δεν περιλαμβάνει κανάλι άλφα.

Η μετατροπή γίνεται στο πρόγραμμα περιήγησης ή σε διακομιστή;

Όλοι οι υπολογισμοί γίνονται τοπικά στο πρόγραμμα περιήγησης με JavaScript. Κανένα δεδομένο δεν αποστέλλεται σε διακομιστή.

Μπορώ να χρησιμοποιήσω την τριψήφια συντομογραφία και για χρώματα εκτός της κλασικής παλέτας;

Ναι, οποιοδήποτε τριψήφιο δεκαεξαδικό (π.χ. #369) λειτουργεί. Το αποτέλεσμα θα είναι το χρώμα που προκύπτει από τον διπλασιασμό κάθε ψηφίου: #336699.