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

Μετατροπή HSL σε RGB: Από την ανθρώπινη αντίληψη στην οθόνη

Αυτή η σελίδα μετατρέπει ένα χρώμα από το μοντέλο HSL (Hue, Saturation, Lightness – Απόχρωση, Κορεσμός, Φωτεινότητα) στο RGB (Red, Green, Blue) που χρησιμοποιούν οι οθόνες. Δίνετε την απόχρωση σε μοίρες (0–360), τον κορεσμό και τη φωτεινότητα ως ποσοστά, και το εργαλείο υπολογίζει αμέσως τις τρεις τιμές RGB (0–255) μαζί με τα ισοδύναμα σε HEX, HSV, CMYK και LAB. Η μετατροπή γίνεται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας – κανένα δεδομένο δεν αποστέλλεται σε διακομιστή.

Τι κάνει αυτή τη σελίδα διαφορετική

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

Είσοδοι και έξοδοι

Είσοδοι

• Απόχρωση (Hue): 0–360 μοίρες
• Κορεσμός (Saturation): ποσοστό, π.χ. 75%
• Φωτεινότητα (Lightness): ποσοστό, π.χ. 59%

Παράδειγμα: 243, 75%, 59%

Έξοδοι που ενημερώνονται σε πραγματικό χρόνο

Όταν επεξεργάζεστε το πεδίο HSL, όλα τα υπόλοιπα πεδία ενημερώνονται αυτόματα χωρίς καθυστέρηση.

Κανόνες και οριακές περιπτώσεις

Αν η τιμή HSL εισαχθεί λανθασμένα (π.χ. μορφή ή εύρος εκτός ορίων), το εργαλείο εμφανίζει το μήνυμα:
"Εισαγάγετε HSL ως απόχρωση 0–360 με δύο ποσοστά, π.χ. 243, 75%, 59%."

Οριακές καταστάσεις:

• Όταν η φωτεινότητα είναι 0%, το αποτέλεσμα είναι πάντα μαύρο (0,0,0) ανεξάρτητα από απόχρωση και κορεσμό.
• Όταν η φωτεινότητα είναι 100%, το αποτέλεσμα είναι πάντα λευκό (255,255,255).
• Κορεσμός 0% δίνει γκρι κλίμακα: η φωτεινότητα καθορίζει την τιμή του γκρι (π.χ. 50% φωτεινότητα δίνει μεσαίο γκρι).
• Απόχρωση 0 και 360 είναι ταυτόσημες (κόκκινο).

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

Ποια είναι η πραγματική μέθοδος μετατροπής;

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

Ο μαθηματικός αλγόριθμος μετατρέπει πρώτα την HSL σε μια ενδιάμεση αναπαράσταση αντιστοιχισμένη σε έξι τομείς (0–360° χωρισμένες σε 6 περιοχές των 60°). Για κάθε τομέα, υπολογίζονται τρεις βοηθητικές μεταβλητές:

• C (χρωματικότητα) = (1 - |2L - 1|) × S
• X = C × (1 - |(H/60°) mod 2 - 1|)
• m = L - C/2

Στη συνέχεια, ανάλογα με το σε ποιον τομέα πέφτει η απόχρωση, αντιστοιχίζονται οι τρεις συνιστώσες R, G, B σε (C, X, 0), (X, C, 0), (0, C, X), (0, X, C), (X, 0, C) ή (C, 0, X). Αυτή η τριάδα δίνει το χρώμα στον κύκλο, και προσθέτοντας το m σε κάθε συνιστώσα παίρνουμε τις τελικές τιμές RGB.

Παράδειγμα: για H=243, S=75%, L=59%:

• C = (1 - |2×0.59 - 1|) × 0.75 = (1 - 0.18) × 0.75 = 0.615
• X = C × (1 - |(243/60) mod 2 - 1|) = 0.615 × (1 - |4.05 mod 2 - 1|) = 0.615 × (1 - |0.05 - 1|) = 0.615 × (1 - 0.95) = 0.03075
• m = 0.59 - 0.615/2 = 0.59 - 0.3075 = 0.2825
• H=243 βρίσκεται στον τομέα 4 (240–300°), άρα R = m, G = m + X, B = m + C → R = 0.2825, G = 0.31325, B = 0.8975
• Πολλαπλασιάζοντας με 255: (72, 80, 229) – περίπου η τιμή της οθόνης. Μικρές διαφορές οφείλονται σε στρογγυλοποιήσεις.

Ποιος χρειάζεται αυτή τη σελίδα;

• Σχεδιαστές που δημιουργούν χρωματικές παλέτες ή θέματα σε εφαρμογές σχεδίασης (π.χ. Figma, Sketch) και χρειάζονται τις αντίστοιχες τιμές RGB για κώδικα.
• Προγραμματιστές front‑end που μεταφέρουν χρώματα από ένα εργαλείο σχεδίασης (που συχνά χρησιμοποιεί HSL) σε CSS ή άλλο κώδικα που απαιτεί RGB ή HEX.
• Όποιος θέλει να σκέφτεται τα χρώματα με ανθρώπινους όρους (απόχρωση, κορεσμός, φωτεινότητα) και χρειάζεται τα ακριβή νούμερα της οθόνης για προγραμματισμό, δοκιμές ή τεκμηρίωση.

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

1. Μπορώ να μετατρέψω οποιοδήποτε χρώμα HSL σε RGB; Ναι, εφόσον η απόχρωση είναι 0–360, ο κορεσμός και η φωτεινότητα 0–100%. Όλες οι έγκυρες τιμές δίνουν μια μοναδική τριάδα RGB.

2. Γιατί το CMYK που βλέπω δεν ταιριάζει με το χρώμα στην εκτύπωση; Το CMYK στην οθόνη είναι υπολογισμός βάσει προτύπου, αλλά η πραγματική εκτύπωση εξαρτάται από το χαρτί, το μελάνι και τον εκτυπωτή. Χρησιμοποιήστε το ως ένδειξη, όχι ως οριστική τιμή.

3. Τι σημαίνει "χωρίς απώλειες" στη μετατροπή; Κάθε τιμή HSL αντιστοιχεί σε ένα μοναδικό RGB και το αντίστροφο – αν μετατρέψετε το RGB πίσω σε HSL, θα πάρετε την αρχική τιμή. Αυτό δεν ισχύει π.χ. για CMYK→RGB, όπου χάνεται πληροφορία.

4. Μπορώ να χρησιμοποιήσω το εργαλείο για δεκάδες χρώματα ταυτόχρονα; Το εργαλείο δέχεται μία τιμή HSL τη φορά. Για μαζικές μετατροπές, χρειάζεστε προγραμματιστική λύση ή υπολογιστικό φύλλο.

5. Η φωτεινότητα 50% δίνει πάντα ένα "καθαρό" χρώμα; Όχι απαραίτητα. Για κορεσμό 100% και φωτεινότητα 50%, το χρώμα είναι το πιο κορεσμένο δυνατό. Αλλά η φωτεινότητα 50% σημαίνει ότι το χρώμα δεν είναι ούτε πολύ σκούρο ούτε πολύ ανοιχτό – για παράδειγμα, το κόκκινο (0°, 100%, 50%) δίνει RGB (255,0,0).

6. Πώς διαφέρει η μετατροπή από αυτήν σε άλλα εργαλεία; Το παρόν εργαλείο υπολογίζει απευθείας στον browser σας χωρίς να στέλνει δεδομένα, εμφανίζει ταυτόχρονα πέντε μοντέλα, και δείχνει σαφώς την πιθανή απόκλιση του CMYK.

Γιατί να προτιμάτε το HSL για παλέτες;

Σε αντίθεση με το RGB, όπου μια μικρή αλλαγή σε μία συνιστώσα μπορεί να αλλάξει εντελώς την αντίληψη του χρώματος, στο HSL η φωτεινότητα μπορεί να αυξηθεί ή να μειωθεί χωρίς να μεταβληθεί η απόχρωση. Αυτό επιτρέπει τη δημιουργία κλιμάκων φωτεινότητας για ένα θέμα (π.χ. κουμπιά, φόντο, κείμενο) με μαθηματική ακρίβεια. Παράδειγμα: για ένα μπλε θέμα, μπορείτε να ορίσετε απόχρωση 220°, κορεσμό 70%, και στη συνέχεια να παράγετε παραλλαγές φωτεινότητας 30% (σκούρο μπλε), 50% (κανονικό μπλε) και 80% (απαλό μπλε). Στο RGB, αυτή η διαδικασία απαιτεί ξεχωριστούς υπολογισμούς.

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