1. Εισαγωγή τιμής
Πληκτρολογήστε έναν αριθμό στο πεδίο εισαγωγής. Μπορείτε να χρησιμοποιήσετε τελεία ή κόμμα.
RGB σε HSL
Αυτός ο μετατροπέας υπολογίζει άμεσα. Εισάγετε μια τιμή και το αποτέλεσμα εμφανίζεται αμέσως.
Loading tool editor...
Πότε χρειάζεστε: RGB σε HSL?
Το HSL (Απόχρωση, Κορεσμός, Φωτεινότητα) είναι ένας εναλλακτικός τρόπος καθορισμού χρωμάτων πιο διαισθητικός για τον άνθρωπο. Η Απόχρωση είναι η γωνία χρώματος (0–360°), ο Κορεσμός είναι η ένταση (0–100%) και η Φωτεινότητα πόσο φωτεινό/σκούρο (0–100%).
Το HSL διευκολύνει τη δημιουργία χρωματικών παραλλαγών: ρυθμίστε τη φωτεινότητα για αποχρώσεις, τον κορεσμό για μαλακές/έντονες εκδοχές ή μετατοπίστε την απόχρωση για συμπληρωματικά χρώματα.
Το CSS υποστηρίζει εγγενώς hsl(): hsl(14, 100%, 60%) ισοδυναμεί με rgb(255, 87, 51) και #FF5733.
Όλοι οι υπολογισμοί εκτελούνται τοπικά στον browser σας.
Πώς να χρησιμοποιήσετε τον μετατροπέα;
2. Ανάγνωση αποτελέσματος
Το αποτέλεσμα εμφανίζεται αμέσως στο διπλανό πεδίο – χωρίς κλικ.3. Αντιγραφή ή αντιστροφή
Κάντε κλικ στο Αντιγραφή ή χρησιμοποιήστε το κουμπί Αντιστροφή.
Πότε είναι χρήσιμος αυτός ο μετατροπέας;
Διαχείριση χρωμάτων
Δημιουργία παραλλαγών: αλλάξτε L (φωτεινότητα) κρατώντας σταθερά τα H και S.Web ανάπτυξη
hsl(217, 91%, 60%)— διαισθητική σημειογραφία χρωμάτων.Σκοτεινή λειτουργία
Αλλαγή L από 95% σε 10% δημιουργεί παραλλαγή σκοτεινού θέματος.Σχεδιασμός
Το HSL διευκολύνει τη δημιουργία συνεπών παλετών: περιστρέψτε H κατά 120° = συμπληρωματικό χρώμα.
Τι κάνει αυτόν τον μετατροπέα ξεχωριστό;
Πλήρης ιδιωτικότητα
Όλοι οι υπολογισμοί γίνονται τοπικά στον browser σας. Κανένα δεδομένο δεν στέλνεται σε server.Αποτελέσματα σε πραγματικό χρόνο
Το αποτέλεσμα ενημερώνεται αμέσως καθώς πληκτρολογείτε – χωρίς κουμπί.Αμφίδρομη μετατροπή
Το κουμπί Αντιστροφή σας επιτρέπει να μετατρέψετε και προς τις δύο κατευθύνσεις.Πίνακας αναφοράς
Ένας έτοιμος πίνακας με συχνά μετατρεπόμενες τιμές και περιγραφές.
Πώς λειτουργεί η μετατροπή;
Κανονικοποίηση RGB σε 0–1. Εύρεση Max και Min. L = (max + min) / 2.
Το HSL είναι πλήρως αντιστρέψιμο — η επιστροφή σε RGB δίνει ακριβώς το ίδιο χρώμα.
Πρακτικές συμβουλές
- Κόκκινο: hsl(0, 100%, 50%). Πράσινο: hsl(120, 100%, 50%). Μπλε: hsl(240, 100%, 50%).
- Συμπληρωματικό χρώμα: προσθέστε 180° στην απόχρωση. Κόκκινο (0°) → Κυανό (180°).
- Φωτεινότερο: αυξήστε L%. Σκοτεινότερο: μειώστε L%. L=0% = μαύρο, L=100% = λευκό.
- Αποκορεσμός: μειώστε S%. S=0% = γκρι κλίμακα. S=100% = καθαρό χρώμα.
RGB vs HSL – σύγκριση
| Ιδιότητα | RGB | HSL |
|---|---|---|
| Μοντέλο | Προσθετικά κανάλια | Απόχρωση/Κορεσμός/Φωτεινότητα |
| Τιμές | 0–255 per channel | H: 0–360°, S/L: 0–100% |
| Διαισθητικό | Δύσκολη πρόβλεψη χρωμάτων | Εύκολη ρύθμιση χρωμάτων |
| Θεωρία χρώματος | Δεν βασίζεται σε χρωματικό κύκλο | Αντιστοιχεί στον χρωματικό κύκλο |
| Υποστήριξη CSS | rgb(R, G, B) | hsl(H, S%, L%) |
RGB
- Μοντέλο
Προσθετικά κανάλια - Τιμές
0–255 per channel - Διαισθητικό
Δύσκολη πρόβλεψη χρωμάτων - Θεωρία χρώματος
Δεν βασίζεται σε χρωματικό κύκλο - Υποστήριξη CSS
rgb(R, G, B)
HSL
- Μοντέλο
Απόχρωση/Κορεσμός/Φωτεινότητα - Τιμές
H: 0–360°, S/L: 0–100% - Διαισθητικό
Εύκολη ρύθμιση χρωμάτων - Θεωρία χρώματος
Αντιστοιχεί στον χρωματικό κύκλο - Υποστήριξη CSS
hsl(H, S%, L%)
Μετατρέψτε RGB σε άλλες μονάδες
Εξερευνήστε άλλους μετατροπείς μονάδων
Συχνές ερωτήσεις
Βοηθήστε μας να βελτιώσουμε τα εργαλεία μας
Έχετε μια ιδέα, βρήκατε ένα σφάλμα ή θέλετε να προτείνετε μια λειτουργία; Γράψτε μας – απαντάμε εντός 24 ωρών.