Η μεταφορά μιας τυπωμένης παλέτας στο web είναι πιο εύκολη σε HSL: μόλις το μείγμα μελανιών εκφραστεί ως hue, saturation και lightness, μπορείς να φτιάξεις hover states, tints και shades σε δευτερόλεπτα.
Πώς λειτουργεί η μετατροπή από CMYK σε HSL
- Μετέτρεψε τα ποσοστά CMYK σε RGB κανάλια μεταξύ 0 και 255.
- Διαίρεσε τα κανάλια με 255 και πάρε το μέγιστο και το ελάχιστό τους.
- Ο μέσος όρος του μέγιστου και του ελάχιστου είναι η φωτεινότητα L, ενώ η διαφορά τους καθορίζει τον κορεσμό S.
- Το κανάλι που κρατάει το μέγιστο καθορίζει το hue H σε μοίρες στον χρωματικό τροχό.
Παράδειγμα εφαρμογής
Το βήμα CMYK → RGB είναι ήδη προσέγγιση και οι τιμές 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(0%, 0%, 0%, 100%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 100%, 100%, 0%) | hsl(0, 100%, 50%) |
| lime | cmyk(100%, 0%, 100%, 0%) | hsl(120, 100%, 50%) |
| blue | cmyk(100%, 100%, 0%, 0%) | hsl(240, 100%, 50%) |
| yellow | cmyk(0%, 0%, 100%, 0%) | hsl(60, 100%, 50%) |
| orange | cmyk(0%, 35%, 100%, 0%) | hsl(39, 100%, 50%) |
| teal | cmyk(100%, 0%, 0%, 50%) | hsl(180, 100%, 25%) |
| purple | cmyk(0%, 100%, 0%, 50%) | hsl(300, 100%, 25%) |
| gray | cmyk(0%, 0%, 0%, 50%) | hsl(0, 0%, 50%) |