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