Το HSL περιγράφει ένα χρώμα όπως το λένε οι άνθρωποι: ποιο χρώμα (hue), πόσο κορεσμένο (saturation), πόσο φωτεινό (lightness). Η μετατροπή ενός HEX σε HSL είναι ο γρηγορότερος τρόπος να πάρεις ένα χρώμα σε μορφή που μπορείς πραγματικά να προσαρμόσεις — να το φωτίσεις, να το θαμπώσεις ή να φτιάξεις μια ολόκληρη κλίμα από αυτό.
Πώς λειτουργεί η μετατροπή από HEX σε HSL
- Μετατρέψτε τον HEX σε RGB και διαιρέστε κάθε κανάλι με 255, ώστε και τα τρία να βρίσκονται μεταξύ 0 και 1.
- Βρείτε τη μεγαλύτερη και τη μικρότερη από τις τρεις τιμές. Ο μέσος τους είναι η φωτεινότητα L.
- Η διαφορά μεταξύ τους καθορίζει τον κορεσμό S: διαιρέστε τη με (2 − max − min) για φωτεινά χρώματα, ή με (max + min) για σκούρα.
- Το κανάλι που έχει τη μέγιστη τιμή καθορίζει την απόχρωση H — το κόκκινο στο 0°, το πράσινο στο 120°, το μπλε στο 240° — και τα υπόλοιπα δύο κανάλια τοποθετούν την απόχρωση μέσα σε αυτό το τμήμα.
Παράδειγμα εφαρμογής
Τα μαθηματικά είναι ακριβή, αλλά οι τιμές HSL συνήθως στρογγυλοποιούνται σε ακέραιους βαθμούς και ποσοστά. Η μετατροπή πίσω μπορεί επομένως να φέρει το RGB ένα ή δύο βήματα μακριά από το αρχικό — αόρατο στην πράξη, αλλά καλό να το ξέρεις αν κάνεις συνεχόμενα round-trip μετατροπές.
HEX και HSL εξηγούνται
Τι είναι το HEX;
Κωδικός HEX είναι ένας εξαψήφιος δεκαεξαδικός αριθμός που αποθηκεύει τα κανάλια κόκκινου, πράσινου και μπλε πίσω από ένα προεξέχον #. Κάθε ζεύγος ψηφίων καλύπτει ένα κανάλι, από 00 (καθόλου) έως FF (πλήρες), δίνοντας τα ίδια 16,7 εκατομμύρια χρώματα με το RGB αλλά σε πιο σύντομη σημειογραφία. Το HEX είναι το προεπιλεγμένο σε CSS, εργαλεία σχεδίασης και οδηγίες εταιρικής ταυτότητας.
- Σύνταξη:
- #RRGGBB
- Πεδίο:
- 00–FF ανά κανάλι
- Καλύτερο για:
- CSS, παράδοση σχεδίου, οδηγίες εταιρικής ταυτότητας
Τι είναι το HSL;
Το HSL χωρίζει ένα χρώμα σε hue (0–360° στον χρωματικό τροχό), saturation (πόσο χρωματικό, 0–100%) και lightness (πόσο φωτεινό, 0–100%). Επειδή κάθε μέρος αντιστοιχεί στον τρόπο που οι άνθρωποι περιγράφουν το χρώμα, το HSL είναι η πιο εύκολη μορφή για να φτιάχνεις τόνους, σκιές και συνεπείς παλέτες — χειροκίνητα ή σε κώδικα.
- Σύνταξη:
- hsl(H, S%, L%)
- Πεδίο:
- 0–360°, 0–100%, 0–100%
- Καλύτερο για:
- παλέτες, τόνους και σκιές, θεματισμός
Πίνακας αναφοράς HEX σε HSL
Οι πιο κοινές CSS αποχρώσεις, μετατρεπόμενες από HEX σε HSL.
| Χρώμα | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |