Το να διαλέξεις χρώμα σε HSL είναι άνετο, αλλά τα stylesheets, τα design handoffs και τα έγγραφα brand εξακολουθούν να δουλεύουν με HEX. Αυτός ο μετατροπέας γεφυρώνει το κενό και σου δίνει τον εξαψήφιο κωδικό για κάθε συνδυασμό hue, saturation και lightness.
Πώς λειτουργεί η μετατροπή από HSL σε HEX
- Μετατρέψτε τον κορεσμό και τη φωτεινότητα σε κλάσματα: 60% γίνεται 0.6.
- Υπολόγισε τη χρωματικότητα C = (1 − |2L − 1|) × S — αυτό δείχνει πόσο μακριά είναι το χρώμα από το γκρι.
- Χρησιμοποίησε την απόχρωση για να τοποθετήσεις τη χρωματικότητα στα κανάλια R, G και B, στη συνέχεια μετατόπισε και τα τρία κατά L − C/2.
- Πολλαπλασίασε κάθε κανάλι με 255, στρογγυλοποίησέ το και γράψτο ως δύο δεκαεξαδικά ψηφία.
Παράδειγμα εφαρμογής
Η στρογγυλοποίηση γίνεται μία φορά, στο τελευταίο βήμα, όταν κάθε κανάλι κλειδώνει σε ακέραια τιμή 0–255. Το αποτέλεσμα είναι ο πιο κοντινός HEX κωδικός στο HSL εισόδου σου και συνήθως ταυτίζεται με αυτό που δείχνει ένα design εργαλείο.
HSL και HEX εξηγούνται
Τι είναι το HSL;
Το HSL χωρίζει ένα χρώμα σε hue (0–360° στον χρωματικό τροχό), saturation (πόσο χρωματικό, 0–100%) και lightness (πόσο φωτεινό, 0–100%). Επειδή κάθε μέρος αντιστοιχεί στον τρόπο που οι άνθρωποι περιγράφουν το χρώμα, το HSL είναι η πιο εύκολη μορφή για να φτιάχνεις τόνους, σκιές και συνεπείς παλέτες — χειροκίνητα ή σε κώδικα.
- Σύνταξη:
- hsl(H, S%, L%)
- Πεδίο:
- 0–360°, 0–100%, 0–100%
- Καλύτερο για:
- παλέτες, τόνους και σκιές, θεματισμός
Τι είναι το HEX;
Κωδικός HEX είναι ένας εξαψήφιος δεκαεξαδικός αριθμός που αποθηκεύει τα κανάλια κόκκινου, πράσινου και μπλε πίσω από ένα προεξέχον #. Κάθε ζεύγος ψηφίων καλύπτει ένα κανάλι, από 00 (καθόλου) έως FF (πλήρες), δίνοντας τα ίδια 16,7 εκατομμύρια χρώματα με το RGB αλλά σε πιο σύντομη σημειογραφία. Το HEX είναι το προεπιλεγμένο σε CSS, εργαλεία σχεδίασης και οδηγίες εταιρικής ταυτότητας.
- Σύνταξη:
- #RRGGBB
- Πεδίο:
- 00–FF ανά κανάλι
- Καλύτερο για:
- CSS, παράδοση σχεδίου, οδηγίες εταιρικής ταυτότητας
Πίνακας αναφοράς HSL σε HEX
Οι πιο κοινές CSS αποχρώσεις, μετατρεπόμενες από HSL σε HEX.
| Χρώμα | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |