Ο converter δέχεται κάθε μορφή hex του CSS: 6ψήφιο #3366cc, τη συντομογραφία 3 ψηφίων #36c, καθώς και τις μορφές 4 και 8 ψηφίων με κανάλι alpha, με ή χωρίς το #. Εμφανίζει το string hsl() ή hsla(), τις απλές τιμές και μια ανάλυση ανά συνιστώσα - καθώς και μια γραμμή HSL προς HEX για την αντίστροφη πορεία. Όλη η επεξεργασία γίνεται στον browser σας - χωρίς αποστολή αρχείων, χωρίς λογαριασμό, χωρίς όρια.
HEX HSL Converter Ελληνικά
Λειτουργεί εξ ολοκλήρου στον browser σας - χωρίς μεταφόρτωση, χωρίς εγγραφή.
CSS
hsl(220, 60%, 50%)Πώς μετατρέπεται
Απόχρωση220
Κορεσμός60%
Φωτεινότητα50%
Θέλετε το αντίστροφο; HSL σε HEX
#3366ccΠώς μετατρέπω HEX σε HSL;
Πρώτα διαβάζετε τον κωδικό hex ως κόκκινο, πράσινο και μπλε (0-255), και έπειτα εκφράζετε το ίδιο χρώμα ως απόχρωση, κορεσμό και φωτεινότητα. Η απόχρωση είναι η γωνία στον κύκλο χρωμάτων (0-360), ο κορεσμός δείχνει πόσο ζωντανό είναι το χρώμα (0-100%) και η φωτεινότητα πόσο ανοιχτόχρωμο είναι (0-100%). Το #3366cc γίνεται hsl(220, 60%, 50%). Αυτός ο converter το κάνει αμέσως καθώς πληκτρολογείτε.
Πώς λειτουργεί
- 1Εισάγετε έναν κωδικό hex. Γράψτε ή επικολλήστε ένα hex χρώμα όπως #3366cc (ή #36c), ή επιλέξτε ένα με τον color picker. Το # είναι προαιρετικό.
- 2Διαβάστε την τιμή HSL. Το string hsl(), οι απλές τιμές και μια ζωντανή προεπισκόπηση χρώματος ενημερώνονται καθώς πληκτρολογείτε, μαζί με μια ανάλυση ανά συνιστώσα για απόχρωση, κορεσμό και φωτεινότητα.
- 3Αντιγράψτε τη μορφή που θέλετε. Πατήστε Copy δίπλα στο string hsl() ή στις ακατέργαστες τιμές. Θέλετε το αντίστροφο; Εισάγετε παρακάτω απόχρωση, κορεσμό και φωτεινότητα για να πάρετε τον κωδικό hex πίσω.
Σε ποιους απευθύνεται
- Front-end developers που μετατρέπουν έναν κωδικό hex σε hsl() για να ρυθμίσουν τη φωτεινότητα σε καταστάσεις hover και focus χωρίς να διαλέξουν εντελώς νέο χρώμα.
- Σχεδιαστές που φτιάχνουν παλέτες και κρατούν σταθερή την απόχρωση, μεταβάλλοντας τον κορεσμό και τη φωτεινότητα για να παράγουν αποχρώσεις και σκιάσεις από ένα μόνο χρώμα brand.
- Δημιουργοί θεμάτων και design tokens που αποθηκεύουν τα χρώματα σε HSL, επειδή είναι πολύ πιο εύκολο να διαβαστεί και να προσαρμοστεί με το χέρι από ένα hex string.
- Όποιος αντιστοιχίζει χρώματα ανάμεσα σε εργαλεία όπου το ένα θέλει hex (Figma, το περισσότερο CSS) και το άλλο θέλει HSL (βοηθητικά SCSS, κάποια συστήματα χρώματος).
Συχνές ερωτήσεις
Είναι δωρεάν αυτός ο μετατροπέας HEX σε HSL;
Ναι - είναι εντελώς δωρεάν, χωρίς εγγραφή και χωρίς όρια. Λειτουργεί αποκλειστικά στον browser σας.
Ανεβαίνουν κάπου τα χρώματά μου;
Όχι. Η μετατροπή είναι απλή JavaScript που τρέχει στη συσκευή σας - τίποτα δεν στέλνεται σε server, και συνεχίζει να λειτουργεί και offline αφού φορτωθεί η σελίδα.
Τι είναι το HSL;
Το HSL σημαίνει απόχρωση (hue), κορεσμός (saturation) και φωτεινότητα (lightness). Η απόχρωση είναι μια γωνία από 0 έως 360 μοίρες στον κύκλο χρωμάτων, ο κορεσμός δείχνει πόσο ζωντανό είναι το χρώμα από 0 έως 100 τοις εκατό, και η φωτεινότητα ξεκινά από 0 τοις εκατό (μαύρο), περνά από το καθαρό χρώμα στο 50 τοις εκατό, και φτάνει στο 100 τοις εκατό (λευκό).
Πώς μετατρέπω hex σε HSL με το χέρι;
Μετατρέπετε το hex σε κόκκινο, πράσινο και μπλε και διαιρείτε το καθένα με 255. Παίρνετε το μέγιστο και το ελάχιστο των τριών: η φωτεινότητα είναι ο μέσος όρος τους, ο κορεσμός είναι (μέγιστο - ελάχιστο) διαιρεμένο με (1 - |2L - 1|), και η απόχρωση προκύπτει από το ποιο κανάλι είναι το μέγιστο, κλιμακωμένο σε 0-360 μοίρες.
Υποστηρίζει τη συντομογραφία 3 ψηφίων όπως #36c;
Ναι. Στη συντομογραφία CSS κάθε ψηφίο διπλασιάζεται, οπότε το #36c επεκτείνεται σε #3366cc και μετατρέπεται σε hsl(220, 60%, 50%). Η μορφή 4 ψηφίων λειτουργεί με τον ίδιο τρόπο, με το τελευταίο ψηφίο ως alpha.
Πώς χειρίζεται τη διαφάνεια (HSLA);
Ένας 8ψήφιος κωδικός hex μεταφέρει το alpha στο τελευταίο ζεύγος. Αυτό το byte (0-255) διαιρείται με 255 για να προκύψει η τιμή alpha 0-1 που θέλει το hsla(), στρογγυλοποιημένη σε τρία δεκαδικά - έτσι το #3366cc80 γίνεται hsla(220, 60%, 50%, 0.502).
Μπορεί να μετατρέψει HSL πίσω σε HEX;
Ναι. Χρησιμοποιήστε τη γραμμή HSL προς HEX κάτω από το αποτέλεσμα: εισάγετε απόχρωση (0-360) και κορεσμό με φωτεινότητα (0-100%) και επιστρέφει αμέσως τον κωδικό hex. Τιμές εκτός εύρους περιορίζονται.
Γιατί είναι χρήσιμο το HSL αντί για hex;
Το HSL είναι αναγνώσιμο από ανθρώπους: μπορείτε να ανοίξετε ένα χρώμα αυξάνοντας το L, να το απαλύνετε μειώνοντας το S, ή να αλλάξετε την οικογένειά του μεταβάλλοντας το H, όλα χωρίς να μαντεύετε ψηφία hex. Αυτό το κάνει ιδανικό για συνεπείς παλέτες, καταστάσεις hover και design tokens.