Η μεταφορά μιας τυπωμένης παλέτας στο web είναι πιο εύκολη σε HSL: μόλις το μείγμα μελανιών εκφραστεί ως hue, saturation και lightness, μπορείς να φτιάξεις hover states, tints και shades σε δευτερόλεπτα.
Πώς λειτουργεί η μετατροπή από CMYK σε HSL
- Μετέτρεψε τα ποσοστά CMYK σε κανάλια sRGB μεταξύ 0 και 255 με το προφίλ Coated FOGRA39.
- Διαίρεσε τα κανάλια με 255 και πάρε το μέγιστο και το ελάχιστό τους.
- Ο μέσος όρος του μέγιστου και του ελάχιστου είναι η φωτεινότητα L, ενώ η διαφορά τους καθορίζει τον κορεσμό S.
- Το κανάλι που κρατάει το μέγιστο καθορίζει το hue H σε μοίρες στον χρωματικό τροχό.
Παράδειγμα εφαρμογής
Το βήμα CMYK σε RGB χρησιμοποιεί το τυπικό προφίλ Coated FOGRA39, γι' αυτό άλλα προφίλ CMYK (για παράδειγμα από το τυπογραφείο σου) δίνουν διαφορετικούς αριθμούς. Οι τιμές HSL στρογγυλεύονται σε ακέραιους αριθμούς.
CMYK και HSL εξηγούνται
Τι είναι το CMYK;
Το CMYK είναι το μοντέλο τεσσάρων μελανιών που χρησιμοποιείται στην εκτύπωση: cyan, magenta, yellow και key (μαύρο), το καθένα ως ποσοστό από 0 έως 100. Το μελάνι αφαιρεί φως αντί να το εκπέμπει, γι' αυτό το CMYK καλύπτει λιγότερα χρώματα από μια οθόνη — και για αυτό τα φωτεινά χρώματα στην οθόνη συχνά φαίνονται πιο θαμπά όταν τυπώνονται.
- Σύνταξη:
- cmyk(C%, M%, Y%, K%)
- Πεδίο:
- 0–100% ανά μελάνι
- Καλύτερο για:
- εκτύπωση, συσκευασία, αρχεία έτοιμα για τύπωμα
Τι είναι το HSL;
Το HSL χωρίζει ένα χρώμα σε hue (0–360° στον χρωματικό τροχό), saturation (πόσο χρωματικό, 0–100%) και lightness (πόσο φωτεινό, 0–100%). Επειδή κάθε μέρος αντιστοιχεί στον τρόπο που οι άνθρωποι περιγράφουν το χρώμα, το HSL είναι η πιο εύκολη μορφή για να φτιάχνεις τόνους, σκιές και συνεπείς παλέτες — χειροκίνητα ή σε κώδικα.
- Σύνταξη:
- hsl(H, S%, L%)
- Πεδίο:
- 0–360°, 0–100%, 0–100%
- Καλύτερο για:
- παλέτες, τόνους και σκιές, θεματισμός
Πίνακας αναφοράς CMYK σε HSL
Οι πιο κοινές CSS αποχρώσεις, μετατρεπόμενες από CMYK σε HSL.
| Χρώμα | CMYK | HSL |
|---|---|---|
| black | cmyk(89%, 78%, 62%, 97%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 95%, 92%, 0%) | hsl(1, 79%, 51%) |
| lime | cmyk(64%, 0%, 100%, 0%) | hsl(93, 60%, 44%) |
| blue | cmyk(93%, 75%, 0%, 0%) | hsl(224, 56%, 39%) |
| yellow | cmyk(9%, 0%, 96%, 0%) | hsl(57, 100%, 48%) |
| orange | cmyk(0%, 43%, 94%, 0%) | hsl(37, 93%, 53%) |
| teal | cmyk(83%, 27%, 48%, 12%) | hsl(180, 87%, 27%) |
| purple | cmyk(63%, 100%, 4%, 1%) | hsl(299, 58%, 31%) |
| gray | cmyk(48%, 39%, 39%, 21%) | hsl(30, 1%, 50%) |