Το HSL είναι ο φιλικός τρόπος να διαλέξεις χρώμα, το RGB είναι αυτό που καταναλώνουν οι οθόνες, οι καμβάδες και ο κώδικας εικόνας. Αυτός ο μετατροπέας μετατρέπει οποιοδήποτε τρίπτυχο από hue, saturation και lightness σε ακριβή κανάλια 0–255.
Πώς λειτουργεί η μετατροπή από HSL σε RGB
- Μετέτρεψε τα S και L σε κλάσματα και υπολόγισε τη χρωματικότητα C = (1 − |2L − 1|) × S.
- Διαίρεσε το hue δια 60 για να βρεις το τμήμα στον χρωματικό τροχό και υπολόγισε την ενδιάμεση τιμή X = C × (1 − |(H/60 mod 2) − 1|).
- Ανάθεσε τις τιμές C, X και 0 στις θέσεις R, G και B σύμφωνα με εκείνο το τμήμα.
- Πρόσθεσε την απόκλιση φωτεινότητας L − C/2 και στα τρία κανάλια και πολλαπλασίασε με 255.
Παράδειγμα εφαρμογής
Το αποτέλεσμα είναι ακριβές μέχρι το τελικό στρογγύλεμα σε ακέραια κανάλια. Υποστηρίζονται κλασματικές τιμές hue ή saturation και απλώς καταλήγουν στο πλησιέστερο RGB τρίπτυχο.
HSL και RGB εξηγούνται
Τι είναι το HSL;
Το HSL χωρίζει ένα χρώμα σε hue (0–360° στον χρωματικό τροχό), saturation (πόσο χρωματικό, 0–100%) και lightness (πόσο φωτεινό, 0–100%). Επειδή κάθε μέρος αντιστοιχεί στον τρόπο που οι άνθρωποι περιγράφουν το χρώμα, το HSL είναι η πιο εύκολη μορφή για να φτιάχνεις τόνους, σκιές και συνεπείς παλέτες — χειροκίνητα ή σε κώδικα.
- Σύνταξη:
- hsl(H, S%, L%)
- Πεδίο:
- 0–360°, 0–100%, 0–100%
- Καλύτερο για:
- παλέτες, τόνους και σκιές, θεματισμός
Τι είναι το RGB;
Το RGB περιγράφει ένα χρώμα ως τρία κανάλια φωτός — κόκκινο, πράσινο και μπλε — το καθένα από 0 έως 255. Αυτό αντικατοπτρίζει τον τρόπο που λειτουργούν οι οθόνες: όλα τα τρία στο 255 δίνουν λευκό, όλα στο 0 δίνουν μαύρο. Το RGB είναι η σωστή επιλογή όποτε χρειάζεται να υπολογίσεις με ένα χρώμα, και το rgba() προσθέτει διαφάνεια.
- Σύνταξη:
- rgb(R, G, B)
- Πεδίο:
- 0–255 ανά κανάλι
- Καλύτερο για:
- κώδικας, canvas, διαφάνεια με rgba()
Πίνακας αναφοράς HSL σε RGB
Οι πιο κοινές CSS αποχρώσεις, μετατρεπόμενες από HSL σε RGB.
| Χρώμα | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |